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

🚧 Define polarity variable

Browse source
This commit is contained in:
Steffo 2021-07-30 18:57:18 +02:00 committed by Stefano Pigozzi
parent eb0a1afacb
commit 9cd397cb69
16 changed files with 147 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/colors/minus.less
View file

@ -1,19 +0,0 @@
@b0: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
@b1: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.100);
@b2: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.200);
@b3: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.300);
@b4: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.400);
@b5: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.500);
@b6: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.600);
@b7: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.700);
@b8: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.800);
@b9: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.900);
@bA: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1.000);
@bB: rgba(calc(var(--bluelib-color-r) - 10), calc(var(--bluelib-color-g) - 10), calc(var(--bluelib-color-b) - 10), 1.000);
@bC: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1.000);
@bD: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1.000);
@bE: rgba(calc(var(--bluelib-color-r) - 40), calc(var(--bluelib-color-g) - 40), calc(var(--bluelib-color-b) - 40), 1.000);
@bF: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1.000);
@hex-towards: #000000;
@hex-away: #ffffff;

19
src/colors/plus.less
View file

@ -1,19 +0,0 @@
@b0: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
@b1: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.100);
@b2: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.200);
@b3: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.300);
@b4: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.400);
@b5: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.500);
@b6: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.600);
@b7: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.700);
@b8: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.800);
@b9: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.900);
@bA: rgba( var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1.000);
@bB: rgba(calc(var(--bluelib-color-r) + 10), calc(var(--bluelib-color-g) + 10), calc(var(--bluelib-color-b) + 10), 1.000);
@bC: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1.000);
@bD: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1.000);
@bE: rgba(calc(var(--bluelib-color-r) + 40), calc(var(--bluelib-color-g) + 40), calc(var(--bluelib-color-b) + 40), 1.000);
@bF: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1.000);
@hex-towards: #ffffff;
@hex-away: #000000;

4
src/rules/skeleton.less vendored
View file

@ -9,10 +9,12 @@
// Set the base color to the foreground defined in the palette // Set the base color to the foreground defined in the palette
.bluelib-color(@hex-foreground); .bluelib-color(@hex-foreground);
// By default, text should use the main font // By default, text should use the main font
.font-text(); .font-text();
// Define the color macros used through all the stylesheet
.define-bluelib-color-macros();
/// ===== All ===== /// ===== All =====
/// By default, browsers style elements with some weird rules. /// By default, browsers style elements with some weird rules.
/// This is an attempt to correct them, and to implement some Bluelib magic. /// This is an attempt to correct them, and to implement some Bluelib magic.

14
src/targets/paper.module.css
View file

