feat: Replace deprecated sass things

- Global built-in functions
- Color functions
This commit is contained in:
sthag 2025-10-25 08:59:09 +02:00
parent 225c1dd55c
commit b739ddefda
13 changed files with 96 additions and 81 deletions

View file

@ -1,3 +1,5 @@
@use "sass:color";
// Text-Level semantics
// -----------------------------------------------------------------------------
// a
@ -38,7 +40,7 @@
// -----------------------------------------------------------------------------
a {
color: $color_link_basic;
// color: lighten($color_action_basic, 20%);
// color: color.scale($color_action_basic, $lightness: 20%);
text-decoration: none;
&:active,
@ -80,13 +82,13 @@ a {
display: inline-block;
padding: $padding_basic;
border-radius: $radius_basic;
background-color: transparentize($color_link_basic, 0.8);
background-color: color.adjust($color_link_basic, $alpha: -0.8);
&:active,
&:focus,
&:hover {
border-color: transparent;
background-color: transparentize($color_highlight_basic, 0.8);
background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
}
}
@ -194,8 +196,8 @@ time {
// -----------------------------------------------------------------------------
code {
@extend %basic_mono;
color: lighten($color_text_basic, $color_diff_basic);
background-color: lighten($color_back_basic, $color_diff_tiny);
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
}
.code_solo {
@ -227,7 +229,7 @@ kbd {
border-style: solid;
border-color: $color_darker;
border-radius: $radius_basic;
color: lighten($color_text_basic, $color_diff_basic);
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
}
// Sub- and superscript
@ -249,17 +251,17 @@ mark {
}
.mark_cursor {
color: invert($color_text_basic);
color: color.invert($color_text_basic);
background-color: $color_text_basic;
}
::-moz-selection {
color: invert($color_text_basic);
color: color.invert($color_text_basic);
background-color: $color_text_basic;
}
::selection {
color: invert($color_text_basic);
color: color.invert($color_text_basic);
background-color: $color_text_basic;
}