interaktionsweise/hippie-style
1
1
Fork 0
Code Pull requests Releases Activity

feat: Resolve all deprecation warnings for sass

Browse source 
- Replace @import with @use and @forward
- Only color function is used in _basic.scss for now
- Change _all.scss to _index.scss
- Modules use direct dependencies
- Move @include from _config.scss to _common.scss, this was a long term mistake
- Remove $color_list
- Change basic_color()
This commit is contained in:
sthag 2025-10-26 11:33:54 +01:00
parent 867e96ea0a
commit 4e4f8814d3
26 changed files with 476 additions and 420 deletions
Download patch file Download diff file Expand all files Collapse all files

74
elements/_textlevel.scss
View file

@ -1,5 +1,9 @@
@use "sass:color";
@use "../global/config";
@use "../global/typography";
@use "../functions/color" as *;
// Text-Level semantics
// -----------------------------------------------------------------------------
// a
@ -39,69 +43,69 @@
// Links
// -----------------------------------------------------------------------------
a {
color: $color_link_basic;
color: config.$color_link_basic;
// color: color.scale($color_action_basic, $lightness: 20%);
text-decoration: none;
&:active,
&:focus,
&:hover {
color: $color_highlight_basic;
color: config.$color_highlight_basic;
}
}
.a_internal {
color: $charlie_color;
color: basic_color(charlie);
}
.a_external {
color: $delta_color;
color: basic_color(delta);
}
.a_discreet {
color: $color_text_basic;
color: config.$color_text_basic;
}
.a_line {
border-bottom-width: $space_tiny;
border-bottom-width: config.$space_tiny;
border-bottom-style: dotted;
border-color: $color_border_basic;
color: $color_text_basic;
border-color: config.$color_border_basic;
color: config.$color_text_basic;
background-color: transparent;
transition: color $duration_basic $timing_basic;
transition: color config.$duration_basic config.$timing_basic;
&:active,
&:focus,
&:hover {
color: $color_highlight_basic;
background-color: $color_action_basic;
color: config.$color_highlight_basic;
background-color: config.$color_action_basic;
}
}
.a_button {
display: inline-block;
padding: $padding_basic;
border-radius: $radius_basic;
background-color: color.adjust($color_link_basic, $alpha: -0.8);
padding: config.$padding_basic;
border-radius: config.$radius_basic;
background-color: color.adjust(config.$color_link_basic, $alpha: -0.8);
&:active,
&:focus,
&:hover {
border-color: transparent;
background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
background-color: color.adjust(config.$color_highlight_basic, $alpha: -0.8);
}
}
.a_button_text {
@extend .a_button;
padding: $padding_link;
color: $color_text_basic;
padding: config.$padding_link;
color: config.$color_text_basic;
background-color: transparent;
}
.a_button_border {
@extend .a_button_text;
border: $border_basic;
border: config.$border_basic;
}
@ -112,7 +116,7 @@ i, em {
}
.i_bright {
color: $color_highlight_basic;
color: config.$color_highlight_basic;
font-style: normal;
}
@ -196,14 +200,14 @@ time {
// -----------------------------------------------------------------------------
code {
@extend %basic_mono;
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic);
background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
}
.code_solo {
@extend %basic_mono;
padding: $space_tiny $space_half;
color: $color_text_basic;
padding: config.$space_tiny config.$space_half;
color: config.$color_text_basic;
}
// Variable
@ -224,12 +228,12 @@ kbd {
@extend %basic_mono;
// font-size: .9em;
// font-weight: bold;
padding: 0 $space_half;
border-width: $width_border_basic;
padding: 0 config.$space_half;
border-width: config.$width_border_basic;
border-style: solid;
border-color: $color_darker;
border-radius: $radius_basic;
color: color.scale($color_text_basic, $lightness: $color_diff_basic);
border-color: config.$color_darker;
border-radius: config.$radius_basic;
color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic);
}
// Sub- and superscript
@ -247,22 +251,22 @@ u {
// Marks
// -----------------------------------------------------------------------------
mark {
background-color: $alpha_color;
background-color: basic_color(alpha);
}
.mark_cursor {
color: color.invert($color_text_basic);
background-color: $color_text_basic;
color: color.invert(config.$color_text_basic);
background-color: config.$color_text_basic;
}
::-moz-selection {
color: color.invert($color_text_basic);
background-color: $color_text_basic;
color: color.invert(config.$color_text_basic);
background-color: config.$color_text_basic;
}
::selection {
color: color.invert($color_text_basic);
background-color: $color_text_basic;
color: color.invert(config.$color_text_basic);
background-color: config.$color_text_basic;
}
// Text direction