revert sass update and just backport the new scss

Monkestation · Dec 26, 2024 · 5ff5317 · 5ff5317
1 parent b41ea8e
commit 5ff5317
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 287 deletions.
diff --git a/tgui/package.json b/tgui/package.json
@@ -52,8 +52,8 @@
     "jsdom": "^16.7.0",
     "mini-css-extract-plugin": "^1.6.2",
     "prettier": "^3.1.0",
-    "sass": "^1.80.6",
-    "sass-loader": "^16.0.3",
+    "sass": "^1.37.5",
+    "sass-loader": "^11.1.1",
     "style-loader": "^2.0.0",
     "typescript": "^4.9.4",
     "url-loader": "^4.1.1",

diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-dark.scss
@@ -990,8 +990,8 @@ em {
 
 .boxed_message {
   background: hsl(220, 10%, 10%);
-  border: 1em * calc(1px / 12px) solid;
-  border-left: 1em * calc(4px / 12px) solid;
+  border: calc(1em * (1 / 12)) solid;
+  border-left: calc(1em * (4 / 12)) solid;
   border-color: hsla(220, 40%, 75%, 0.25);
   margin: 0.5em 0;
   padding: 0.5em 0.75em;
@@ -1218,19 +1218,11 @@ $border-width-px: $border-width * 1px;
   }
 
   .chat_alert_#{$color-name} .minor_announcement_text {
-    background-color: color.adjust(
-      map.get($alert-stripe-colors, $color-name),
-      $lightness: -5%,
-      $space: hsl
-    );
+    background-color: darken(map.get($alert-stripe-colors, $color-name), 5%);
   }
 
   .chat_alert_#{$color-name} .major_announcement_text {
-    background-color: color.adjust(
-      map.get($alert-stripe-colors, $color-name),
-      $lightness: -5%,
-      $space: hsl
-    );
+    background-color: darken(map.get($alert-stripe-colors, $color-name), 5%);
   }
 }
 

diff --git a/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss b/tgui/packages/tgui-panel/styles/tgchat/chat-light.scss
@@ -1204,18 +1204,16 @@ $border-width-px: $border-width * 1px;
   }
 
   .chat_alert_#{$color-name} .minor_announcement_text {
-    background-color: color.adjust(
+    background-color: lighten(
       map.get($alert-stripe-alternate-colors, $color-name),
-      $lightness: 5%,
-      $space: hsl
+      5%
     );
   }
 
   .chat_alert_#{$color-name} .major_announcement_text {
-    background-color: color.adjust(
+    background-color: lighten(
       map.get($alert-stripe-alternate-colors, $color-name),
-      $lightness: 5%,
-      $space: hsl
+      5%
     );
   }
 }

diff --git a/tgui/packages/tgui-say/styles/button.scss b/tgui/packages/tgui-say/styles/button.scss
@@ -15,11 +15,7 @@
   padding: 0;
   width: 2.6rem;
   &:hover {
-    background-color: color.adjust(
-      colors.$button,
-      $lightness: 10%,
-      $space: hsl
-    );
+    background-color: lighten(colors.$button, 10%);
   }
 }
 

diff --git a/tgui/packages/tgui-say/styles/colors.scss b/tgui/packages/tgui-say/styles/colors.scss
@@ -36,7 +36,7 @@ $channel_keys: map.keys($_channel_map) !default;
 $channel-map: ();
 
 @each $channel in $channel_keys {
-  $channel-map: map.merge(
+  $channel-map: map-merge(
     $channel-map,
     (
       $channel: map.get($_channel_map, $channel),

diff --git a/tgui/packages/tgui-say/styles/main.scss b/tgui/packages/tgui-say/styles/main.scss
@@ -26,14 +26,14 @@
 }
 
 @each $channel, $color in colors.$channel-map {
-  $darkened: color.adjust($color, $lightness: -20%, $space: hsl);
+  $darkened: darken($color, 20%);
 
   .button-#{$channel} {
-    border-color: color.adjust($color, $lightness: -10%, $space: hsl);
+    border-color: darken($color, 10%);
     color: $color;
     &:hover {
-      border-color: color.adjust($color, $lightness: 10%, $space: hsl);
-      color: color.adjust($color, $lightness: 5%, $space: hsl);
+      border-color: lighten($color, 10%);
+      color: lighten($color, 5%);
     }
   }
 
@@ -50,11 +50,11 @@
       animation: gradient 10s linear infinite;
       background: linear-gradient(
         to right,
-        color.adjust($color, $lightness: -35%, $space: hsl),
+        darken($color, 35%),
         $color,
-        color.adjust($color, $lightness: 10%, $space: hsl),
+        lighten($color, 10%),
         $color,
-        color.adjust($color, $lightness: -35%, $space: hsl)
+        darken($color, 35%)
       );
       background-position: 0% 0%;
       background-size: 500% auto;