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 { .nav-button {
background: var(--brand-color); background: var(--accent-color);
color: #fff; color: #fff;
filter: var(--accent-filter);
transition: 0.2s; transition: 0.2s;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: var(--brand-color); background: var(--accent-color--bright);
filter: var(--accent-filter--hover);
} }
} }
} }

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

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

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

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

15
app/styles/themes.scss
View file

@ -5,8 +5,8 @@ Primary variables are fully-formed CSS properties.
Form: --{primary-name} Form: --{primary-name}
Examples: Examples:
--brand-color --brand-color
--accent-color
--primary-text-color --primary-text-color
--accent-filter
Meta-variables are combined to make primary variables. Meta-variables are combined to make primary variables.
Form: --{primary-name}_{property} Form: --{primary-name}_{property}
@ -27,19 +27,28 @@ Examples:
body { body {
// Primary variables // Primary variables
--brand-color: hsl(var(--brand-color_hsl)); --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)); --primary-text-color: hsl(var(--primary-text-color_hsl));
--background-color: hsl(var(--background-color_hsl)); --background-color: hsl(var(--background-color_hsl));
// Meta-variables // Meta-variables
--brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l); --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); --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); --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 // Modifiers
--brand-color--faint: hsla(var(--brand-color_hsl), 0.1); --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
--brand-color--med: hsla(var(--brand-color_hsl), 0.2); --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); --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; border-radius: 8px;
text-align: center; text-align: center;
color: #fff; color: #fff;
background: var(--brand-color); background: var(--accent-color);
filter: var(--accent-filter);
@media screen and (max-width: 895px) { @media screen and (max-width: 895px) {
top: 0; top: 0;