Adds Tgui styles library (#87964)

## About The Pull Request
Since tgui-core is stable (and headless) now, we can use its
accompanying [tgui-styles](https://github.com/tgstation/tgui-styles)
library to import our official component styles. This means we can
delete them here!
## Why It's Good For The Game
Less confusing for contributors trying to fix components. Fix them in
the official repo!
## Changelog
N/A
There should be NO visible difference

tgui/packages/tgui-panel/package.json

@@ -11,6 +11,7 @@
     "react-dom": "^18.3.1",
     "tgui": "workspace:*",
     "tgui-dev-server": "workspace:*",
-    "tgui-polyfill": "workspace:*"
+    "tgui-polyfill": "workspace:*",
+    "tgui-styles": "^0.0.10"
   }
 }

tgui/packages/tgui-panel/styles/main.scss

@@ -5,6 +5,8 @@
 
 @use 'sass:meta';
 @use 'sass:color';
+// Components
+@use 'pkg:tgui-styles';
 
 @use '~tgui/styles/colors.scss';
 @use '~tgui/styles/base.scss' with (
@@ -23,29 +25,6 @@
 @include meta.load-css('~tgui/styles/atomic/outline.scss');
 @include meta.load-css('~tgui/styles/atomic/text.scss');
 
-// Components
-@include meta.load-css('~tgui/styles/components/BlockQuote.scss');
-@include meta.load-css('~tgui/styles/components/Button.scss');
-@include meta.load-css('~tgui/styles/components/ColorBox.scss');
-@include meta.load-css('~tgui/styles/components/Dimmer.scss');
-@include meta.load-css('~tgui/styles/components/Divider.scss');
-@include meta.load-css('~tgui/styles/components/Dropdown.scss');
-@include meta.load-css('~tgui/styles/components/Flex.scss');
-@include meta.load-css('~tgui/styles/components/Input.scss');
-@include meta.load-css('~tgui/styles/components/Knob.scss');
-@include meta.load-css('~tgui/styles/components/LabeledList.scss');
-@include meta.load-css('~tgui/styles/components/Modal.scss');
-@include meta.load-css('~tgui/styles/components/NoticeBox.scss');
-@include meta.load-css('~tgui/styles/components/NumberInput.scss');
-@include meta.load-css('~tgui/styles/components/ProgressBar.scss');
-@include meta.load-css('~tgui/styles/components/Section.scss');
-@include meta.load-css('~tgui/styles/components/Slider.scss');
-@include meta.load-css('~tgui/styles/components/Stack.scss');
-@include meta.load-css('~tgui/styles/components/Table.scss');
-@include meta.load-css('~tgui/styles/components/Tabs.scss');
-@include meta.load-css('~tgui/styles/components/TextArea.scss');
-@include meta.load-css('~tgui/styles/components/Tooltip.scss');
-
 // Components specific to tgui-panel
 @include meta.load-css('./components/Chat.scss');
 @include meta.load-css('./components/Ping.scss');

tgui/packages/tgui-panel/styles/themes/light.scss

@@ -33,7 +33,7 @@
 
   // Components
   @include meta.load-css(
-    '~tgui/styles/components/Tabs.scss',
+    'pkg:tgui-styles/components/Tabs',
     $with: (
       'text-color': rgba(0, 0, 0, 0.5),
       'color-default': rgba(0, 0, 0, 1),
@@ -41,9 +41,9 @@
       'tab-color-hovered': rgba(0, 0, 0, 0.075)
     )
   );
-  @include meta.load-css('~tgui/styles/components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
   @include meta.load-css(
-    '~tgui/styles/components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(0, 0%, 73.3%),
       'color-disabled': hsl(0, 0%, 21.2%),
@@ -54,17 +54,17 @@
     )
   );
   @include meta.load-css(
-    '~tgui/styles/components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: (
       'border-color': colors.fg(colors.$label),
       'background-color': hsl(0, 0%, 90.2%)
     )
   );
-  @include meta.load-css('~tgui/styles/components/NumberInput.scss');
-  @include meta.load-css('~tgui/styles/components/TextArea.scss');
-  @include meta.load-css('~tgui/styles/components/Knob.scss');
-  @include meta.load-css('~tgui/styles/components/Slider.scss');
-  @include meta.load-css('~tgui/styles/components/ProgressBar.scss');
+  @include meta.load-css('pkg:tgui-styles/components/NumberInput');
+  @include meta.load-css('pkg:tgui-styles/components/TextArea');
+  @include meta.load-css('pkg:tgui-styles/components/Knob');
+  @include meta.load-css('pkg:tgui-styles/components/Slider');
+  @include meta.load-css('pkg:tgui-styles/components/ProgressBar');
 
   // Components specific to tgui-panel
   @include meta.load-css(

tgui/packages/tgui-say/package.json

@@ -9,6 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tgui": "workspace:*",
-    "tgui-polyfill": "workspace:*"
+    "tgui-polyfill": "workspace:*",
+    "tgui-styles": "^0.0.10"
   }
 }

tgui/packages/tgui-say/styles/main.scss

@@ -7,7 +7,7 @@
 // Atomic styles
 @include meta.load-css('~tgui/styles/atomic/text.scss');
 // External styles
-@include meta.load-css('~tgui/styles/components/TextArea.scss');
+@include meta.load-css('pkg:tgui-styles/components/TextArea');
 // Local styles
 @include meta.load-css('./button.scss');
 @include meta.load-css('./content.scss');

tgui/packages/tgui/package.json

@@ -20,6 +20,7 @@
     "react-popper": "^2.3.0",
     "tgui-core": "^1.3.0",
     "tgui-dev-server": "workspace:*",
-    "tgui-polyfill": "workspace:*"
+    "tgui-polyfill": "workspace:*",
+    "tgui-styles": "^0.0.10"
   }
 }

tgui/packages/tgui/styles/components/BlockQuote.scss

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-
-$color-default: colors.fg(colors.$label) !default;
-
-.BlockQuote {
-  color: $color-default;
-  border-left: base.em(2px) solid $color-default;
-  padding-left: 0.5em;
-  margin-bottom: 0.5em;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}

tgui/packages/tgui/styles/components/Button.scss

