Suspectus/gandalf-reborn
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Enhance color theme management with improved set-color-shades mixin; add scrollbar styling

Browse Source
This commit is contained in:
Christian Werner 2025-10-21 01:25:16 +02:00
parent ceb1489eda
commit f391db4fba
2 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/angular/frontend/src/color-theme.scss
View File

@ -8,9 +8,33 @@ $success-color: hsl(110, 60%, 50%);
$warn-color: hsl(50, 70%, 50%);
$danger-color: hsl(10, 80%, 50%);
@mixin set-color-shades($name, $color, $step: 10) {
@for $i from 1 through (100/$step)-1 {
--#{$name}-#{$i * $step}: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$i * $step}%);
@mixin set-color-shades($name, $color, $step: 10, $padded: false, $reverse: false) {
$from: 1;
$to: 100/$step;
@if $padded {
$from: 0;
}
@if not $padded {
$to: $to - 1;
}
@for $i from $from through $to {
$index: $i;
@if $reverse {
@if $padded {
$index: ($to - $i);
} @else {
$index: ($to - $i) + 1;
}
}
@debug $reverse, $index, $i, $to;
--#{$name}-#{$i * $step}: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$index * $step}%);
}
}
@ -37,7 +61,7 @@ $danger-color: hsl(10, 80%, 50%);
@for $i from $from through $to {
.#{$name}-#{$i * $step} {
--bg-color: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$i * $step}%);
--bg-color: var(--#{$name}-#{$i * $step});
@if $i * $step <= $text-color-swap-step {
--text-color: #{$text-color-swap-dark};
@ -49,16 +73,16 @@ $danger-color: hsl(10, 80%, 50%);
@for $i from $from through $to {
.#{$name}-icon-#{$i * $step} {
--text-color: hsl(#{color.hue($color)}, #{color.saturation($color)}, #{$i * $step}%);
--text-color: var(--#{$name}-#{$i * $step});
}
}
}
:root {
@include set-color-shades("neutral", hsl(0, 0%, 0%), 10);
@include set-color-shades("neutral", hsl(240, 25%, 0%), 10, true, false);
@include set-common-colors();
@include set-color-shades("primary", $primary-color, 10);
@include set-color-shades("secondary", $secondary-color, 10);
@include set-color-shades("primary", $primary-color, 10, false, false);
@include set-color-shades("secondary", $secondary-color, 10, false, false);
--bg-color: var(--neutral-90);
--text-color: var(--neutral-10);
@ -66,13 +90,14 @@ $danger-color: hsl(10, 80%, 50%);
@media (prefers-color-scheme: dark) {
:root {
--bg-color: var(--neutral-10);
--text-color: var(--neutral-90);
@include set-color-shades("neutral", hsl(240, 25%, 0%), 10, true, true);
@include set-color-shades("primary", $primary-color, 10, false, true);
@include set-color-shades("secondary", $secondary-color, 10, false, true);
}
}
a {
color: var(--secondary-70);
color: var(--secondary-30);
text-decoration: none;
&:hover {
@ -80,7 +105,7 @@ a {
}
}
@include set-color-classes("neutral", hsl(0, 0%, 0%), 10, true);
@include set-color-classes("neutral", hsl(240, 25%, 0%), 10, true);
@include set-color-classes("primary", $primary-color, 10, false);
@include set-color-classes("secondary", $secondary-color, 10, false, 60);

5
src/angular/frontend/src/styles.scss
View File

@ -15,3 +15,8 @@ body {
background-color: var(--bg-color);
color: var(--text-color);
}
* {
scrollbar-color: var(--neutral-70)var(--neutral-80);
scrollbar-width: thin;
}