@ -319,7 +319,7 @@
} }
.bluelib .input:hover { .bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
.bluelib .input:hover::placeholder { .bluelib .input:hover::placeholder {
@ -327,7 +327,7 @@
} }
.bluelib .input:focus { .bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
} }
.bluelib .input:focus::placeholder { .bluelib .input:focus::placeholder {
@ -405,8 +405,8 @@
border-radius: 4px; border-radius: 4px;
} }
.bluelib .input-button:active { .bluelib .input-button:active {
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1); border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
} }
.bluelib .input-button .status-disabled:active { .bluelib .input-button .status-disabled:active {
@ -438,15 +438,15 @@
} }
.bluelib .input-checkbox:hover:checked::before, .bluelib .input-checkbox:hover:checked::before,
.bluelib .input-radio:hover:checked::before { .bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 10), calc(var(--bluelib-color-g) - 10), calc(var(--bluelib-color-b) - 10), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
} }
.bluelib .input-checkbox:focus:checked::before, .bluelib .input-checkbox:focus:checked::before,
.bluelib .input-radio:focus:checked::before { .bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
.bluelib .input-checkbox:active:checked::before, .bluelib .input-checkbox:active:checked::before,
.bluelib .input-radio:active:checked::before { .bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
.bluelib .input-checkbox { .bluelib .input-checkbox {
border-radius: 4px; border-radius: 4px;

2
src/targets/paper.module.css.map
View file

File diff suppressed because one or more lines are too long

1
src/targets/paper.module.less
View file

@ -4,7 +4,6 @@
@import (less) "../fonts/firasans.less"; @import (less) "../fonts/firasans.less";
@import (less) "../palettes/paper.less"; @import (less) "../palettes/paper.less";
@import (less) "../colors/minus.less";
@import (less) "../vars/module.less"; @import (less) "../vars/module.less";
@import (less) "../rules/skeleton.less"; @import (less) "../rules/skeleton.less";

14
src/targets/paper.root.css
View file

@ -701,7 +701,7 @@ body .input-radio:hover,
body .input:hover, body .input:hover,
.bluelib .input:hover { .bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
body .input-field:hover::placeholder, body .input-field:hover::placeholder,
@ -823,7 +823,7 @@ body .input-radio:focus,
body .input:focus, body .input:focus,
.bluelib .input:focus { .bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
} }
body .input-field:focus::placeholder, body .input-field:focus::placeholder,
@ -1748,8 +1748,8 @@ body input[type="reset"]:active,
.bluelib input[type="reset"]:active, .bluelib input[type="reset"]:active,
body .input-button:active, body .input-button:active,
.bluelib .input-button:active { .bluelib .input-button:active {
border-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1); border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
} }
body button [disabled]:active, body button [disabled]:active,
@ -1820,7 +1820,7 @@ body input[type="radio"]:hover:checked::before,
.bluelib input[type="radio"]:hover:checked::before, .bluelib input[type="radio"]:hover:checked::before,
body .input-radio:hover:checked::before, body .input-radio:hover:checked::before,
.bluelib .input-radio:hover:checked::before { .bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 10), calc(var(--bluelib-color-g) - 10), calc(var(--bluelib-color-b) - 10), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
} }
body input[type="checkbox"]:focus:checked::before, body input[type="checkbox"]:focus:checked::before,
.bluelib input[type="checkbox"]:focus:checked::before, .bluelib input[type="checkbox"]:focus:checked::before,
@ -1830,7 +1830,7 @@ body input[type="radio"]:focus:checked::before,
.bluelib input[type="radio"]:focus:checked::before, .bluelib input[type="radio"]:focus:checked::before,
body .input-radio:focus:checked::before, body .input-radio:focus:checked::before,
.bluelib .input-radio:focus:checked::before { .bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
body input[type="checkbox"]:active:checked::before, body input[type="checkbox"]:active:checked::before,
.bluelib input[type="checkbox"]:active:checked::before, .bluelib input[type="checkbox"]:active:checked::before,
@ -1840,7 +1840,7 @@ body input[type="radio"]:active:checked::before,
.bluelib input[type="radio"]:active:checked::before, .bluelib input[type="radio"]:active:checked::before,
body .input-radio:active:checked::before, body .input-radio:active:checked::before,
.bluelib .input-radio:active:checked::before { .bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) - 30), calc(var(--bluelib-color-g) - 30), calc(var(--bluelib-color-b) - 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
body input[type="checkbox"], body input[type="checkbox"],
.bluelib input[type="checkbox"], .bluelib input[type="checkbox"],

2
src/targets/paper.root.css.map
View file

File diff suppressed because one or more lines are too long

1
src/targets/paper.root.less
View file

@ -4,7 +4,6 @@
@import (less) "../fonts/firasans.less"; @import (less) "../fonts/firasans.less";
@import (less) "../palettes/paper.less"; @import (less) "../palettes/paper.less";
@import (less) "../colors/minus.less";
@import (less) "../vars/root.less"; @import (less) "../vars/root.less";
@import (less) "../rules/skeleton.less"; @import (less) "../rules/skeleton.less";

14
src/targets/royalblue.module.css
View file

@ -319,7 +319,7 @@
} }
.bluelib .input:hover { .bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
.bluelib .input:hover::placeholder { .bluelib .input:hover::placeholder {
@ -327,7 +327,7 @@
} }
.bluelib .input:focus { .bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
} }
.bluelib .input:focus::placeholder { .bluelib .input:focus::placeholder {
@ -405,8 +405,8 @@
border-radius: 4px; border-radius: 4px;
} }
.bluelib .input-button:active { .bluelib .input-button:active {
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1); border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
} }
.bluelib .input-button .status-disabled:active { .bluelib .input-button .status-disabled:active {
@ -438,15 +438,15 @@
} }
.bluelib .input-checkbox:hover:checked::before, .bluelib .input-checkbox:hover:checked::before,
.bluelib .input-radio:hover:checked::before { .bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 10), calc(var(--bluelib-color-g) + 10), calc(var(--bluelib-color-b) + 10), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
} }
.bluelib .input-checkbox:focus:checked::before, .bluelib .input-checkbox:focus:checked::before,
.bluelib .input-radio:focus:checked::before { .bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
.bluelib .input-checkbox:active:checked::before, .bluelib .input-checkbox:active:checked::before,
.bluelib .input-radio:active:checked::before { .bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
.bluelib .input-checkbox { .bluelib .input-checkbox {
border-radius: 4px; border-radius: 4px;

2
src/targets/royalblue.module.css.map
View file

File diff suppressed because one or more lines are too long

1
src/targets/royalblue.module.less
View file

@ -4,7 +4,6 @@
@import (less) "../fonts/firasans.less"; @import (less) "../fonts/firasans.less";
@import (less) "../palettes/royalblue.less"; @import (less) "../palettes/royalblue.less";
@import (less) "../colors/plus.less";
@import (less) "../vars/module.less"; @import (less) "../vars/module.less";
@import (less) "../rules/skeleton.less"; @import (less) "../rules/skeleton.less";

14
src/targets/royalblue.root.css
View file

@ -701,7 +701,7 @@ body .input-radio:hover,
body .input:hover, body .input:hover,
.bluelib .input:hover { .bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
} }
body .input-field:hover::placeholder, body .input-field:hover::placeholder,
@ -823,7 +823,7 @@ body .input-radio:focus,
body .input:focus, body .input:focus,
.bluelib .input:focus { .bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1); border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
} }
body .input-field:focus::placeholder, body .input-field:focus::placeholder,
@ -1748,8 +1748,8 @@ body input[type="reset"]:active,
.bluelib input[type="reset"]:active, .bluelib input[type="reset"]:active,
body .input-button:active, body .input-button:active,
.bluelib .input-button:active { .bluelib .input-button:active {
border-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1); border-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)), 1);
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1); color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3); background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
} }
body button [disabled]:active, body button [disabled]:active,
@ -1820,7 +1820,7 @@ body input[type="radio"]:hover:checked::before,
.bluelib input[type="radio"]:hover:checked::before, .bluelib input[type="radio"]:hover:checked::before,
body .input-radio:hover:checked::before, body .input-radio:hover:checked::before,
.bluelib .input-radio:hover:checked::before { .bluelib .input-radio:hover:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 10), calc(var(--bluelib-color-g) + 10), calc(var(--bluelib-color-b) + 10), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)), 1);
} }
body input[type="checkbox"]:focus:checked::before, body input[type="checkbox"]:focus:checked::before,
.bluelib input[type="checkbox"]:focus:checked::before, .bluelib input[type="checkbox"]:focus:checked::before,
@ -1830,7 +1830,7 @@ body input[type="radio"]:focus:checked::before,
.bluelib input[type="radio"]:focus:checked::before, .bluelib input[type="radio"]:focus:checked::before,
body .input-radio:focus:checked::before, body .input-radio:focus:checked::before,
.bluelib .input-radio:focus:checked::before { .bluelib .input-radio:focus:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
body input[type="checkbox"]:active:checked::before, body input[type="checkbox"]:active:checked::before,
.bluelib input[type="checkbox"]:active:checked::before, .bluelib input[type="checkbox"]:active:checked::before,
@ -1840,7 +1840,7 @@ body input[type="radio"]:active:checked::before,
.bluelib input[type="radio"]:active:checked::before, .bluelib input[type="radio"]:active:checked::before,
body .input-radio:active:checked::before, body .input-radio:active:checked::before,
.bluelib .input-radio:active:checked::before { .bluelib .input-radio:active:checked::before {
background-color: rgba(calc(var(--bluelib-color-r) + 30), calc(var(--bluelib-color-g) + 30), calc(var(--bluelib-color-b) + 30), 1); background-color: rgba(calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)), calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)), 1);
} }
body input[type="checkbox"], body input[type="checkbox"],
.bluelib input[type="checkbox"], .bluelib input[type="checkbox"],

