Add 'web/app/themes/badegg/' from commit 'b31aa7550b02a4516fdf161f53dc7666854c9a14'

git-subtree-dir: web/app/themes/badegg
git-subtree-mainline: b862ff9755
git-subtree-split: b31aa7550b
This commit is contained in:
2025-11-22 17:26:50 +00:00
121 changed files with 28270 additions and 0 deletions

View File

@@ -0,0 +1,68 @@
@use "../variables/colours";
@use "sass:color";
@mixin generate_button_colors($name, $hex) {
$buttons: (
".button",
"button",
"input[type=submit]",
);
@each $button in $buttons {
#{$button}.#{$name} {
color: colours.$white;
background: $hex;
border-color: $hex;
&:hover,
&:focus {
color: colours.$white;
background: color.adjust($hex, $lightness: 10%);
border-color: color.adjust($hex, $lightness: 10%);
}
}
#{$button}.#{$name}.inverted {
color: $hex;
background: transparent;
border-color: $hex;
&:hover,
&:focus {
color: white;
background: #{$hex};
border-color: #{$hex};
}
}
@media screen {
*:not(.bg-#{$name}) #{$button}.#{$name} {
color: white;
background-color: $hex;
border-color: $hex;
&:hover,
&:focus {
color: white;
background-color: color.adjust($hex, $lightness: 10%);
border-color: color.adjust($hex, $lightness: 10%);
}
}
.bg-#{$name} #{$button}.#{$name} {
color: $hex;
background: white;
border-color: white;
&:hover,
&:focus {
color: white;
background: transparent;
border-color: white;
}
}
}
}
}

View File

@@ -0,0 +1,28 @@
@use "text-contrast";
@use "sass:color";
@mixin generate_colour_classes($name, $hex) {
.#{$name} {
color: $hex;
}
.fill-#{$name} {
fill: $hex;
}
.border-#{$name} {
border-color: $hex;
}
@media screen {
.bg-#{$name} {
background-color: $hex;
::selection {
@include text-contrast.text_contrast(color.invert($hex));
background: color.invert($hex);
}
}
}
}

View File

@@ -0,0 +1,5 @@
// define as many $color-stops as needed
@mixin linear-gradient($direction, $color-stops...) {
background: list.nth(list.nth($color-stops, 1), 1);
background: linear-gradient($direction, $color-stops);
}

View File

@@ -0,0 +1,17 @@
@use "../variables/colours";
@use "sass:color";
@use "sass:math";
@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
$brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
$light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
@if math.abs($brightness) < (math.div($light-color, $cutoff)) {
color: $light;
}
@else {
color: $dark;
}
}