Commit 44a0f596 authored by Marvin Davieds's avatar Marvin Davieds

use css instead of sass variables for colors

Before this change sass variables were used to define the colors used in
this app. While sass variables allow easy color modification they
inhibit dynamic color changes since their values will be compiled into
css. Changing colors at runtime is possible with css variables but
further modifications were necessary since darken, lighten and fade-out
sass functions don't work with css variables. With the hsl
representation of colors these color modifications can be performed at
runtime.
parent 4bceb9a8
Pipeline #2547 passed with stage
in 3 minutes and 34 seconds
......@@ -59,7 +59,7 @@
display: inline-flex;
border: none;
background: rgba(255, 255, 255, .5);
color: lighten($color-base, 10%);
color: hsl(var(--color-base-base), calc(var(--color-base-lightness) + 10%));
text-align: center;
align-items: center;
justify-content: center;
......@@ -113,12 +113,12 @@
}
&.is-primary {
background-color: $color-primary;
background-color: var(--color-primary);
color: white;
&:hover,
&:focus {
background-color: lighten($color-primary, 5%);
background-color: hsl(var(--color-primary-base), calc(var(--color-primary-lightness) + 5%));
}
}
......
......@@ -201,7 +201,10 @@
left: 0;
right: 0;
height: 100%;
background-image: linear-gradient(fade_out($color-base, 1), $color-base);
background-image: linear-gradient(
hsla(var(--color-base-base), var(--color-base-lightness), 0),
var(--color-base)
);
z-index: 2;
}
}
......
......@@ -73,14 +73,14 @@
display: block;
border: none;
background: rgba(255, 255, 255, .95);
color: $color-base;
color: var(--color-base);
padding: .75em 1em;
width: 100%;
flex: 1;
border-radius: 2px;
&::placeholder {
color: lighten($color-base, 45%);
color: hsl(var(--color-base-base), calc(var(--color-base-lightness) + 45%));
}
+ .button {
......
......@@ -26,10 +26,11 @@
@import '../../styles/variables';
$size: .95rem;
$inactive-color: $color-surface;
$active-color: lighten($color-surface, 30%);
.paginator-indicator {
--inactive-color: var(--color-surface);
--active-color: hsl(var(--color-surface-base), calc(var(--color-surface-lightness) + 30%));
text-align: center;
}
......@@ -41,15 +42,15 @@
}
.paginator-indicator-bubble {
background: $inactive-color;
background: var(--inactive-color);
width: $size;
height: $size;
border-radius: 50%;
position: relative;
border: ($size / 4.5) solid $inactive-color;
border: ($size / 4.5) solid var(--inactive-color);
&.is-active {
background: $active-color;
background: var(--active-color);
}
}
</style>
......@@ -125,7 +125,7 @@
.paginator-touch-loader {
position: absolute;
background: $color-base;
background: var(--color-base);
top: 0;
bottom: 0;
width: 100%;
......
......@@ -53,7 +53,7 @@
}
.refresh-indicator {
background: $color-surface;
background: var(--color-surface);
width: 44px;
height: 44px;
color: white;
......
......@@ -44,7 +44,7 @@
background-color: currentColor;
opacity: .5;
border-radius: 50%;
color: $color-primary;
color: var(--color-primary);
animation: scaleInOut $duration ease-in-out 0s infinite;
......
......@@ -32,7 +32,7 @@
transition: opacity, backdrop-filter;
transition-duration: .5s;
opacity: 1;
background: $color-base;
background: var(--color-base);
}
.fade-enter,
......
......@@ -42,7 +42,7 @@
left: 0;
right: 0;
z-index: 20;
background: lighten($color-base, 5%);
background: hsl(var(--color-base-base), calc(var(--color-base-lightness) + 5%));
will-change: transform;
@include elevation(8);
transition: transform .2s cubic-bezier(.3, 0, 0, 1);
......
......@@ -44,7 +44,7 @@
width: 200px;
margin: 0 1rem;
transition: background-color .1s;
color: lighten($color-base, 50%);
color: hsl(var(--color-base-base), calc(var(--color-base-lightness) + 50%));
&.is-active {
color: white;
......
......@@ -79,7 +79,7 @@
}
&.is-playing {
color: $color-primary;
color: var(--color-primary);
.image {
filter: none;
......@@ -99,7 +99,11 @@
justify-content: center;
pointer-events: none;
background-color: fade_out(lighten($color-base, 2.5%), .35);
background-color: hsla(
var(--color-base-base),
calc(var(--color-base-lightness) + 2.5%),
0.65
);
backdrop-filter: grayscale(35%);
svg {
......
......@@ -50,7 +50,7 @@
}
.player-control[aria-checked="true"] {
color: $color-accent;
color: var(--color-accent);
}
.player-control[aria-checked="true"]::after {
......
......@@ -42,7 +42,7 @@
}
&.is-active strong {
color: $color-primary;
color: var(--color-primary);
}
}
</style>
......@@ -30,7 +30,7 @@
body {
margin: 0;
padding-bottom: 196px;
background: $color-base;
background: var(--color-base);
text-rendering: optimizeLegibility;
overflow-y: scroll;
color: white;
......@@ -47,7 +47,7 @@ details summary {
}
a {
color: $color-primary;
color: var(--color-primary);
}
p {
......
......@@ -2,3 +2,35 @@
@import './variables.scss';
@import './base.scss';
@import './util.scss';
// The colors used in this app are defined below. Use the hsl representation for
// lighten, darken and other modifications, like so:
//
// lighten the primary color by 10%:
//
// hsl(var(--color-primary-base), calc(var(--color-primary-lightness) + 10%));
//
// darken the accent color by 25%:
//
// hsl(var(--color-accent-base), calc(var(--color-accent-lightness) - 25%));
:root {
--color-primary-hex: #2a9a98;
--color-primary-base: 179, 57%;
--color-primary-lightness: 38%;
--color-primary: hsl(var(--color-primary-base), var(--color-primary-lightness));
--color-accent-hex: #cc6633;
--color-accent-base: 20, 60%;
--color-accent-lightness: 50%;
--color-accent: hsl(var(--color-accent-base), var(--color-accent-lightness));
--color-base-hex: #24242e;
--color-base-base: 240, 12%;
--color-base-lightness: 16%;
--color-base: hsl(var(--color-base-base), var(--color-base-lightness));
--color-surface-base: var(--color-base-base);
--color-surface-lightness: calc(var(--color-base-lightness) + 7.5%);
--color-surface: hsl(var(--color-surface-base), var(--color-surface-lightness));
}
......@@ -61,7 +61,7 @@
margin: 0 0 .45em 0;
letter-spacing: 0.02em;
display: block;
color: $color-accent;
color: var(--color-accent);
hyphens: auto;
}
}
......@@ -117,7 +117,7 @@
}
.bg-surface {
background: $color-surface;
background: var(--color-surface);
}
@each $name, $factor in $color-shades {
......@@ -229,6 +229,10 @@
}
.glass {
background-color: fade_out(lighten($color-base, 2.5%), .1);
background-color: hsla(
var(--color-base-base),
calc(var(--color-base-lightness) + 2.5%),
0.9
);
backdrop-filter: blur(10px);
}
......@@ -2,7 +2,3 @@ $spacer: 1rem;
$spacers: (0: 0, 1: .25, 2: .5, 3: 1, 4: 1.5, 5: 2.25, 6: 3);
$spacer-types: (m: margin, p: padding);
$color-shades: (0: .9725, 1: .9450, 2: .9137, 3: .8705, 4: .8078, 5: .6784, 6: .5254, 7: .2862, 8: .2039, 9: .1294);
$color-primary: #2a9a98;
$color-accent: #cc6633;
$color-base: #24242e;
$color-surface: lighten($color-base, 7.5%);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment