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

59
elements/_interactive.scss
View file

@ -1,5 +1,8 @@
@use "sass:color";
@use "../global/config";
@use "../global/typography";
// Forms
// -----------------------------------------------------------------------------
// form
@ -34,12 +37,12 @@ label {
label,
p {
input, button, textarea, select {
margin: 0 $space_basic;
margin: 0 config.$space_basic;
}
}
input + label {
margin-left: $space_basic;
margin-left: config.$space_basic;
}
// Input
@ -48,11 +51,11 @@ input {
}
label + input {
margin-left: $space_basic;
margin-left: config.$space_basic;
}
input, button, textarea, select {
margin: $margin_inline;
margin: config.$margin_inline;
&[disabled="disabled"],
&[disabled] {
@ -67,7 +70,7 @@ td > textarea {
margin: 0;
}
@each $input in $io_input_list, textarea, select {
@each $input in config.$io_input_list, textarea, select {
#{$input} {
@extend %basic_mono;
line-height: 1;
@ -76,50 +79,50 @@ td > textarea {
// TODO: Move to io_module
.input_io, .button_io, .io_textarea, .io_select {
margin: $margin_io;
margin: config.$margin_io;
}
.input_io, .io_textarea, .io_select {
padding: $space_half;
color: $color_text_io;
background-color: $color_back_io;
padding: config.$space_half;
color: config.$color_text_io;
background-color: config.$color_back_io;
&:hover {
background-color: $color_highlight_basic;
background-color: config.$color_highlight_basic;
}
&[readonly="readonly"],
&[readonly] {
background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
background-color: color.scale(config.$color_back_io, $lightness: -(config.$color_diff_double));
}
&[disabled="disabled"],
&[disabled] {
&:hover {
background-color: $color_back_io;
background-color: config.$color_back_io;
}
}
}
@each $input in $io_date_list {
@each $input in config.$io_date_list {
#{$input} {
padding-top: 0;
padding-bottom: 0;
}
}
@each $input in $io_input_list, textarea {
@each $input in config.$io_input_list, textarea {
#{$input} {
// border: $border_io;
}
}
.input_io, .io_textarea {
border: $border_io;
border: config.$border_io;
&[readonly="readonly"],
&[readonly] {
border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
border-color: color.scale(config.$color_border_io, $lightness: -(config.$color_diff_double));
}
&[disabled="disabled"],
@ -131,16 +134,16 @@ td > textarea {
// Fieldset
// -----------------------------------------------------------------------------
fieldset {
margin: $margin_double;
padding: $space_basic;
border: $border_basic;
margin: config.$margin_double;
padding: config.$space_basic;
border: config.$border_basic;
}
// Legend
// -----------------------------------------------------------------------------
legend {
@extend %basic;
padding: 0 $space_half;
padding: 0 config.$space_half;
}
// Button
@ -151,26 +154,26 @@ button {
.button_io {
@extend %basic;
border: $width_border_io solid $color_border_button;
padding: $padding_basic;
color: $color_text_button;
background-color: $color_back_button;
border: config.$width_border_io solid config.$color_border_button;
padding: config.$padding_basic;
color: config.$color_text_button;
background-color: config.$color_back_button;
user-select: none;
&:hover {
// border-color: #0059F6;
border-color: transparent;
color: white;
background-color: $color_action_basic;
background-color: config.$color_action_basic;
}
&[disabled="disabled"],
&[disabled] {
border-color: transparent;
color: color.scale($color_text_button, $lightness: $color_diff_double);
color: color.scale(config.$color_text_button, $lightness: config.$color_diff_double);
&:hover {
background-color: $color_back_button;
background-color: config.$color_back_button;
}
}
}
@ -187,7 +190,7 @@ button {
}
&:hover {
background-color: $color_action_basic;
background-color: config.$color_action_basic;
}
}