mirror of
https://github.com/godotengine/godot-website.git
synced 2026-01-05 10:10:00 +03:00
72 lines
2.1 KiB
SCSS
72 lines
2.1 KiB
SCSS
//
|
|
// Functions
|
|
//
|
|
@function offset-hue($color, $offset, $i: 1) {
|
|
@return adjust-hue($color, $offset * $i);
|
|
}
|
|
|
|
/**
|
|
* From a list $sections (video, foundation, outstanding, _2d),
|
|
* it will return a map of sections with the $base-category being assigned with
|
|
* a specific $base-color, and will $offset each section by n degrees.
|
|
*/
|
|
@function r-generate-sections($sections, $base-category, $base-color, $offset) {
|
|
$return-value: ();
|
|
$base-category-i: index($sections, $base-category);
|
|
@each $section in $sections {
|
|
$i: index($sections, $section);
|
|
$diff: $i - $base-category-i;
|
|
$base-color-top: offset-hue($base-color, $offset, $diff);
|
|
$base-color-bottom: adjust-color(offset-hue($base-color, $offset, $diff + 1), $lightness: -10);
|
|
$color-top: adjust-color($base-color-top, $saturation: -10);
|
|
$color-bottom: adjust-color($base-color-bottom, $saturation: -10);
|
|
$color-selection: adjust-color($base-color-bottom, $saturation: -30);
|
|
$color-invert: adjust-color($base-color-top, $hue: 180, $lightness: 0, $saturation: 30);
|
|
$color-highlight: adjust-color($base-color-top, $lightness: 0, $saturation: 30);
|
|
$color-highlight--dark: adjust-color($base-color-top, $lightness: 30, $saturation: 30);
|
|
$color-invert-highlight: adjust-color($color-invert, $lightness: 20, $saturation: 30);
|
|
$return-value: map-merge($return-value, (
|
|
#{$section}: (
|
|
color-top: $color-top,
|
|
color-bottom: $color-bottom,
|
|
color-selection: $color-selection,
|
|
color-invert: $color-invert,
|
|
color-highlight: $color-highlight,
|
|
color-highlight--dark: $color-highlight--dark,
|
|
color-invert-highlight: $color-invert-highlight
|
|
)
|
|
));
|
|
}
|
|
@return $return-value;
|
|
}
|
|
|
|
@function r-desktop-mobile($sizes...) {
|
|
@return (
|
|
"desktop": nth($sizes, 1),
|
|
"mobile": nth($sizes, 2)
|
|
);
|
|
}
|
|
|
|
@function r-get-desktop($value) {
|
|
@return map-get($value, "desktop");
|
|
}
|
|
|
|
@function r-get-mobile($value) {
|
|
@return map-get($value, "mobile");
|
|
}
|
|
|
|
//
|
|
// Mixins
|
|
//
|
|
@mixin is-dark() {
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin is-light() {
|
|
@media screen and (prefers-color-scheme: light) {
|
|
@content;
|
|
}
|
|
}
|