2
src/targets/royalblue.root.css.map
View file

File diff suppressed because one or more lines are too long

1
src/targets/royalblue.root.less
View file

@ -4,7 +4,6 @@
@import (less) "../fonts/firasans.less"; @import (less) "../fonts/firasans.less";
@import (less) "../palettes/royalblue.less"; @import (less) "../palettes/royalblue.less";
@import (less) "../colors/plus.less";
@import (less) "../vars/root.less"; @import (less) "../vars/root.less";
@import (less) "../rules/skeleton.less"; @import (less) "../rules/skeleton.less";

112
src/utils/mixins.less
View file

@ -3,3 +3,115 @@
--bluelib-color-g: green(@color); --bluelib-color-g: green(@color);
--bluelib-color-b: blue(@color); --bluelib-color-b: blue(@color);
} }
.define-bluelib-color-macros() {
@b0: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.025
);
@b1: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.100
);
@b2: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.200
);
@b3: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.300
);
@b4: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.400
);
@b5: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.500
);
@b6: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.600
);
@b7: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.700
);
@b8: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.800
);
@b9: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.900
);
@bA: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
1.000
);
@bB: rgba(
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 10)),
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 10)),
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 10)),
1.000
);
@bC: rgba(
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 20)),
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 20)),
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 20)),
1.000
);
@bD: rgba(
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 30)),
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 30)),
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 30)),
1.000
);
@bE: rgba(
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 40)),
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 40)),
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 40)),
1.000
);
@bF: rgba(
calc(var(--bluelib-color-r) + (var(--bluelib-polarity) * 50)),
calc(var(--bluelib-color-g) + (var(--bluelib-polarity) * 50)),
calc(var(--bluelib-color-b) + (var(--bluelib-polarity) * 50)),
1.000
);
@bL: rgba(
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
calc(255 * ((var(--bluelib-polarity / 2) * -1) + 0.5)),
1.000
);
@bT: rgba(
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
calc(255 * (var(--bluelib-polarity / 2) + 0.5)),
1.000
);
}