bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor --accent-color, yet again

Browse source
This commit is contained in:
Alex Gleason 2020-06-07 12:17:10 -05:00
parent cbb81f18f4
commit ccf452e028
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
5 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/styles/about.scss
View file

@ -1377,16 +1377,14 @@ $small-breakpoint: 960px;
}
.nav-button {
background: var(--brand-color);
background: var(--accent-color);
color: #fff;
filter: var(--accent-filter);
transition: 0.2s;
&:hover,
&:focus,
&:active {
background: var(--brand-color);
filter: var(--accent-filter--hover);
background: var(--accent-color--bright);
}
}
}

3
app/styles/components/columns.scss
View file

@ -399,8 +399,7 @@
display: block;
position: absolute;
width: 100%;
background-color: var(--brand-color--faint);
filter: var(--accent-filter);
background-color: var(--accent-color--faint);
border-radius: 10px;
transition: 0.2s;
opacity: 0;

9
app/styles/components/tabs-bar.scss
View file

@ -117,15 +117,13 @@
height: 34px;
margin-left: 20px;
border-radius: 6px;
background-color: var(--brand-color);
background-color: var(--accent-color);
font-weight: bold;
font-size: 16px;
transition: 0.2s;
filter: var(--accent-filter);
&:hover {
background-color: var(--brand-color);
filter: var(--accent-filter--hover);
background-color: var(--accent-color--bright);
}
}
@ -204,7 +202,7 @@
&::before {
content: "";
display: block;
background: var(--brand-color);
background: var(--accent-color);
position: absolute;
transition: 0.2s;
left: 0;
@ -215,7 +213,6 @@
z-index: -1;
width: calc(100% + 20px);
margin-left: -12px;
filter: var(--accent-filter);
@media screen and (max-width: 895px) {
height: 0;

15
app/styles/themes.scss
View file

@ -5,8 +5,8 @@ Primary variables are fully-formed CSS properties.
Form: --{primary-name}
Examples:
--brand-color
--accent-color
--primary-text-color
--accent-filter
Meta-variables are combined to make primary variables.
Form: --{primary-name}_{property}
@ -27,19 +27,28 @@ Examples:
body {
// Primary variables
--brand-color: hsl(var(--brand-color_hsl));
--accent-filter: saturate(1.3) hue-rotate(-20deg) brightness(1.2);
--accent-color: hsl(var(--accent-color_hsl));
--primary-text-color: hsl(var(--primary-text-color_hsl));
--background-color: hsl(var(--background-color_hsl));
// Meta-variables
--brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
--accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
--primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
--accent-color_h: calc(var(--brand-color_h) - 20);
--accent-color_s: calc(var(--brand-color_s) + 10%);
--accent-color_l: calc(var(--brand-color_l) + 5%);
// Modifiers
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
--brand-color--med: hsla(var(--brand-color_hsl), 0.2);
--accent-filter--hover: saturate(1.3) hue-rotate(-20deg) brightness(1.3);
--accent-color--faint: hsla(var(--accent-color_hsl), 0.1);
--accent-color--bright: hsl(
var(--accent-color_h),
var(--accent-color_s),
calc(var(--accent-color_l) + 3%)
);
--primary-text-color--faint: hsla(var(--primary-text-color_hsl), 0.6);
}

3
app/styles/ui.scss
View file

@ -413,8 +413,7 @@
border-radius: 8px;
text-align: center;
color: #fff;
background: var(--brand-color);
filter: var(--accent-filter);
background: var(--accent-color);
@media screen and (max-width: 895px) {
top: 0;