Sass updates - fixed deprecated apis (#28)

tgstation · Nov 10, 2024 · 0453b1c · 0453b1c
1 parent b147479
commit 0453b1c
Show file tree

Hide file tree

Showing 51 changed files with 924 additions and 536 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,5 +2,8 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
+  "[yaml][markdown][html][scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}
diff --git a/eslint.config.js b/eslint.config.js
@@ -12,7 +12,7 @@ export default tseslint.config(
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
   {
-    ignores: ['dist/**', 'node_modules/**', 'pnpm-lock.yaml'],
+    ignores: ['dist/**', 'node_modules/**', 'pnpm-lock.yaml', 'lib/styles/**/*.d.ts'],
     plugins: {
       'simple-import-sort': simpleImportSort,
       'unused-imports': unusedImports,

diff --git a/lib/styles/atomic/color.scss b/lib/styles/atomic/color.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use '../colors.scss';
+@use '../colors';
 
 $fg-map: colors.$fg-map !default;
 $bg-map: colors.$bg-map !default;

diff --git a/lib/styles/atomic/links.scss b/lib/styles/atomic/links.scss
@@ -1,4 +1,4 @@
-@use '../colors.scss';
+@use '../colors';
 
 a {
   &:link,

diff --git a/lib/styles/atomic/outline.scss b/lib/styles/atomic/outline.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use '../colors.scss';
+@use '../colors';
 
 .outline-dotted {
   outline-style: dotted !important;

diff --git a/lib/styles/colors.scss b/lib/styles/colors.scss
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use "sass:color";
-@use "sass:map";
-@use "sass:meta";
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
 
 // Base colors
 $black: #000000 !default;
@@ -45,25 +45,25 @@ $fg-lightness: 10% !default;
 // Mappings of color names
 
 $_gen_map: (
-  "black": $black,
-  "white": $white,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "olive": $olive,
-  "green": $green,
-  "teal": $teal,
-  "blue": $blue,
-  "violet": $violet,
-  "purple": $purple,
-  "pink": $pink,
-  "brown": $brown,
-  "grey": $grey,
-  "light-grey": $light-grey,
-  "good": $good,
-  "average": $average,
-  "bad": $bad,
-  "label": $label,
+  'black': $black,
+  'white': $white,
+  'red': $red,
+  'orange': $orange,
+  'yellow': $yellow,
+  'olive': $olive,
+  'green': $green,
+  'teal': $teal,
+  'blue': $blue,
+  'violet': $violet,
+  'purple': $purple,
+  'pink': $pink,
+  'brown': $brown,
+  'grey': $grey,
+  'light-grey': $light-grey,
+  'good': $good,
+  'average': $average,
+  'bad': $bad,
+  'label': $label,
 );
 
 // Foreground color names for which to generate a color map
@@ -72,8 +72,9 @@ $fg-map-keys: map.keys($_gen_map) !default;
 $bg-map-keys: map.keys($_gen_map) !default;
 
 $fg-map: ();
+
 @each $color-name in $fg-map-keys {
-  $fg-map: map-merge(
+  $fg-map: map.merge(
     $fg-map,
     (
       $color-name: fg(map.get($_gen_map, $color-name)),
@@ -82,8 +83,9 @@ $fg-map: ();
 }
 
 $bg-map: ();
+
 @each $color-name in $bg-map-keys {
-  $bg-map: map-merge(
+  $bg-map: map.merge(
     $bg-map,
     (
       $color-name: bg(map.get($_gen_map, $color-name)),

diff --git a/lib/styles/components/BlockQuote.module.scss b/lib/styles/components/BlockQuote.module.scss
@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use '../base.scss';
-@use '../colors.scss';
+@use '../base';
+@use '../colors';
 
 $color-default: colors.fg(colors.$label) !default;
 

diff --git a/lib/styles/components/Button.module.scss b/lib/styles/components/Button.module.scss
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
+@use '../base';
+@use '../colors';
+@use '../functions' as *;
 
 $color-default: colors.bg(colors.$primary) !default;
 $color-disabled: #999999 !default;

diff --git a/lib/styles/components/Button.module.scss.d.ts b/lib/styles/components/Button.module.scss.d.ts
@@ -1,46 +1,44 @@
 declare const classNames: {
   readonly button: "button";
+  readonly fa: "fa";
+  readonly fas: "fas";
+  readonly far: "far";
+  readonly dropdown: "dropdown";
+  readonly ellipsis: "ellipsis";
+  readonly fluid: "fluid";
   readonly circular: "circular";
-  readonly color__average: "color__average";
-  readonly color__bad: "color__bad";
+  readonly compact: "compact";
   readonly color__black: "color__black";
+  readonly color__white: "color__white";
+  readonly color__red: "color__red";
+  readonly color__orange: "color__orange";
+  readonly color__yellow: "color__yellow";
+  readonly color__olive: "color__olive";
+  readonly color__green: "color__green";
+  readonly color__teal: "color__teal";
   readonly color__blue: "color__blue";
+  readonly color__violet: "color__violet";
+  readonly color__purple: "color__purple";
+  readonly color__pink: "color__pink";
   readonly color__brown: "color__brown";
-  readonly color__caution: "color__caution";
-  readonly color__danger: "color__danger";
-  readonly color__default: "color__default";
-  readonly color__good: "color__good";
-  readonly color__green: "color__green";
   readonly color__grey: "color__grey";
-  readonly color__label: "color__label";
   readonly "color__light-grey": "color__light-grey";
-  readonly color__olive: "color__olive";
-  readonly color__orange: "color__orange";
-  readonly color__pink: "color__pink";
-  readonly color__purple: "color__purple";
-  readonly color__red: "color__red";
-  readonly color__teal: "color__teal";
+  readonly color__good: "color__good";
+  readonly color__average: "color__average";
+  readonly color__bad: "color__bad";
+  readonly color__label: "color__label";
+  readonly color__default: "color__default";
+  readonly color__caution: "color__caution";
+  readonly color__danger: "color__danger";
   readonly color__transparent: "color__transparent";
-  readonly color__violet: "color__violet";
-  readonly color__white: "color__white";
-  readonly color__yellow: "color__yellow";
-  readonly compact: "compact";
-  readonly content: "content";
   readonly disabled: "disabled";
-  readonly dropdown: "dropdown";
-  readonly ellipsis: "ellipsis";
-  readonly fa: "fa";
-  readonly far: "far";
-  readonly fas: "fas";
+  readonly selected: "selected";
   readonly flex: "flex";
   readonly flex__fluid: "flex__fluid";
-  readonly fluid: "fluid";
-  readonly hasContent: "hasContent";
-  readonly iconPosition__right: "iconPosition__right";
-  readonly selected: "selected";
-  readonly textMargin: "textMargin";
-  readonly verticalAlignContent__bottom: "verticalAlignContent__bottom";
-  readonly verticalAlignContent__middle: "verticalAlignContent__middle";
   readonly verticalAlignContent__top: "verticalAlignContent__top";
+  readonly verticalAlignContent__middle: "verticalAlignContent__middle";
+  readonly verticalAlignContent__bottom: "verticalAlignContent__bottom";
+  readonly content: "content";
+  readonly textMargin: "textMargin";
 };
 export = classNames;
diff --git a/lib/styles/components/Divider.module.scss b/lib/styles/components/Divider.module.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use '../base.scss';
+@use '../base';
 
 $color: rgba(255, 255, 255, 0.1) !default;
 $thickness: base.em(2px) !default;

diff --git a/lib/styles/components/Divider.module.scss.d.ts b/lib/styles/components/Divider.module.scss.d.ts
@@ -1,6 +1,6 @@
 declare const classNames: {
-  readonly hidden: "hidden";
   readonly horizontal: "horizontal";
+  readonly hidden: "hidden";
   readonly vertical: "vertical";
 };
 export = classNames;
diff --git a/lib/styles/components/Dropdown.scss b/lib/styles/components/Dropdown.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-@use '../base.scss';
+@use '../base';
 
 .Dropdown {
   display: flex;

diff --git a/lib/styles/components/Icon.module.scss.d.ts b/lib/styles/components/Icon.module.scss.d.ts
@@ -1,5 +1,5 @@
 declare const classNames: {
-  readonly icon: 'icon';
-  readonly iconStack: 'iconStack';
+  readonly iconStack: "iconStack";
+  readonly icon: "icon";
 };
 export = classNames;
diff --git a/lib/styles/components/ImageButton.module.scss b/lib/styles/components/ImageButton.module.scss
@@ -4,9 +4,9 @@
  * @license MIT
  */
 
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
+@use '../base';
+@use '../colors';
+@use '../functions' as *;
 
 $color-default: colors.bg(base.$color-bg-section) !default;
 $color-disabled: #631d1d !default;
@@ -47,7 +47,12 @@ $bg-map: colors.$bg-map !default;
   }
 
   .contentColor__#{$color-name} {
-    @include button-style($color-value, $border-color: lighten($color-value, 25%), $opacity: 1, $hoverable: false);
+    @include button-style(
+      $color-value,
+      $border-color: lighten($color-value, 25%),
+      $opacity: 1,
+      $hoverable: false
+    );
   }
 
   .buttonsContainerColor__#{$color-name} {
@@ -71,7 +76,11 @@ $bg-map: colors.$bg-map !default;
 }
 
 .selected {
-  @include button-style($color-selected, $border-color: rgba($color-selected, 0.25), $border-width: 1px);
+  @include button-style(
+    $color-selected,
+    $border-color: rgba($color-selected, 0.25),
+    $border-width: 1px
+  );
 }
 
 .contentColor__default {
@@ -89,7 +98,12 @@ $bg-map: colors.$bg-map !default;
 }
 
 .contentSelected {
-  @include button-style($color-selected, $border-color: lighten($color-selected, 25%), $opacity: 1, $hoverable: false);
+  @include button-style(
+    $color-selected,
+    $border-color: lighten($color-selected, 25%),
+    $opacity: 1,
+    $hoverable: false
+  );
 }
 
 .buttonsContainerColor__default {