feat: Replace deprecated sass things

- Global built-in functions - Color functions
feat: Update to .io styles
2025-10-25 08:59:09 +02:00 · 2025-10-20 21:08:42 +02:00 · 2025-10-20 20:10:56 +02:00 · 2025-10-20 20:05:24 +02:00 · 2025-10-20 19:26:01 +02:00 · 2025-10-20 18:55:07 +02:00
14 changed files with 118 additions and 104 deletions
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Grouping content
 // -----------------------------------------------------------------------------
 // p
@ -71,7 +73,6 @@ hr {

 	&.vertical {
 		display: inline;
-		height: $space_tiny;
 		margin: 0 $space_double;
 		border-width: 0 $width_border_basic 0 0;
 	}
@ -102,12 +103,12 @@ pre {

 .pre_code {
 	overflow-x: auto;
-	border-color: darken($color_back_basic, $color_diff_tiny);
+	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
 	border-style: dotted;
 	border-width: 0 0 0 $width_border_4;
 	border-radius: $radius_basic;
 	padding: $space_basic;
-	background-color: lighten($color_back_basic, $color_diff_tiny);
+	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);

 	code {
 		background-color: transparent;
@ -275,20 +276,20 @@ div {}
 .box_placeholder {
 	width: 100%;
 	height: $space_medium;
-	border: $width_border_4 solid transparentize($alpha_color, 0.1);
+	border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
 	border-radius: $radius_basic;
-	background-color: transparentize($alpha_color, 0.2);
+	background-color: color.adjust($alpha_color, $alpha: -0.2);
 }

 .box_placeholder_bkg {
 	width: 100%;
 	height: $space_medium * 2;
-	border: $width_border_4 solid transparentize($color_front_basic, 0.1);
+	border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
 	border-radius: $radius_basic;
 	padding: $space_basic;
 	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
 	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
-	background-color: transparentize($color_front_basic, 0.1);
+	background-color: color.adjust($color_front_basic, $alpha: -0.1);
 }

 .box_file_tile {
--- a/elements/_interactive.scss
+++ b/elements/_interactive.scss
@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Forms
 // -----------------------------------------------------------------------------
 // form
@ -27,9 +29,12 @@ form {
 // -----------------------------------------------------------------------------
 label {
 	@extend %basic;
+}

+label,
+p {
 	input, button, textarea, select {
-		margin-left: $space_basic;
+		margin: 0 $space_basic;
 	}
 }

@ -37,16 +42,6 @@ input + label {
 	margin-left: $space_basic;
 }

-.label {
-	line-height: 2.5;
-}
-
-.label > input,
-.label > textarea,
-.label > select {
-	margin: 0 $space_basic;
-}
-
 // Input
 // -----------------------------------------------------------------------------
 input {
@ -79,6 +74,7 @@ td > textarea {
 	}
 }

+// TODO: Move to io_module
 .input_io, .button_io, .io_textarea, .io_select {
 	margin: $margin_io;
 }
@ -94,7 +90,7 @@ td > textarea {

 	&[readonly="readonly"],
 	&[readonly] {
-		background-color: darken($color_back_io, $color_diff_double);
+		background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
 	}

 	&[disabled="disabled"],
@ -123,7 +119,7 @@ td > textarea {

 	&[readonly="readonly"],
 	&[readonly] {
-		border-color: darken($color_border_io, $color_diff_double);
+		border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
 	}

 	&[disabled="disabled"],
@ -171,7 +167,7 @@ button {
 	&[disabled="disabled"],
 	&[disabled] {
 		border-color: transparent;
-		color: lighten($color_text_button, $color_diff_double);
+		color: color.scale($color_text_button, $lightness: $color_diff_double);

 		&:hover {
 			background-color: $color_back_button;
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Tabular data
 // -----------------------------------------------------------------------------
 // table
@ -40,7 +42,7 @@ table {
 	}

 	tr:nth-child(even) td {
-		background-color: lighten($color_back_basic, $color_diff_tiny);
+		background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
 	}
 }

@ -125,6 +127,6 @@ td:last-child {

 .cell_pre {
 	// border-right-width: $width_border_4;
-	// border-right-color: lighten($color_back_basic, $color_diff_basic);
-	background-color: lighten($color_back_basic, $color_diff_tiny);
+	// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
+	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
 }
--- a/elements/_textlevel.scss
+++ b/elements/_textlevel.scss
@ -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;
 }

--- a/functions/_color.scss
+++ b/functions/_color.scss
@ -1,13 +1,16 @@
+@use "sass:map";
+@use "sass:color";
+
@function createColorMap($color, $percentage, $opacity) {
  $map: (
    base: $color,
-    light: lighten($color, $percentage),
-    dark: darken($color, $percentage),
-    trans: transparentize($color, $opacity)
+    light: color.scale($color, $lightness: $percentage),
+    dark: color.scale($color, $lightness: -$percentage),
+    trans: color.adjust($color, $alpha: -$opacity)
  );
  @return $map;
 }

@function basic_color($key: 'alpha') {
-  @return map-get($color_palette, $key);
+  @return map.get($color_palette, $key);
 }
--- a/functions/_shade.scss
+++ b/functions/_shade.scss
@ -1,4 +1,4 @@
-@charset "UTF-8";
+@use "sass:color";

 // Mixes a color with black.
 //
@ -20,5 +20,5 @@
 // @return {Color}

@function shade($color, $percent) {
-  @return mix(#000, $color, $percent);
+  @return color.mix(#000, $color, $percent);
 }
--- a/functions/_tint.scss
+++ b/functions/_tint.scss
@ -1,4 +1,4 @@
-@charset "UTF-8";
+@use "sass:color";

 // Mixes a color with white.
 //
@ -20,5 +20,5 @@
 // @return {Color}

@function tint($color, $percent) {
-  @return mix(#fff, $color, $percent);
+  @return color.mix(#fff, $color, $percent);
 }
--- a/global/_common.scss
+++ b/global/_common.scss
@ -1,7 +1,7 @@
 // Common styles for global usage
 // -----------------------------------------------------------------------------
@use "sass:math";
-
+@use "sass:color";


 // General classes
@ -53,9 +53,9 @@
 }

@each $size, $variable in (basic, #{$space_basic}),
-(small, #{$space_small}),
-(medium, #{$space_medium}),
-(large, #{$space_large}) {
+	(small, #{$space_small}),
+	(medium, #{$space_medium}),
+	(large, #{$space_large}) {
 	.space_top_#{$size} {
 		margin-top: $variable;
 	}
@ -108,7 +108,7 @@
 }

 .wrap_center {
-	&>* {
+	& > * {
 		margin-right: math.div((100% - $width_basic), 2);
 		margin-left: math.div((100% - $width_basic), 2);

@ -130,7 +130,6 @@
 }


-
 // Clearing and floating
 // -----------------------------------------------------------------------------
 .clear {
@ -169,7 +168,6 @@
 }


-
 // Inlining
 // -----------------------------------------------------------------------------
 .inline {
@ -177,7 +175,6 @@
 }


-
 // Flex & grid
 // -----------------------------------------------------------------------------
 %flex-inline {
@ -205,7 +202,6 @@
 }


-
 // Positioned elements
 // -----------------------------------------------------------------------------
 %viewport_fixed {
@ -276,11 +272,13 @@
 .mouse_over {
 	@extend %viewport_fixed;
 	z-index: $z_heaven;
-	background-color: transparentize($color_darkest, 0.5);
 	transition: background-color $duration_long $timing_basic $duration_long;
 	pointer-events: none;
-}

+	&.active {
+		background-color: color.adjust($color_darkest, $alpha: -0.5);
+	}
+}


 // Colors
@ -294,7 +292,6 @@
 }


-
 // Text
 // -----------------------------------------------------------------------------
 .txt_tiny {
--- a/global/_config.scss
+++ b/global/_config.scss
@ -1,6 +1,9 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+
 // Default configuration
 // ------------------------------------------------------------------------------
-@use "sass:math";



@ -86,15 +89,14 @@ $color_brightest: white !default;

 $color_text_basic: black !default;
 $color_back_basic: #808080 !default;
-$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
+$color_border_basic: color.scale($color_text_basic, $lightness: 12%) !default;
 $color_front_basic: white !default;

-$color_medium: lighten($color_darkest, 50%
-);
-$color_dark: lighten($color_darkest, $color_diff_double);
-$color_darker: darken($color_back_basic, $color_diff_basic);
-$color_brighter: lighten($color_back_basic, $color_diff_basic);
-$color_bright: darken($color_brightest, $color_diff_double);
+$color_medium: color.scale($color_darkest, $lightness: 50%);
+$color_dark: color.scale($color_darkest, $lightness: $color_diff_double);
+$color_darker: color.scale($color_back_basic, $lightness: -$color_diff_basic);
+$color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic);
+$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double);

 $color_head_basic: $color_text_basic !default;
 $color_link_basic: $delta_color !default;
@ -111,8 +113,8 @@ $color_list: (
@each $key, $value in $color_palette {
 	$map: (
 	);
-$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
-$color_list: map-merge($color_list, $map);
+$map: map.merge($map, ($key: createColorMap($value, 15%, 0.5)));
+$color_list: map.merge($color_list, $map);
 }


@ -212,9 +214,9 @@ $io_focus_list: 'a[href]',
 	'textarea:not([disabled])',
 	'*[tabindex]';

-$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
+$color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default;
 $color_text_button: $color_text_basic !default;
-$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
+$color_back_io: color.scale($color_front_basic, $lightness: -$color_diff_basic) !default;
 $color_back_button: $color_darker !default;
 $color_border_io: $color_front_basic !default;
 $color_border_button: $color_dark !default;
@ -224,7 +226,7 @@ $border_io: $width_border_io solid $color_border_io;
 $border_io_dotted: $width_border_io dotted $color_border_io;

 $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
-$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
+$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);



--- a/mixins/_color.scss
+++ b/mixins/_color.scss
@ -1,20 +1,22 @@
+@use "sass:map";
+
@mixin addDefaultColors() {
-  @if map-has-key($color_palette, alpha) {
-    $alpha_color: map-get($color_palette, alpha) !global;
+  @if map.has-key($color_palette, alpha) {
+    $alpha_color: map.get($color_palette, alpha) !global;
  }
-  @if map-has-key($color_palette, bravo) {
-    $bravo_color: map-get($color_palette, bravo) !global;
+  @if map.has-key($color_palette, bravo) {
+    $bravo_color: map.get($color_palette, bravo) !global;
  }
-  @if map-has-key($color_palette, charlie) {
-    $charlie_color: map-get($color_palette, charlie) !global;
+  @if map.has-key($color_palette, charlie) {
+    $charlie_color: map.get($color_palette, charlie) !global;
  }
-  @if map-has-key($color_palette, delta) {
-    $delta_color: map-get($color_palette, delta) !global;
+  @if map.has-key($color_palette, delta) {
+    $delta_color: map.get($color_palette, delta) !global;
  }
-  @if map-has-key($color_palette, echo) {
-    $echo_color: map-get($color_palette, echo) !global;
+  @if map.has-key($color_palette, echo) {
+    $echo_color: map.get($color_palette, echo) !global;
  }
-  @if map-has-key($color_palette, foxtrot) {
-    $foxtrot_color: map-get($color_palette, foxtrot) !global;
+  @if map.has-key($color_palette, foxtrot) {
+    $foxtrot_color: map.get($color_palette, foxtrot) !global;
  }
 }
--- a/mixins/_sprite.scss
+++ b/mixins/_sprite.scss
@ -1,3 +1,5 @@
+@use "sass:list";
+
 // SCSS variables are information about icon's compiled state, stored under its original file name
 //
 // .icon-home {
@ -84,21 +86,21 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
 // // HTML
 // <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
-  width: nth($sprite, 5);
+  width: list.nth($sprite, 5);
 }

@mixin sprite-height($sprite) {
-  height: nth($sprite, 6);
+  height: list.nth($sprite, 6);
 }

@mixin sprite-position($sprite) {
-  $sprite-offset-x: nth($sprite, 3);
-  $sprite-offset-y: nth($sprite, 4);
+  $sprite-offset-x: list.nth($sprite, 3);
+  $sprite-offset-y: list.nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
 }

@mixin sprite-image($sprite) {
-  $sprite-image: nth($sprite, 9);
+  $sprite-image: list.nth($sprite, 9);
  background-image: url(#{$sprite-image});
 }

@ -115,7 +117,7 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
 // @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
-    $sprite-name: nth($sprite, 10);
+    $sprite-name: list.nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
--- a/modules/explanation/_explanation_module.scss
+++ b/modules/explanation/_explanation_module.scss
@ -1,3 +1,4 @@
+@use "sass:color";
@use "sass:math";

 %expose_after {
@ -36,7 +37,7 @@

 .exp_overlay {
 	@extend %full_parent;
-	background-color: transparentize($alpha_color, .6);
+	background-color: color.adjust($alpha_color, $alpha: -0.6);
 }

 .exp_pop {
--- a/modules/io/_io_module.scss
+++ b/modules/io/_io_module.scss
@ -1,13 +1,21 @@
+input[type="range"] {
+	accent-color: $color_text_io;
+}
+
 header,
 aside,
 footer {
 	&.io {
-		nav li {
+		nav {
+			li,
+			label,
+			input[type="range"] {
 				margin: 0;
 			}
+		}

-		nav>div:not(.spacer),
 		nav>span,
+		nav label,
 		.a_button {
 			@extend %basic;
 			@extend %size_io_button;
@ -17,7 +25,12 @@ footer {
 			@extend .button_io;
 		}

-		input {
+		.group {
+			display: flex;
+			flex-flow: row nowrap;
+		}
+
+		input:not([type="range"]) {
 			@extend .input_io;
 		}

@ -40,13 +53,6 @@ aside {
 	&.io {
 		padding: $space_basic;

-		input,
-		button,
-		textarea,
-		select {
-			margin-inline: $space_half;
-		}
-
 		textarea {
 			@extend .io_textarea;
 		}
--- a/modules/print/_print_module.scss
+++ b/modules/print/_print_module.scss
@ -1,5 +1,5 @@
-// Custom extends and mixins
-// ------------------------------------------------------------------------------
+@use "sass:list";
+
@import "mixins";
@import "extends";

@ -31,18 +31,18 @@ $din: $a4, $a5, $a6;
 	}

 	@each $space in $din {
-		#{nth($space, 1)} {
-			padding-top: nth($space, 2) nth($space, 3) nth($space, 4) nth($space, 5);
+		#{list.nth($space, 1)} {
+			padding-top: list.nth($space, 2) list.nth($space, 3) list.nth($space, 4) list.nth($space, 5);

 			.page_head, .page_foot {
-				right: nth($space, 3);
-				left: nth($space, 5);
+				right: list.nth($space, 3);
+				left: list.nth($space, 5);
 			}
 			.page_head {
-				top: nth($space, 2);
+				top: list.nth($space, 2);
 			}
 			.page_foot {
-				bottom: nth($space, 4);
+				bottom: list.nth($space, 4);
 			}
 		}
 	}
Author	SHA1	Message	Date
sthag	b739ddefda	feat: Replace deprecated sass things - Global built-in functions - Color functions	2025-10-25 08:59:09 +02:00
sthag	225c1dd55c	feat: Update to .io styles - Combine element definitions for margin - Add label handling - Add .group for combinations with gap in between	2025-10-20 21:08:42 +02:00
sthag	9d4c65ad28	fix: Margin for io - Remove margin from interactive elements inside of .io class - Margin is back to the default $margin_io - Elements inside of .io > nav are spaced with flex gap	2025-10-20 20:10:56 +02:00
sthag	0a55d967e4	fix: Remove height from vertical hr	2025-10-20 20:05:24 +02:00
sthag	cf8fc6bd5d	feat: Change label styles and update layouts - Remove .label - Handle interactive elements inside p like inside label instead	2025-10-20 19:26:01 +02:00
sthag	2d582a5032	feat: New style for input range - Exclude input range from .input_io - Add TODO to replace .input_io and move to io_module - Set accent color for input range	2025-10-20 18:55:07 +02:00