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

🔧 Slightly increase alpha for low c-values

Browse source
This commit is contained in:
Steffo 2021-08-13 04:06:59 +02:00
parent 0710f9a0d6
commit ca52fc17b4
Signed by: steffo
GPG key ID: 6965406171929D01
5 changed files with 46 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/rules/skeleton.less vendored
View file

@ -150,37 +150,37 @@
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.025
0.030
);
@c1: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.100
0.125
);
@c2: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.200
0.220
);
@c3: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.300
0.315
);
@c4: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.400
0.410
);
@c5: rgba(
var(--bluelib-color-r),
var(--bluelib-color-g),
var(--bluelib-color-b),
0.500
0.505
);
@c6: rgba(
var(--bluelib-color-r),

38
src/targets/skeleton.module.css
View file

@ -146,8 +146,8 @@
padding: 8px;
border-radius: 4px;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
border-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.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
.bluelib .panel > *:first-child,
.bluelib .panel .all:first-child {
@ -206,10 +206,10 @@
.bluelib .separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.505);
}
.bluelib .separator-light {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
.bluelib .separator-heavy {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
@ -240,21 +240,21 @@
font: inherit;
width: 100%;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.315);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
.bluelib .input.status-disabled {
border-style: dashed;
}
.bluelib .input::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.41);
opacity: 1;
}
.bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
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.125);
}
.bluelib .input:hover::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
@ -262,20 +262,20 @@
.bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 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.22);
}
.bluelib .input:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
}
.bluelib .input.status-disabled:hover,
.bluelib .input.status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.315);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
.bluelib .input.status-disabled:hover::placeholder,
.bluelib .input.status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.41);
}
.bluelib .input:optional,
.bluelib .input:optional::placeholder {
@ -347,12 +347,12 @@
.bluelib .input-button:active {
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) + (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.315);
}
.bluelib .input-button .status-disabled:active {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.315);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
.bluelib .input-checkbox,
.bluelib .input-radio {
@ -428,7 +428,7 @@
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
padding: 6px;
border-radius: 4px;
}
@ -516,7 +516,7 @@
text-decoration-style: solid;
}
.bluelib .ruby-parenthesis {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
.bluelib .ruby-text {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
@ -562,7 +562,7 @@
}
.bluelib mark,
.bluelib .semantic-mark {
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.22);
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);
}
.bluelib q,
@ -573,7 +573,7 @@
.bluelib .semantic-q:before,
.bluelib q:after,
.bluelib .semantic-q:after {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.505);
}
.bluelib samp,
.bluelib .semantic-samp {

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

File diff suppressed because one or more lines are too long

38
src/targets/skeleton.root.css
View file

@ -165,8 +165,8 @@ body .panel,
padding: 8px;
border-radius: 4px;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
border-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.03);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
body .panel > *:first-child,
.bluelib .panel > *:first-child {
@ -273,11 +273,11 @@ body .separator,
.bluelib .separator {
border-width: 1px;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.505);
}
body .separator-light,
.bluelib .separator-light {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
body .separator-heavy,
.bluelib .separator-heavy {
@ -382,9 +382,9 @@ body .input,
font: inherit;
width: 100%;
border-style: solid;
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.315);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
body .input-field[disabled],
.bluelib .input-field[disabled],
@ -574,7 +574,7 @@ body .input-radio::placeholder,
.bluelib .input-radio::placeholder,
body .input::placeholder,
.bluelib .input::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.41);
opacity: 1;
}
body .input-field:hover,
@ -641,7 +641,7 @@ body .input:hover,
.bluelib .input:hover {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
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.125);
}
body .input-field:hover::placeholder,
.bluelib .input-field:hover::placeholder,
@ -771,7 +771,7 @@ body .input:focus,
.bluelib .input:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 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.22);
}
body .input-field:focus::placeholder,
.bluelib .input-field:focus::placeholder,
@ -1085,9 +1085,9 @@ body .input-radio .status-disabled:focus,
.bluelib .input-radio .status-disabled:focus,
body .input .status-disabled:focus,
.bluelib .input .status-disabled:focus {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.315);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
body .input-field[disabled]:hover::placeholder,
.bluelib .input-field[disabled]:hover::placeholder,
@ -1337,7 +1337,7 @@ body .input-radio .status-disabled:focus::placeholder,
.bluelib .input-radio .status-disabled:focus::placeholder,
body .input .status-disabled:focus::placeholder,
.bluelib .input .status-disabled:focus::placeholder {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.41);
}
body .input-field:optional,
.bluelib .input-field:optional,
@ -1754,7 +1754,7 @@ body .input-button:active,
.bluelib .input-button:active {
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) + (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.315);
}
body button [disabled]:active,
.bluelib button [disabled]:active,
@ -1772,9 +1772,9 @@ body input[type="reset"] .status-disabled:active,
.bluelib input[type="reset"] .status-disabled:active,
body .input-button .status-disabled:active,
.bluelib .input-button .status-disabled:active {
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.315);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
}
body input[type="checkbox"],
.bluelib input[type="checkbox"],
@ -2038,7 +2038,7 @@ body .form .form-group,
align-items: center;
flex-wrap: wrap;
width: 100%;
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.03);
padding: 6px;
border-radius: 4px;
}
@ -2203,7 +2203,7 @@ body rp,
.bluelib rp,
body .ruby-parenthesis,
.bluelib .ruby-parenthesis {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.125);
}
body rt,
.bluelib rt,
@ -2269,7 +2269,7 @@ body mark,
.bluelib mark,
body .semantic-mark,
.bluelib .semantic-mark {
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.22);
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);
}
body q,
@ -2286,7 +2286,7 @@ body q:after,
.bluelib q:after,
body .semantic-q:after,
.bluelib .semantic-q:after {
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.5);
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.505);
}
body samp,
.bluelib samp,

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

File diff suppressed because one or more lines are too long