@@ -1,176 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-$color-default: colors.bg(colors.$primary) !default;
-$color-disabled: hsl(0, 0%, 60%) !default;
-$color-selected: colors.bg(colors.$green) !default;
-$color-caution: colors.bg(colors.$yellow) !default;
-$color-danger: colors.bg(colors.$red) !default;
-$color-transparent-text: rgba(255, 255, 255, 0.5) !default;
-$border-radius: base.$border-radius !default;
-$bg-map: colors.$bg-map !default;
-
-@mixin button-color($color) {
-  // Adapt text color to background luminance to ensure high contast
-  $luminance: luminance($color);
-  $text-color: if($luminance > 0.4, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
-
-  transition:
-    color 50ms,
-    background-color 50ms;
-  background-color: $color;
-  color: $text-color;
-
-  &:focus {
-    transition:
-      color 100ms,
-      background-color 100ms;
-  }
-
-  &:hover {
-    background-color: lighten($color, 30%);
-    color: $text-color;
-  }
-}
-
-.Button {
-  position: relative;
-  display: inline-block;
-  line-height: 1.667em;
-  padding: 0 0.5em;
-  margin-right: base.em(2px);
-  white-space: nowrap;
-  outline: 0;
-  border-radius: $border-radius;
-  margin-bottom: base.em(2px);
-  // Disable selection in buttons
-  user-select: none;
-  -ms-user-select: none;
-
-  &:last-child {
-    margin-right: 0;
-    margin-bottom: 0;
-  }
-
-  .fa,
-  .fas,
-  .far {
-    margin-left: -0.25em;
-    margin-right: -0.25em;
-    min-width: 1.333em;
-    text-align: center;
-  }
-}
-
-.Button--dropdown {
-  line-height: base.em(16px);
-  height: base.em(22px);
-  padding: 0.2rem 0.5rem;
-}
-
-.Button--hasContent {
-  // Add a margin to the icon to keep it separate from the text
-  .fa,
-  .fas,
-  .far {
-    margin-right: 0.25em;
-  }
-}
-
-.Button--hasContent.Button--iconPosition--right {
-  .fa,
-  .fas,
-  .far {
-    margin-right: 0px;
-    margin-left: 3px;
-  }
-}
-
-.Button--ellipsis {
-  display: block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.Button--fluid {
-  display: block;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.Button--circular {
-  border-radius: 50%;
-}
-
-.Button--compact {
-  padding: 0 0.25em;
-  line-height: 1.333em;
-}
-
-@each $color-name, $color-value in $bg-map {
-  .Button--color--#{$color-name} {
-    @include button-color($color-value);
-  }
-}
-
-.Button--color--default {
-  @include button-color($color-default);
-}
-
-.Button--color--caution {
-  @include button-color($color-caution);
-}
-
-.Button--color--danger {
-  @include button-color($color-danger);
-}
-
-.Button--color--transparent {
-  @include button-color(base.$color-bg);
-  background-color: rgba(base.$color-bg, 0);
-  color: $color-transparent-text;
-}
-
-.Button--disabled {
-  background-color: $color-disabled !important;
-}
-
-.Button--selected {
-  @include button-color($color-selected);
-}
-
-.Button--flex {
-  display: inline-flex; //Inline even for fluid
-  flex-direction: column;
-}
-
-.Button--flex--fluid {
-  width: 100%;
-}
-
-.Button--verticalAlignContent--top {
-  justify-content: flex-start;
-}
-
-.Button--verticalAlignContent--middle {
-  justify-content: center;
-}
-
-.Button--verticalAlignContent--bottom {
-  justify-content: flex-end;
-}
-
-.Button__content {
-  display: block;
-  align-self: stretch;
-}
-
-.Button__textMargin {
-  margin-left: 0.4rem;
-}

tgui/packages/tgui/styles/components/ColorBox.scss

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-.ColorBox {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  line-height: 1em;
-  text-align: center;
-}

tgui/packages/tgui/styles/components/Dialog.scss

@@ -1,105 +0,0 @@
-@use '../base';
-
-$background-color: base.$color-bg !default;
-
-.Dialog {
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.Dialog__content {
-  background-color: $background-color;
-  font-family: Consolas, monospace;
-  font-size: base.em(14px);
-  display: flex;
-  flex-direction: column;
-}
-
-.Dialog__header {
-  display: flex;
-  height: 2em;
-  line-height: 1.928em;
-  background-color: rgba(0, 0, 0, 0.5);
-  user-select: none;
-  -ms-user-select: none;
-}
-
-.Dialog__title {
-  display: inline;
-  font-style: italic;
-  margin-left: 1rem;
-  margin-right: 2rem;
-  flex-grow: 1;
-  opacity: 0.33;
-}
-
-.Dialog__body {
-  margin: 2rem 1rem 2rem 1rem;
-  flex-grow: 1;
-}
-
-.Dialog__footer {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
-.Dialog__button {
-  margin: 0 1rem 0 1rem;
-  height: 2rem;
-  min-width: 6rem;
-  text-align: center;
-}
-
-.SaveAsDialog__inputs {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 3rem;
-  justify-content: flex-end;
-  margin-right: 1rem;
-}
-
-.SaveAsDialog__input {
-  margin-left: 1rem;
-  width: 80%;
-}
-
-.SaveAsDialog__label {
-  vertical-align: center;
-}
-
-.Dialog__FileList {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  align-content: flex-start;
-  max-height: 20rem;
-  overflow: auto;
-  overflow-y: scroll;
-}
-
-.Dialog__FileEntry {
-  text-align: center;
-  margin: 1rem;
-}
-
-.Dialog__FileIcon {
-  display: inline-block;
-  margin: 0 0 1rem 0;
-  position: relative;
-  width: 6vh;
-  height: auto;
-  text-align: center;
-  cursor: default;
-}

tgui/packages/tgui/styles/components/Dimmer.scss

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-$background-dimness: 0.75 !default;
-
-.Dimmer {
-  // Align everything in the middle.
-  // A fat middle finger for anything less than IE11.
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // Fill positioned parent
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  // Dim everything around it
-  background-color: rgba(0, 0, 0, $background-dimness);
-  z-index: 1;
-}

tgui/packages/tgui/styles/components/Divider.scss

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-$color: rgba(255, 255, 255, 0.1) !default;
-$thickness: base.em(2px) !default;
-$spacing: 0.5em;
-
-.Divider--horizontal {
-  margin: $spacing 0;
-
-  &:not(.Divider--hidden) {
-    border-top: $thickness solid $color;
-  }
-}
-
-.Divider--vertical {
-  height: 100%;
-  margin: 0 $spacing;
-
-  &:not(.Divider--hidden) {
-    border-left: $thickness solid $color;
-  }
-}

tgui/packages/tgui/styles/components/Dropdown.scss

@@ -1,72 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-.Dropdown {
-  display: flex;
-  align-items: flex-start;
-}
-
-.Dropdown__control {
-  flex: 1;
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  overflow: hidden;
-  user-select: none;
-  width: base.em(100px);
-}
-
-.Dropdown__arrow-button {
-  float: right;
-  padding-left: 0.35em;
-  width: 1.2em;
-  border-left: base.em(1px) solid rgba(0, 0, 0, 0.25);
-}
-
-.Dropdown__menu {
-  overflow-y: auto;
-  align-items: center;
-  max-height: base.em(200px);
-  border-radius: 0 0 base.em(2px) base.em(2px);
-  color: #fff;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.Dropdown__menu-scroll {
-  overflow-y: scroll;
-}
-
-.Dropdown__menuentry {
-  padding: base.em(2px) base.em(4px);
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  transition: background-color 100ms ease-out;
-
-  &.selected {
-    background-color: rgba(255, 255, 255, 0.5) !important;
-    transition: background-color 0ms;
-  }
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-    transition: background-color 0ms;
-  }
-}
-
-.Dropdown__over {
-  top: auto;
-  bottom: 100%;
-}
-
-.Dropdown__selected-text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: base.em(17px);
-  width: calc(100% - 1.2em);
-}

tgui/packages/tgui/styles/components/Flex.scss

@@ -1,31 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-.Flex {
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.Flex--inline {
-  display: inline-flex;
-}
-
-.Flex--iefix {
-  display: block;
-}
-
-.Flex--iefix.Flex--inline {
-  display: inline-block;
-}
-
-.Flex__item--iefix {
-  display: inline-block;
-}
-
-.Flex--iefix--column {
-  & > .Flex__item--iefix {
-    display: block;
-  }
-}

tgui/packages/tgui/styles/components/Icon.scss

@@ -1,25 +0,0 @@
-/**
- * @file
- * @copyright 2020
- * @author ThePotato97 (https://github.com/ThePotato97)
- * @license ISC
- */
-
-.IconStack > .Icon {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-}
-
-.IconStack {
-  position: relative;
-  display: inline-block;
-  height: 1.2em;
-  line-height: 2em;
-  vertical-align: middle;
-
-  &:after {
-    color: transparent;
-    content: '.';
-  }
-}

tgui/packages/tgui/styles/components/Input.scss

@@ -1,68 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../functions.scss' as *;
-
-$text-color: base.$color-fg !default;
-$background-color: hsl(0, 0%, 3.9%) !default;
-$border-color: hsl(212.3, 100%, 76.7%) !default;
-$border-radius: base.$border-radius !default;
-
-.Input {
-  position: relative;
-  display: inline-block;
-  width: base.em(120px);
-  border: base.em(1px) solid $border-color;
-  border: base.em(1px) solid rgba($border-color, 0.75);
-  border-radius: $border-radius;
-  color: $text-color;
-  background-color: $background-color;
-  padding: 0 base.em(4px);
-  margin-right: base.em(2px);
-  line-height: base.em(17px);
-  overflow: visible;
-}
-
-.Input--fluid {
-  display: block;
-  width: auto;
-}
-
-.Input__baseline {
-  display: inline-block;
-  color: transparent;
-}
-
-.Input__input {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 0;
-  outline: 0;
-  width: 100%;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  height: base.em(17px);
-  margin: 0;
-  padding: 0 0.5em;
-  font-family: Verdana, sans-serif;
-  background-color: transparent;
-  color: $text-color;
-  color: inherit;
-
-  &:-ms-input-placeholder {
-    font-style: italic;
-    color: #777;
-    color: rgba(255, 255, 255, 0.45);
-  }
-}
-
-.Input--monospace .Input__input {
-  font-family: 'Consolas', monospace;
-}

tgui/packages/tgui/styles/components/Knob.scss

@@ -1,131 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-$bg-map: colors.$bg-map !default;
-$fg-map: colors.$fg-map !default;
-$ring-color: hsl(212.2, 46.8%, 60.2%) !default;
-$knob-color: hsl(0, 0%, 20%) !default;
-$popup-background-color: hsl(0, 0%, 0%) !default;
-$popup-text-color: hsl(0, 0%, 100%) !default;
-
-$inner-padding: 0.1em;
-
-.Knob {
-  position: relative;
-  font-size: 1rem;
-  width: 2.6em;
-  height: 2.6em;
-  margin: 0 auto;
-  margin-bottom: -0.2em;
-  cursor: n-resize;
-
-  // Adjusts a baseline in a way, that makes knob middle-aligned
-  // when it flows with the text.
-  &:after {
-    content: '.';
-    color: transparent;
-    line-height: 2.5em;
-  }
-}
-
-.Knob__circle {
-  position: absolute;
-  top: $inner-padding;
-  bottom: $inner-padding;
-  left: $inner-padding;
-  right: $inner-padding;
-  margin: 0.3em;
-  background-color: $knob-color;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  border-radius: 50%;
-  box-shadow: 0 0.05em 0.5em 0 rgba(0, 0, 0, 0.5);
-}
-
-.Knob__cursorBox {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.Knob__cursor {
-  position: relative;
-  top: 0.05em;
-  margin: 0 auto;
-  width: 0.2em;
-  height: 0.8em;
-  background-color: rgba(255, 255, 255, 0.9);
-}
-
-.Knob__popupValue {
-  position: absolute;
-  top: -2rem;
-  right: 50%;
-  font-size: 1rem;
-  text-align: center;
-  padding: 0.25rem 0.5rem;
-  color: $popup-text-color;
-  background-color: $popup-background-color;
-  transform: translateX(50%);
-  white-space: nowrap;
-}
-
-.Knob__ring {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: $inner-padding;
-}
-
-$pi: 3.1416;
-
-.Knob__ringTrackPivot {
-  transform: rotateZ(135deg);
-}
-
-.Knob__ringTrack {
-  // transform-origin: 50% 50%;
-  fill: transparent;
-  stroke: rgba(255, 255, 255, 0.1);
-  stroke-width: 8;
-  stroke-linecap: round;
-  stroke-dasharray: 75 * $pi;
-}
-
-.Knob__ringFillPivot {
-  transform: rotateZ(135deg);
-}
-
-.Knob--bipolar .Knob__ringFillPivot {
-  transform: rotateZ(270deg);
-}
-
-.Knob__ringFill {
-  fill: transparent;
-  stroke: $ring-color;
-  stroke-width: 8;
-  stroke-linecap: round;
-  stroke-dasharray: 100 * $pi;
-  transition: stroke 50ms ease-out;
-}
-
-@each $color-name, $color-value in $fg-map {
-  .Knob--color--#{$color-name} {
-    .Knob__ringFill {
-      stroke: $color-value;
-    }
-  }
-}

tgui/packages/tgui/styles/components/LabeledList.scss

@@ -1,49 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-.LabeledList {
-  display: table;
-  // IE8: Does not support calc
-  width: 100%;
-  // Compensate for negative margin
-  width: calc(100% + 1em);
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: -0.25em -0.5em;
-  margin-bottom: 0;
-  padding: 0;
-}
-
-.LabeledList__row {
-  display: table-row;
-}
-
-.LabeledList__row:last-child .LabeledList__cell {
-  padding-bottom: 0;
-}
-
-.LabeledList__cell {
-  display: table-cell;
-  margin: 0;
-  padding: 0.25em 0.5em;
-  border: 0;
-  text-align: left;
-}
-
-.LabeledList__label--nowrap {
-  width: 1%;
-  white-space: nowrap;
-  min-width: 5em;
-}
-
-.LabeledList__buttons {
-  width: 0.1%;
-  white-space: nowrap;
-  text-align: right;
-  padding-top: base.em(1px);
-  padding-bottom: 0;
-}

tgui/packages/tgui/styles/components/MenuBar.scss

@@ -1,76 +0,0 @@
-@use 'sass:color';
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-$separator-color: base.$color-bg-section;
-$background-color: base.$color-bg !default;
-$dropdown-z-index: 5;
-
-.MenuBar {
-  display: flex;
-}
-
-.MenuBar__font {
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-}
-
-.MenuBar__hover {
-  &:hover {
-    background-color: color.adjust($background-color, $lightness: 30%);
-    transition: background-color 0ms;
-  }
-}
-
-.MenuBar__MenuBarButton {
-  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
-}
-
-.MenuBar__menu {
-  position: absolute;
-  z-index: $dropdown-z-index;
-  background-color: $background-color;
-  padding: 0.3rem 0.3rem 0.3rem 0.3rem;
-  box-shadow: 4px 6px 5px -2px rgba(0, 0, 0, 0.55);
-}
-
-.MenuBar__MenuItem {
-  z-index: $dropdown-z-index;
-  transition: background-color 100ms ease-out;
-  background-color: $background-color;
-  white-space: nowrap;
-  padding: 0.3rem 2rem 0.3rem 3rem;
-}
-
-.MenuBar__MenuItemToggle {
-  padding: 0.3rem 2rem 0.3rem 0;
-}
-
-.MenuBar__MenuItemToggle__check {
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 3rem;
-  margin-left: 0.3rem;
-}
-
-.MenuBar__over {
-  top: auto;
-  bottom: 100%;
-}
-
-.MenuBar__MenuBarButton-text {
-  text-overflow: clip;
-  white-space: nowrap;
-  height: base.em(17px);
-}
-
-.MenuBar__Separator {
-  display: block;
-  margin: 0.3rem 0.3rem 0.3rem 2.3rem;
-  border-top: 1px solid $separator-color;
-}

tgui/packages/tgui/styles/components/Modal.scss

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-$background-color: base.$color-bg !default;
-
-.Modal {
-  background-color: $background-color;
-  max-width: calc(100% - 1rem);
-  padding: 1rem;
-}

tgui/packages/tgui/styles/components/NoticeBox.scss

@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use 'sass:color';
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-// NoticeBox
-$background-color: hsl(36.9, 37.9%, 57.1%) !default;
-$color-stripes: rgba(0, 0, 0, 0.1) !default;
-$color-border: hsl(0, 0%, 15.3%) !default;
-$bg-map: colors.$bg-map !default;
-
-.NoticeBox {
-  // Adapt text color to background luminance to ensure high contast
-  $luminance: luminance($background-color);
-  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
-
-  padding: 0.33em 0.5em;
-  margin-bottom: 0.5em;
-  box-shadow: none;
-  font-weight: bold;
-  font-style: italic;
-  color: $text-color;
-  background-color: $background-color;
-  background-image: repeating-linear-gradient(
-    -45deg,
-    transparent,
-    transparent base.em(10px),
-    $color-stripes base.em(10px),
-    $color-stripes base.em(20px)
-  );
-}
-
-@mixin box-color($color) {
-  $luminance: luminance($color);
-  $text-color: if($luminance > 0.35, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
-  color: $text-color;
-  background-color: color.adjust($color, $saturation: -15%, $lightness: -15%);
-}
-
-@each $color-name, $color-value in $bg-map {
-  .NoticeBox--color--#{$color-name} {
-    @include box-color($color-value);
-  }
-}
-
-.NoticeBox--type--info {
-  @include box-color(colors.$blue);
-}
-
-.NoticeBox--type--success {
-  @include box-color(colors.$green);
-}
-
-.NoticeBox--type--warning {
-  @include box-color(colors.$orange);
-}
-
-.NoticeBox--type--danger {
-  @include box-color(colors.$red);
-}

tgui/packages/tgui/styles/components/NumberInput.scss

@@ -1,76 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use 'sass:color';
-@use '../base.scss';
-@use '../functions.scss' as *;
-@use './Input.scss';
-
-$text-color: Input.$text-color !default;
-$background-color: Input.$background-color !default;
-$border-color: Input.$border-color !default;
-$border-radius: Input.$border-radius !default;
-
-.NumberInput {
-  position: relative;
-  display: inline-block;
-  border: base.em(1px) solid $border-color;
-  border: base.em(1px) solid rgba($border-color, 0.75);
-  border-radius: $border-radius;
-  color: $border-color;
-  background-color: $background-color;
-  padding: 0 base.em(4px);
-  margin-right: base.em(2px);
-  line-height: base.em(17px);
-  text-align: right;
-  overflow: visible;
-  cursor: n-resize;
-}
-
-.NumberInput--fluid {
-  display: block;
-}
-
-.NumberInput__content {
-  margin-left: 0.5em;
-}
-
-.NumberInput__barContainer {
-  position: absolute;
-  top: base.em(2px);
-  bottom: base.em(2px);
-  left: base.em(2px);
-}
-
-.NumberInput__bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: base.em(3px);
-  box-sizing: border-box;
-  border-bottom: base.em(1px) solid $border-color;
-  background-color: $border-color;
-}
-
-.NumberInput__input {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 0;
-  outline: 0;
-  width: 100%;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  height: base.em(17px);
-  margin: 0;
-  padding: 0 0.5em;
-  font-family: Verdana, sans-serif;
-  background-color: $background-color;
-  color: $text-color;
-  text-align: right;
-}

tgui/packages/tgui/styles/components/ProgressBar.scss

@@ -1,63 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-$color-default-fill: colors.bg(colors.$primary) !default;
-$background-color: rgba(0, 0, 0, 0) !default;
-$border-radius: base.$border-radius !default;
-$bg-map: colors.$bg-map !default;
-
-.ProgressBar {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  padding: 0 0.5em;
-  border-width: base.em(1px) !important;
-  border-style: solid !important;
-  border-radius: $border-radius;
-  background-color: $background-color;
-  transition: border-color 900ms ease-out;
-}
-
-.ProgressBar__fill {
-  position: absolute;
-  top: -0.5px;
-  left: 0px;
-  bottom: -0.5px;
-}
-
-.ProgressBar__fill--animated {
-  transition:
-    background-color 900ms ease-out,
-    width 900ms ease-out;
-}
-
-.ProgressBar__content {
-  position: relative;
-  line-height: base.em(17px);
-  width: 100%;
-  text-align: right;
-}
-
-.ProgressBar--color--default {
-  border: base.em(1px) solid $color-default-fill;
-
-  .ProgressBar__fill {
-    background-color: $color-default-fill;
-  }
-}
-
-@each $color-name, $color-value in $bg-map {
-  .ProgressBar--color--#{$color-name} {
-    border-color: $color-value !important;
-
-    .ProgressBar__fill {
-      background-color: $color-value;
-    }
-  }
-}

tgui/packages/tgui/styles/components/RoundGauge.scss

@@ -1,88 +0,0 @@
-/**
- * Copyright (c) 2020 bobbahbrown (https://github.com/bobbahbrown)
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-$fg-map: colors.$fg-map !default;
-$ring-color: hsl(212.2, 46.8%, 60.2%) !default;
-
-.RoundGauge {
-  font-size: 1rem;
-  width: 2.6em;
-  height: 1.3em;
-  margin: 0 auto;
-  margin-bottom: 0.2em;
-}
-
-$pi: 3.1416;
-
-.RoundGauge__ringTrack {
-  fill: transparent;
-  stroke: rgba(255, 255, 255, 0.1);
-  stroke-width: 10;
-  stroke-dasharray: 50 * $pi;
-  stroke-dashoffset: 50 * $pi;
-}
-
-.RoundGauge__ringFill {
-  fill: transparent;
-  stroke: $ring-color;
-  stroke-width: 10;
-  stroke-dasharray: 100 * $pi;
-  transition: stroke 50ms ease-out;
-}
-
-.RoundGauge__needle,
-.RoundGauge__ringFill {
-  transition: transform 50ms ease-in-out;
-}
-
-.RoundGauge__needleLine,
-.RoundGauge__needleMiddle {
-  fill: colors.$bad;
-}
-
-.RoundGauge__alert {
-  fill-rule: evenodd;
-  clip-rule: evenodd;
-  stroke-linejoin: round;
-  stroke-miterlimit: 2;
-  fill: rgba(255, 255, 255, 0.1);
-}
-
-.RoundGauge__alert.max {
-  fill: colors.$bad;
-}
-
-@each $color-name, $color-value in $fg-map {
-  .RoundGauge--color--#{$color-name}.RoundGauge__ringFill {
-    stroke: $color-value;
-  }
-}
-
-@each $color-name, $color-value in $fg-map {
-  .RoundGauge__alert--#{$color-name} {
-    fill: $color-value;
-    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
-    animation: RoundGauge__alertAnim
-      1s
-      cubic-bezier(0.34, 1.56, 0.64, 1)
-      infinite;
-  }
-}
-
-@keyframes RoundGauge__alertAnim {
-  0% {
-    opacity: 0.1;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.1;
-  }
-}

tgui/packages/tgui/styles/components/Section.scss

@@ -1,143 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use 'sass:color';
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss';
-
-$title-text-color: base.$color-fg !default;
-$background-color: base.$color-bg-section !default;
-$separator-color: colors.$primary !default;
-
-.Section {
-  position: relative;
-  margin-bottom: 0.5em;
-  background-color: functions.fake-alpha($background-color, base.$color-bg);
-  background-color: $background-color;
-  box-sizing: border-box;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.Section__title {
-  position: relative;
-  padding: 0.5em;
-  border-bottom: base.em(2px) solid $separator-color;
-}
-
-.Section__titleText {
-  font-size: base.em(14px);
-  font-weight: bold;
-  color: $title-text-color;
-}
-
-.Section__buttons {
-  position: absolute;
-  display: inline-block;
-  right: 0.5em;
-  margin-top: base.em(-1px);
-}
-
-.Section__rest {
-  position: relative;
-}
-
-.Section__content {
-  padding: 0.66em 0.5em;
-}
-
-.Section--fitted > .Section__rest > .Section__content {
-  padding: 0;
-}
-
-.Section--fill {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.Section--fill > .Section__rest {
-  flex-grow: 1;
-}
-
-.Section--fill > .Section__rest > .Section__content {
-  height: 100%;
-}
-
-.Section--fill.Section--scrollable > .Section__rest > .Section__content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.Section--fill.Section--iefix {
-  display: table !important;
-  width: 100% !important;
-  height: 100% !important;
-  border-collapse: collapse;
-  border-spacing: 0;
-
-  & > .Section__rest {
-    display: table-row !important;
-    height: 100% !important;
-  }
-}
-
-.Section--scrollable {
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  & > .Section__rest > .Section__content {
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-}
-
-.Section--scrollableHorizontal {
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  & > .Section__rest > .Section__content {
-    overflow-y: hidden;
-    overflow-x: scroll;
-  }
-}
-
-.Section--scrollable.Section--scrollableHorizontal {
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  & > .Section__rest > .Section__content {
-    overflow-y: scroll;
-    overflow-x: scroll;
-  }
-}
-
-// Nested sections
-.Section .Section {
-  background-color: transparent;
-  margin-left: -0.5em;
-  margin-right: -0.5em;
-
-  // Remove extra space above the first nested section
-  &:first-child {
-    margin-top: -0.5em;
-  }
-}
-
-// Level 2 section title
-.Section .Section .Section__titleText {
-  font-size: base.em(13px);
-}
-
-// Level 3 section title
-.Section .Section .Section .Section__titleText {
-  font-size: base.em(12px);
-}

tgui/packages/tgui/styles/components/Slider.scss

@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-$cursor-color: base.$color-fg !default;
-$popup-background-color: hsl(0, 0%, 0%) !default;
-$popup-text-color: hsl(0, 0%, 100%) !default;
-
-.Slider {
-  cursor: e-resize;
-}
-
-.Slider__cursorOffset {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  transition: none !important;
-}
-
-.Slider__cursor {
-  position: absolute;
-  top: 0;
-  right: base.em(-1px);
-  bottom: 0;
-  width: 0;
-  border-left: base.em(2px) solid $cursor-color;
-}
-
-.Slider__pointer {
-  position: absolute;
-  right: base.em(-5px);
-  bottom: base.em(-4px);
-  width: 0;
-  height: 0;
-  border-left: base.em(5px) solid transparent;
-  border-right: base.em(5px) solid transparent;
-  border-bottom: base.em(5px) solid $cursor-color;
-}
-
-.Slider__popupValue {
-  position: absolute;
-  right: 0;
-  top: -2rem;
-  font-size: 1rem;
-  padding: 0.25rem 0.5rem;
-  color: $popup-text-color;
-  background-color: $popup-background-color;
-  transform: translateX(50%);
-  white-space: nowrap;
-}

tgui/packages/tgui/styles/components/Stack.scss

@@ -1,59 +0,0 @@
-/**
- * Copyright (c) 2021 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use './Divider.scss';
-
-$zebra-background-color: base.$color-bg-section !default;
-
-.Stack--fill {
-  height: 100%;
-}
-
-.Stack--horizontal > .Stack__item {
-  margin-left: 0.5em;
-
-  &:first-child {
-    margin-left: 0;
-  }
-}
-
-.Stack--vertical > .Stack__item {
-  margin-top: 0.5em;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.Stack--reverse > .Stack__item {
-  margin-left: 0;
-  margin-right: 0.5em;
-
-  &:first-child {
-    margin-right: 0;
-  }
-}
-
-.Stack--reverse--vertical > .Stack__item {
-  margin-top: 0;
-  margin-bottom: 0.5em;
-
-  &:first-child {
-    margin-bottom: 0;
-  }
-}
-
-.Stack--zebra > .Stack__item:nth-child(even) {
-  background-color: $zebra-background-color;
-}
-
-.Stack--horizontal > .Stack__divider:not(.Stack__divider--hidden) {
-  border-left: Divider.$thickness solid Divider.$color;
-}
-
-.Stack--vertical > .Stack__divider:not(.Stack__divider--hidden) {
-  border-top: Divider.$thickness solid Divider.$color;
-}

tgui/packages/tgui/styles/components/Table.scss

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-.Table {
-  display: table;
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin: 0;
-}
-
-.Table--collapsing {
-  width: auto;
-}
-
-.Table__row {
-  display: table-row;
-}
-
-.Table__cell {
-  display: table-cell;
-  padding: 0 0.25em;
-
-  &:first-child {
-    padding-left: 0;
-  }
-
-  &:last-child {
-    padding-right: 0;
-  }
-}
-
-.Table__row--header .Table__cell,
-.Table__cell--header {
-  font-weight: bold;
-  padding-bottom: 0.5em;
-}
-
-.Table__cell--collapsing {
-  width: 1%;
-  white-space: nowrap;
-}

tgui/packages/tgui/styles/components/Tabs.scss

@@ -1,144 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use 'sass:color';
-@use 'sass:math';
-@use '../base.scss';
-@use '../colors.scss';
-
-$color-default: color.scale(
-  colors.fg(colors.$primary),
-  $lightness: 75%
-) !default;
-$text-color: rgba(255, 255, 255, 0.5) !default;
-$text-color-selected: color.scale($color-default, $lightness: 25%) !default;
-$tab-color: transparent !default;
-$tab-color-hovered: rgba(255, 255, 255, 0.075) !default;
-$tab-color-selected: rgba(255, 255, 255, 0.125) !default;
-$border-radius: base.$border-radius !default;
-$fg-map: colors.$fg-map !default;
-
-.Tabs {
-  display: flex;
-  align-items: stretch;
-  overflow: hidden;
-  background-color: base.$color-bg-section;
-}
-
-.Tabs--fill {
-  height: 100%;
-}
-
-// Interoperability with sections
-.Section .Tabs {
-  background-color: transparent;
-}
-
-.Section:not(.Section--fitted) .Tabs {
-  margin: 0 -0.5em 0.5em;
-
-  &:first-child {
-    margin-top: -0.5em;
-  }
-}
-
-.Tabs--vertical {
-  flex-direction: column;
-  padding: 0.25em 0 0.25em 0.25em;
-}
-
-.Tabs--horizontal {
-  margin-bottom: 0.5em;
-  padding: 0.25em 0.25em 0 0.25em;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.Tabs__Tab {
-  flex-grow: 0;
-}
-
-.Tabs--fluid .Tabs__Tab {
-  flex-grow: 1;
-}
-
-.Tab {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $tab-color;
-  color: $text-color;
-  min-height: 2.25em;
-  min-width: 4em;
-}
-
-.Tab:not(.Tab--selected):hover {
-  background-color: $tab-color-hovered;
-}
-
-.Tab--selected {
-  background-color: $tab-color-selected;
-  color: $text-color-selected;
-}
-
-.Tab__text {
-  flex-grow: 1;
-  margin: 0 0.5em;
-}
-
-.Tab__left {
-  min-width: 1.5em;
-  text-align: center;
-  margin-left: 0.25em;
-}
-
-.Tab__right {
-  min-width: 1.5em;
-  text-align: center;
-  margin-right: 0.25em;
-}
-
-.Tabs--horizontal {
-  .Tab {
-    border-top: math.div(1em, 6) solid transparent;
-    border-bottom: math.div(1em, 6) solid transparent;
-    border-top-left-radius: 0.25em;
-    border-top-right-radius: 0.25em;
-  }
-
-  .Tab--selected {
-    border-bottom: math.div(1em, 6) solid $color-default;
-  }
-}
-
-.Tabs--vertical {
-  .Tab {
-    min-height: 2em;
-    border-left: math.div(1em, 6) solid transparent;
-    border-right: math.div(1em, 6) solid transparent;
-    border-top-left-radius: 0.25em;
-    border-bottom-left-radius: 0.25em;
-  }
-
-  .Tab--selected {
-    border-right: math.div(1em, 6) solid $color-default;
-  }
-}
-
-@each $color-name, $color-value in $fg-map {
-  .Tab--selected.Tab--color--#{$color-name} {
-    color: color.scale($color-value, $lightness: 25%);
-  }
-
-  .Tabs--horizontal .Tab--selected.Tab--color--#{$color-name} {
-    border-bottom-color: $color-value;
-  }
-
-  .Tabs--vertical .Tab--selected.Tab--color--#{$color-name} {
-    border-right-color: $color-value;
-  }
-}

tgui/packages/tgui/styles/components/TextArea.scss

@@ -1,84 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../functions.scss' as *;
-@use './Input.scss';
-
-$text-color: Input.$text-color !default;
-$background-color: Input.$background-color !default;
-$border-color: Input.$border-color !default;
-$border-radius: Input.$border-radius !default;
-
-.TextArea {
-  position: relative;
-  display: inline-block;
-  border: base.em(1px) solid $border-color;
-  border: base.em(1px) solid rgba($border-color, 0.75);
-  border-radius: $border-radius;
-  background-color: $background-color;
-  margin-right: base.em(2px);
-  line-height: base.em(17px);
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.TextArea--fluid {
-  display: block;
-  width: auto;
-  height: auto;
-}
-
-.TextArea--noborder {
-  border: 0px;
-}
-
-.TextArea__textarea.TextArea__textarea--scrollable {
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.TextArea__textarea {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 0;
-  outline: 0;
-  width: 100%;
-  height: 100%;
-  font-size: 1em;
-  line-height: base.em(17px);
-  min-height: base.em(17px);
-  margin: 0;
-  padding: 0 0.5em;
-  font-family: inherit;
-  background-color: transparent;
-  color: inherit;
-  box-sizing: border-box;
-  // Make sure the div and the textarea wrap words in the same way
-  word-wrap: break-word;
-  overflow: hidden;
-
-  &:-ms-input-placeholder {
-    font-style: italic;
-    color: #777;
-    color: rgba(255, 255, 255, 0.45);
-  }
-}
-
-.TextArea__textarea_custom {
-  overflow: visible;
-  white-space: pre-wrap;
-}
-
-.TextArea__nowrap {
-  white-space: nowrap;
-  overflow-wrap: normal;
-  overflow-x: scroll;
-}

tgui/packages/tgui/styles/components/Tooltip.scss

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../functions.scss' as *;
-
-$color: hsl(0, 0%, 100%) !default;
-$background-color: hsl(0, 0%, 0%) !default;
-$border-radius: base.$border-radius !default;
-
-.Tooltip {
-  z-index: 2;
-  padding: 0.5em 0.75em;
-  pointer-events: none;
-  text-align: left;
-  transition: opacity 150ms ease-out;
-  background-color: $background-color;
-  color: $color;
-  box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
-  border-radius: $border-radius;
-  max-width: base.em(250px);
-}

tgui/packages/tgui/styles/interfaces/Fabricator.scss

@@ -3,8 +3,8 @@
 @use '../base.scss';
 @use '../colors.scss';
 @use '../functions.scss' as *;
-@use '../components/Button.scss' as button;
-@use '../components/Tabs.scss' as tabs;
+@use 'pkg:tgui-styles/components/Button' as button;
+@use 'pkg:tgui-styles/components/Tabs' as tabs;
 
 .Fabricator__Recipe {
   padding: 0.25em 0;

tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
 @use 'sass:map';
-@use '../components/Button.scss';
 @use '../colors.scss';
 @use '../base.scss';
 

tgui/packages/tgui/styles/main.scss

@@ -5,6 +5,7 @@
 
 @use 'sass:meta';
 @use 'base';
+@use 'pkg:tgui-styles';
 
 // Core styles
 @include meta.load-css('./reset.scss');
@@ -19,34 +20,6 @@
 @include meta.load-css('./atomic/outline.scss');
 @include meta.load-css('./atomic/text.scss');
 
-// Components
-@include meta.load-css('./components/BlockQuote.scss');
-@include meta.load-css('./components/Button.scss');
-@include meta.load-css('./components/ColorBox.scss');
-@include meta.load-css('./components/Dialog.scss');
-@include meta.load-css('./components/Dimmer.scss');
-@include meta.load-css('./components/Divider.scss');
-@include meta.load-css('./components/Dropdown.scss');
-@include meta.load-css('./components/Flex.scss');
-@include meta.load-css('./components/Icon.scss');
-@include meta.load-css('./components/Input.scss');
-@include meta.load-css('./components/Knob.scss');
-@include meta.load-css('./components/LabeledList.scss');
-@include meta.load-css('./components/MenuBar.scss');
-@include meta.load-css('./components/Modal.scss');
-@include meta.load-css('./components/NoticeBox.scss');
-@include meta.load-css('./components/NumberInput.scss');
-@include meta.load-css('./components/ProgressBar.scss');
-@include meta.load-css('./components/RoundGauge.scss');
-@include meta.load-css('./components/SearchItem.scss');
-@include meta.load-css('./components/Section.scss');
-@include meta.load-css('./components/Slider.scss');
-@include meta.load-css('./components/Stack.scss');
-@include meta.load-css('./components/Table.scss');
-@include meta.load-css('./components/Tabs.scss');
-@include meta.load-css('./components/TextArea.scss');
-@include meta.load-css('./components/Tooltip.scss');
-
 // Interfaces
 @include meta.load-css('./interfaces/AlertModal.scss');
 @include meta.load-css('./interfaces/Changelog.scss');
@@ -62,6 +35,7 @@
 @include meta.load-css('./interfaces/LibraryAdmin.scss');
 @include meta.load-css('./interfaces/LibraryComputer.scss');
 @include meta.load-css('./interfaces/ListInput.scss');
+@include meta.load-css('./interfaces/LootPanel.scss');
 @include meta.load-css('./interfaces/Mecha.scss');
 @include meta.load-css('./interfaces/NtosMessenger.scss');
 @include meta.load-css('./interfaces/NtosNotepad.scss');

tgui/packages/tgui/styles/themes/abductor.scss

@@ -23,7 +23,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(0, 0%, 21%),
@@ -33,24 +33,24 @@
     )
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': hsl(227, 29%, 27%))
   );
   @include meta.load-css(
-    '../components/NoticeBox.scss',
+    'pkg:tgui-styles/components/NoticeBox',
     $with: ('background-color': hsl(340, 67%, 41%))
   );
   @include meta.load-css(
-    '../components/NumberInput.scss',
+    'pkg:tgui-styles/components/NumberInput',
     $with: ('border-color': hsl(227, 29%, 27%))
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': hsla(0, 0%, 0%, 0.5))
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(340, 67%, 41%))
   );
 

tgui/packages/tgui/styles/themes/cardtable.scss

@@ -24,7 +24,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(145.26, 73.64%, 25.29%),
       'color-disabled': hsl(0, 0%, 21.18%),
@@ -34,14 +34,14 @@
     )
   );
   @include meta.load-css(
-    '../components/NumberInput.scss',
+    'pkg:tgui-styles/components/NumberInput',
     $with: ('border-color': #fff)
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': rgba(0, 0, 0, 0.5))
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/hackerman.scss

@@ -22,7 +22,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(120, 17.78%, 35.29%),
@@ -30,7 +30,7 @@
     )
   );
   @include meta.load-css(
-    '../components/Tabs.scss',
+    'pkg:tgui-styles/components/Tabs',
     $with: (
       'color-default': colors.$primary,
       'tab-color-selected': hsla(120, 100%, 50%, 0.25),
@@ -38,11 +38,11 @@
     )
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': colors.$primary)
   );
-  @include meta.load-css('../components/Modal.scss');
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Modal');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/malfunction.scss

@@ -22,7 +22,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(0, 0%, 21%),
@@ -32,24 +32,24 @@
     )
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': hsl(0, 99%, 29%))
   );
   @include meta.load-css(
-    '../components/NoticeBox.scss',
+    'pkg:tgui-styles/components/NoticeBox',
     $with: ('background-color': hsl(204, 54%, 23%))
   );
   @include meta.load-css(
-    '../components/NumberInput.scss',
+    'pkg:tgui-styles/components/NumberInput',
     $with: ('border-color': hsl(0, 99%, 29%))
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': hsla(0, 0%, 0%, 0.5))
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(204, 54%, 29%))
   );
 

tgui/packages/tgui/styles/themes/neutral.scss

@@ -21,20 +21,20 @@ $neutral: hsl(42.12, 100%, 50%);
 .theme-neutral {
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': color.scale($neutral, $lightness: -30%),
       'color-transparent-text': color.scale($neutral, $lightness: 30%)
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: (
       'color-default-fill': $neutral,
       'background-color': rgba(0, 0, 0, 0.5)
     )
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/ntOS95.scss

@@ -29,7 +29,7 @@ $scrollbar-color-multiplier: 1;
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(52.3, 40.3%, 84.9%),
       'color-disabled': hsl(0, 0%, 43.9%),
@@ -39,16 +39,16 @@ $scrollbar-color-multiplier: 1;
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': rgba(0, 0, 0, 0.5))
   );
   @include meta.load-css(
-    '../components/Section.scss',
+    'pkg:tgui-styles/components/Section',
     $with: ('background-color': rgba(0, 0, 0, 0.4))
   );
 
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(61.5, 70.2%, 77.6%))
   );
   // Layouts

tgui/packages/tgui/styles/themes/ntos.scss

@@ -19,20 +19,20 @@ $nanotrasen: hsl(213, 30%, 32%);
 .theme-ntos {
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': $nanotrasen,
       'color-transparent-text': rgba(227, 240, 255, 0.75)
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: (
       'color-default-fill': $nanotrasen,
       'background-color': rgba(0, 0, 0, 0.5)
     )
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/ntos_cat.scss

@@ -38,7 +38,7 @@ $scrollbar-color-multiplier: 0.5;
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(300, 91%, 52%),
       'color-transparent-text': hsla(210, 100%, 94%, 0.75),
@@ -48,15 +48,15 @@ $scrollbar-color-multiplier: 0.5;
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('color-default-fill': hsla(350, 100%, 76.5%, 0.75))
   );
   @include meta.load-css(
-    '../components/Section.scss',
+    'pkg:tgui-styles/components/Section',
     $with: ('background-color': hsla(24, 56%, 31%, 0.75))
   );
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsla(36, 100%, 50%, 0.75))
   );
 

tgui/packages/tgui/styles/themes/ntos_darkmode.scss

@@ -19,20 +19,20 @@ $nanotrasen: hsl(0, 0%, 17.25%);
 .theme-ntos_darkmode {
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': $nanotrasen,
       'color-transparent-text': rgba(227, 240, 255, 0.75)
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: (
       'color-default-fill': $nanotrasen,
       'background-color': rgba(0, 0, 0, 0.5)
     )
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/ntos_lightmode.scss

@@ -20,22 +20,22 @@ $nanotrasen: hsl(0, 0%, 100%);
   @include meta.load-css('../atomic/color.scss', $with: ());
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: ('color-default': $nanotrasen)
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: (
       'color-default-fill': $nanotrasen,
       'background-color': hsla(0, 0%, 0%, 0.5)
     )
   );
   @include meta.load-css(
-    '../components/Section.scss',
+    'pkg:tgui-styles/components/Section',
     $with: ('background-color': hsla(0, 0%, 47%, 0.4))
   );
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(0, 0%, 100%))
   );
 

tgui/packages/tgui/styles/themes/ntos_spooky.scss

@@ -18,7 +18,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(345, 96%, 25%),
       'color-disabled': hsl(0, 0%, 21%),
@@ -28,27 +28,27 @@
     )
   );
   @include meta.load-css(
-    '../components/Dimmer.scss',
+    'pkg:tgui-styles/components/Dimmer',
     $with: ('background-dimness': 0.45)
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': hsl(15, 14%, 26%))
   );
-  @include meta.load-css('../components/Modal.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Modal');
   @include meta.load-css(
-    '../components/NoticeBox.scss',
+    'pkg:tgui-styles/components/NoticeBox',
     $with: ('background-color': hsl(0, 90%, 23%))
   );
-  @include meta.load-css('../components/NumberInput.scss');
-  @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Table.scss');
+  @include meta.load-css('pkg:tgui-styles/components/NumberInput');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
+  @include meta.load-css('pkg:tgui-styles/components/Table');
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(0, 0%, 0%))
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: (
       'color-default-fill': hsla(0, 100%, 37%, 0.75),
       'background-color': hsla(0, 97%, 7%, 0.5)

tgui/packages/tgui/styles/themes/ntos_synth.scss

@@ -32,7 +32,7 @@ $purple: hsl(248, 47%, 37%);
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': $cyan,
       'color-transparent-text': hsla(210, 100%, 94%, 0.75),
@@ -42,15 +42,15 @@ $purple: hsl(248, 47%, 37%);
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('color-default-fill': hsla(300, 91%, 52%, 0.75))
   );
   @include meta.load-css(
-    '../components/Section.scss',
+    'pkg:tgui-styles/components/Section',
     $with: ('background-color': hsla(0, 0%, 0%, 0.3))
   );
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsla(36, 100%, 50%, 0.75))
   );
 

tgui/packages/tgui/styles/themes/ntos_terminal.scss

@@ -24,7 +24,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': rgba(0, 0, 0, 0),
       'color-disabled': hsl(120, 18%, 35%),
@@ -32,18 +32,18 @@
     )
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': colors.$primary)
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: (
       'background-color': hsla(0, 0%, 0%, 0.5),
       'color-default-fill': hsla(146, 82%, 53%, 0.5)
     )
   );
-  @include meta.load-css('../components/Modal.scss');
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Modal');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/paper.scss

@@ -30,13 +30,13 @@ $font-size: 24px;
   @include meta.load-css('../atomic/color.scss');
 
   // Components
-  @include meta.load-css('../components/Tabs.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Tabs');
   @include meta.load-css(
-    '../components/Section.scss',
+    'pkg:tgui-styles/components/Section',
     $with: ('background-color': hsla(0, 0%, 0%, 0.1))
   );
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(50, 50%, 90%),
       'color-disabled': hsl(0, 0%, 21%),

tgui/packages/tgui/styles/themes/retro.scss

@@ -25,7 +25,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(48, 38%, 84%),
       'color-disabled': hsl(60, 6%, 28%),
@@ -35,10 +35,10 @@
     )
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': hsla(0, 0%, 0%, 0.5))
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
 
   // Layouts
   @include meta.load-css('../layouts/Layout.scss');

tgui/packages/tgui/styles/themes/spookyconsole.scss

@@ -28,7 +28,7 @@ $updated-bg-map: map.set($updated-bg-map, 'bad', colors.$bad);
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': hsl(345, 96%, 25%),
       'color-disabled': hsl(0, 0%, 21%),
@@ -39,23 +39,23 @@ $updated-bg-map: map.set($updated-bg-map, 'bad', colors.$bad);
     )
   );
   @include meta.load-css(
-    '../components/Dimmer.scss',
+    'pkg:tgui-styles/components/Dimmer',
     $with: ('background-dimness': 0.45)
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': hsl(15, 14%, 26%))
   );
-  @include meta.load-css('../components/Modal.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Modal');
   @include meta.load-css(
-    '../components/NoticeBox.scss',
+    'pkg:tgui-styles/components/NoticeBox',
     $with: ('background-color': hsl(0, 90%, 23%))
   );
-  @include meta.load-css('../components/NumberInput.scss');
-  @include meta.load-css('../components/Section.scss');
-  @include meta.load-css('../components/Table.scss');
+  @include meta.load-css('pkg:tgui-styles/components/NumberInput');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
+  @include meta.load-css('pkg:tgui-styles/components/Table');
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(0, 0%, 0%))
   );
 

tgui/packages/tgui/styles/themes/syndicate.scss

@@ -22,7 +22,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(0, 0%, 21%),
@@ -32,24 +32,24 @@
     )
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': hsl(120, 60%, 70%))
   );
   @include meta.load-css(
-    '../components/NoticeBox.scss',
+    'pkg:tgui-styles/components/NoticeBox',
     $with: ('background-color': hsl(0, 98%, 28%))
   );
   @include meta.load-css(
-    '../components/NumberInput.scss',
+    'pkg:tgui-styles/components/NumberInput',
     $with: ('border-color': hsl(120, 60%, 70%))
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': hsla(0, 0%, 0%, 0.5))
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(0, 96%, 14%))
   );
 

tgui/packages/tgui/styles/themes/wizard.scss

@@ -23,7 +23,7 @@
 
   // Components
   @include meta.load-css(
-    '../components/Button.scss',
+    'pkg:tgui-styles/components/Button',
     $with: (
       'color-default': colors.$primary,
       'color-disabled': hsl(204, 97%, 21%),
@@ -33,24 +33,24 @@
     )
   );
   @include meta.load-css(
-    '../components/Input.scss',
+    'pkg:tgui-styles/components/Input',
     $with: ('border-color': hsl(227, 25%, 34%))
   );
   @include meta.load-css(
-    '../components/NoticeBox.scss',
+    'pkg:tgui-styles/components/NoticeBox',
     $with: ('background-color': hsl(340, 58%, 41%))
   );
   @include meta.load-css(
-    '../components/NumberInput.scss',
+    'pkg:tgui-styles/components/NumberInput',
     $with: ('border-color': hsl(227, 25%, 34%))
   );
   @include meta.load-css(
-    '../components/ProgressBar.scss',
+    'pkg:tgui-styles/components/ProgressBar',
     $with: ('background-color': hsla(0, 0%, 0%, 0.5))
   );
-  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('pkg:tgui-styles/components/Section');
   @include meta.load-css(
-    '../components/Tooltip.scss',
+    'pkg:tgui-styles/components/Tooltip',
     $with: ('background-color': hsl(134, 61%, 42%))
   );
 

tgui/yarn.lock

@@ -18760,6 +18760,7 @@ __metadata:
     tgui: "workspace:*"
     tgui-dev-server: "workspace:*"
     tgui-polyfill: "workspace:*"
+    tgui-styles: "npm:^0.0.10"
   languageName: unknown
   linkType: soft
 
@@ -18785,9 +18786,17 @@ __metadata:
     react-dom: "npm:^18.3.1"
     tgui: "workspace:*"
     tgui-polyfill: "workspace:*"
+    tgui-styles: "npm:^0.0.10"
   languageName: unknown
   linkType: soft
 
+"tgui-styles@npm:^0.0.10":
+  version: 0.0.10
+  resolution: "tgui-styles@npm:0.0.10"
+  checksum: 10c0/90d3c9d891680289e79fd1f44dcf15a0cc956345e0337b2f89a64ceb1c5192da217dd8ac64566731471684b6bb6d3b4fc92ff6a072f9d8138e71d423c94821a6
+  languageName: node
+  linkType: hard
+
 "tgui-workspace@workspace:.":
   version: 0.0.0-use.local
   resolution: "tgui-workspace@workspace:."
@@ -18848,6 +18857,7 @@ __metadata:
     tgui-core: "npm:^1.3.0"
     tgui-dev-server: "workspace:*"
     tgui-polyfill: "workspace:*"
+    tgui-styles: "npm:^0.0.10"
   languageName: unknown
   linkType: soft