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

73
global/_common.scss
View file

@ -1,8 +1,13 @@
// Common styles for global usage
// -----------------------------------------------------------------------------
@use "sass:math";
@use "sass:color";
@use "config";
@use "../functions/color" as *;
@use "../mixins/media_query" as *;
@use "../mixins/user_agent" as *;
// Common styles for global usage
// -----------------------------------------------------------------------------
// General classes
// -----------------------------------------------------------------------------
@ -16,13 +21,13 @@
*,
::before,
::after {
box-sizing: $box_sizing;
box-sizing: config.$box_sizing;
}
}
%size_io_button {
border: $width_border_io solid transparent;
padding: $padding_basic;
border: config.$width_border_io solid transparent;
padding: config.$padding_basic;
}
.di_none {
@ -52,10 +57,10 @@
margin-left: 37.5%;
}
@each $size, $variable in (basic, #{$space_basic}),
(small, #{$space_small}),
(medium, #{$space_medium}),
(large, #{$space_large}) {
@each $size, $variable in (basic, #{config.$space_basic}),
(small, #{config.$space_small}),
(medium, #{config.$space_medium}),
(large, #{config.$space_large}) {
.space_top_#{$size} {
margin-top: $variable;
}
@ -109,22 +114,22 @@
.wrap_center {
& > * {
margin-right: math.div((100% - $width_basic), 2);
margin-left: math.div((100% - $width_basic), 2);
margin-right: math.div((100% - config.$width_basic), 2);
margin-left: math.div((100% - config.$width_basic), 2);
@include forTabletPortraitUp {
margin-right: math.div((100% - $width_small), 2);
margin-left: math.div((100% - $width_small), 2);
margin-right: math.div((100% - config.$width_small), 2);
margin-left: math.div((100% - config.$width_small), 2);
}
@include forTabletLandscapeUp {
margin-right: math.div((100% - $width_medium), 2);
margin-left: math.div((100% - $width_medium), 2);
margin-right: math.div((100% - config.$width_medium), 2);
margin-left: math.div((100% - config.$width_medium), 2);
}
@include forBigDesktopUp {
margin-right: math.div((100% - $width_large), 2);
margin-left: math.div((100% - $width_large), 2);
margin-right: math.div((100% - config.$width_large), 2);
margin-left: math.div((100% - config.$width_large), 2);
}
}
}
@ -155,7 +160,7 @@
.float_space_left {
float: left;
margin-right: $space_small;
margin-right: config.$space_small;
}
.float_half_size {
@ -183,14 +188,14 @@
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
gap: $space_half $space_basic;
gap: config.$space_half config.$space_basic;
}
%flex-column,
%flex-row {
display: flex;
flex-wrap: nowrap;
gap: $space_basic;
gap: config.$space_basic;
}
%flex-column {
@ -252,31 +257,31 @@
.pos_full_view {
@extend %viewport_fixed;
background-color: rgba($alpha_color, 0.5);
background-color: rgba(basic_color(alpha), 0.5);
}
.pos_full_page {
@extend %full_parent;
background-color: rgba($charlie_color, 0.25);
background-color: rgba(basic_color(charlie), 0.25);
}
.hover_back_change {
background-color: $color_darker;
background-color: config.$color_darker;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: $color_back_basic;
background-color: config.$color_back_basic;
}
}
#mouse-overlay {
@extend %viewport_fixed;
z-index: $z_heaven;
transition: background-color $duration_long $timing_basic $duration_long;
z-index: config.$z_heaven;
transition: background-color config.$duration_long config.$timing_basic config.$duration_long;
pointer-events: none;
&.active {
background-color: color.adjust($color_darkest, $alpha: -0.5);
background-color: color.adjust(config.$color_darkest, $alpha: -0.5);
}
}
@ -284,11 +289,11 @@
// Colors
// -----------------------------------------------------------------------------
.txt_color_light {
color: $color_brighter;
color: config.$color_brighter;
}
.txt_color_dark {
color: $color_darker;
color: config.$color_darker;
}
@ -311,7 +316,7 @@
}
.txt_hero {
font-size: $size_hero;
font-size: config.$size_hero;
}
.txt_center {
@ -343,8 +348,12 @@
}
.txt_gradient {
background: linear-gradient(165deg, $alpha_color 30%, $bravo_color 45%, $charlie_color 50%, $delta_color, $echo_color 80%, $foxtrot_color);
background: linear-gradient(165deg, basic_color(alpha) 30%, basic_color(bravo) 45%, basic_color(charlie) 50%, basic_color(delta), basic_color(echo) 80%, basic_color(foxtrot));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
// Focus
// -----------------------------------------------------------------------------
@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);