x{(material.amount / SHEET_MATERIAL_AMOUNT).toFixed(2)}
diff --git a/tgui/packages/tgui/interfaces/Folder.tsx b/tgui/packages/tgui/interfaces/Folder.tsx
index 5faa9f62f5ceb..69ee8351cd81b 100644
--- a/tgui/packages/tgui/interfaces/Folder.tsx
+++ b/tgui/packages/tgui/interfaces/Folder.tsx
@@ -1,5 +1,6 @@
+import { Box, Button, Section, Stack } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Box, Button, Section, Stack } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/ForceEvent.tsx b/tgui/packages/tgui/interfaces/ForceEvent.tsx
index 4811e2fc20f2c..b8cee3cb2a39c 100644
--- a/tgui/packages/tgui/interfaces/ForceEvent.tsx
+++ b/tgui/packages/tgui/interfaces/ForceEvent.tsx
@@ -1,8 +1,15 @@
import { paginate } from 'common/collections';
-import { BooleanLike } from 'common/react';
+import {
+ Button,
+ Icon,
+ Input,
+ Section,
+ Stack,
+ Tabs,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend, useLocalState } from '../backend';
-import { Button, Icon, Input, Section, Stack, Tabs } from '../components';
import { Window } from '../layouts';
const CATEGORY_PAGE_ITEMS = 4;
diff --git a/tgui/packages/tgui/interfaces/GasAnalyzer.tsx b/tgui/packages/tgui/interfaces/GasAnalyzer.tsx
index d92197887eb43..1528d295e7240 100644
--- a/tgui/packages/tgui/interfaces/GasAnalyzer.tsx
+++ b/tgui/packages/tgui/interfaces/GasAnalyzer.tsx
@@ -1,5 +1,6 @@
+import { Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Section } from '../components';
import { Window } from '../layouts';
import {
AtmosHandbookContent,
diff --git a/tgui/packages/tgui/interfaces/Gateway.jsx b/tgui/packages/tgui/interfaces/Gateway.jsx
index 5c56f3d9eec1d..7c2100829b4d0 100644
--- a/tgui/packages/tgui/interfaces/Gateway.jsx
+++ b/tgui/packages/tgui/interfaces/Gateway.jsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -6,7 +5,9 @@ import {
NoticeBox,
ProgressBar,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
export const Gateway = () => {
diff --git a/tgui/packages/tgui/interfaces/GhostPoolProtection.jsx b/tgui/packages/tgui/interfaces/GhostPoolProtection.jsx
index 8391ac97e044d..c6b415f8e2903 100644
--- a/tgui/packages/tgui/interfaces/GhostPoolProtection.jsx
+++ b/tgui/packages/tgui/interfaces/GhostPoolProtection.jsx
@@ -1,5 +1,6 @@
+import { Button, Flex, NoticeBox, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Flex, NoticeBox, Section } from '../components';
import { Window } from '../layouts';
export const GhostPoolProtection = (props) => {
diff --git a/tgui/packages/tgui/interfaces/GlandDispenser.tsx b/tgui/packages/tgui/interfaces/GlandDispenser.tsx
index 5aa23b0457593..6206089269607 100644
--- a/tgui/packages/tgui/interfaces/GlandDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/GlandDispenser.tsx
@@ -1,5 +1,6 @@
+import { Button, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Section } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/Gps.jsx b/tgui/packages/tgui/interfaces/Gps.jsx
index c12ba6a9efd7e..df751293e11f1 100644
--- a/tgui/packages/tgui/interfaces/Gps.jsx
+++ b/tgui/packages/tgui/interfaces/Gps.jsx
@@ -1,10 +1,17 @@
import { map, sortBy } from 'common/collections';
-import { flow } from 'common/fp';
-import { clamp } from 'common/math';
import { vecLength, vecSubtract } from 'common/vector';
+import {
+ Box,
+ Button,
+ Icon,
+ LabeledList,
+ Section,
+ Table,
+} from 'tgui-core/components';
+import { flow } from 'tgui-core/fp';
+import { clamp } from 'tgui-core/math';
import { useBackend } from '../backend';
-import { Box, Button, Icon, LabeledList, Section, Table } from '../components';
import { Window } from '../layouts';
const coordsToVec = (coords) => map(coords.split(', '), parseFloat);
diff --git a/tgui/packages/tgui/interfaces/GravityGenerator.jsx b/tgui/packages/tgui/interfaces/GravityGenerator.jsx
index fd5a2906225b2..1b96dc5d69616 100644
--- a/tgui/packages/tgui/interfaces/GravityGenerator.jsx
+++ b/tgui/packages/tgui/interfaces/GravityGenerator.jsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -6,7 +5,9 @@ import {
NoticeBox,
ProgressBar,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
export const GravityGenerator = (props) => {
diff --git a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
index 5a988907524e6..2b836cd995179 100644
--- a/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
+++ b/tgui/packages/tgui/interfaces/GreyscaleModifyMenu.tsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -12,7 +11,9 @@ import {
Section,
Stack,
Table,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type ColorEntry = {
diff --git a/tgui/packages/tgui/interfaces/GulagItemReclaimer.tsx b/tgui/packages/tgui/interfaces/GulagItemReclaimer.tsx
index 48b01dfd88506..4cea15f229f7c 100644
--- a/tgui/packages/tgui/interfaces/GulagItemReclaimer.tsx
+++ b/tgui/packages/tgui/interfaces/GulagItemReclaimer.tsx
@@ -1,7 +1,7 @@
-import { BooleanLike } from 'common/react';
+import { Button, NoticeBox, Section, Table } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend } from '../backend';
-import { Button, NoticeBox, Section, Table } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.jsx b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.jsx
index 857ae24173245..8362e1fa82b95 100644
--- a/tgui/packages/tgui/interfaces/GulagTeleporterConsole.jsx
+++ b/tgui/packages/tgui/interfaces/GulagTeleporterConsole.jsx
@@ -1,5 +1,11 @@
+import {
+ Button,
+ LabeledList,
+ NumberInput,
+ Section,
+} from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, LabeledList, NumberInput, Section } from '../components';
import { Window } from '../layouts';
export const GulagTeleporterConsole = (props) => {
diff --git a/tgui/packages/tgui/interfaces/HealthSensor.tsx b/tgui/packages/tgui/interfaces/HealthSensor.tsx
index fbff3aaa1eae0..c6c0e1a549883 100644
--- a/tgui/packages/tgui/interfaces/HealthSensor.tsx
+++ b/tgui/packages/tgui/interfaces/HealthSensor.tsx
@@ -1,7 +1,12 @@
-import { BooleanLike } from 'common/react';
+import {
+ AnimatedNumber,
+ Button,
+ ProgressBar,
+ Section,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend } from '../backend';
-import { AnimatedNumber, Button, ProgressBar, Section } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx b/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx
index 835f94d8a7e1d..5bd8a94c06b2f 100644
--- a/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx
+++ b/tgui/packages/tgui/interfaces/HighLuminosityEyesMenu.tsx
@@ -1,5 +1,3 @@
-import { BooleanLike } from '../../common/react';
-import { useBackend } from '../backend';
import {
Button,
ColorBox,
@@ -7,7 +5,10 @@ import {
LabeledList,
NumberInput,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { BooleanLike } from '../../common/react';
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type EyeColorData = {
diff --git a/tgui/packages/tgui/interfaces/HoloPay.tsx b/tgui/packages/tgui/interfaces/HoloPay.tsx
index c0e3d134c8b31..c8e64f50b8644 100644
--- a/tgui/packages/tgui/interfaces/HoloPay.tsx
+++ b/tgui/packages/tgui/interfaces/HoloPay.tsx
@@ -1,6 +1,4 @@
-import { decodeHtmlEntities } from 'common/string';
import { useState } from 'react';
-import { useBackend } from 'tgui/backend';
import {
Box,
Button,
@@ -13,8 +11,11 @@ import {
Table,
TextArea,
Tooltip,
-} from 'tgui/components';
-import { Window } from 'tgui/layouts';
+} from 'tgui-core/components';
+import { decodeHtmlEntities } from 'tgui-core/string';
+
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
type HoloPayData = {
available_logos: string[];
diff --git a/tgui/packages/tgui/interfaces/Holodeck.jsx b/tgui/packages/tgui/interfaces/Holodeck.jsx
index 7ebff7d574e78..cf81bf04630d3 100644
--- a/tgui/packages/tgui/interfaces/Holodeck.jsx
+++ b/tgui/packages/tgui/interfaces/Holodeck.jsx
@@ -1,5 +1,6 @@
+import { Button, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Section } from '../components';
import { Window } from '../layouts';
export const Holodeck = (props) => {
diff --git a/tgui/packages/tgui/interfaces/Holopad.jsx b/tgui/packages/tgui/interfaces/Holopad.jsx
index 177c5566feb09..6c234c25bfa9f 100644
--- a/tgui/packages/tgui/interfaces/Holopad.jsx
+++ b/tgui/packages/tgui/interfaces/Holopad.jsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -8,7 +7,9 @@ import {
Modal,
NoticeBox,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
export const Holopad = (props) => {
diff --git a/tgui/packages/tgui/interfaces/HotkeysHelp.tsx b/tgui/packages/tgui/interfaces/HotkeysHelp.tsx
index 7f4a5f95e951c..96beb2aa10c08 100644
--- a/tgui/packages/tgui/interfaces/HotkeysHelp.tsx
+++ b/tgui/packages/tgui/interfaces/HotkeysHelp.tsx
@@ -1,5 +1,6 @@
+import { Box, Section, Table, Tooltip } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Box, Section, Table, Tooltip } from '../components';
import { Window } from '../layouts';
type BindingInfo = {
diff --git a/tgui/packages/tgui/interfaces/HypnoChair.jsx b/tgui/packages/tgui/interfaces/HypnoChair.jsx
index 671cd16aa73c2..51ddf7f5064b6 100644
--- a/tgui/packages/tgui/interfaces/HypnoChair.jsx
+++ b/tgui/packages/tgui/interfaces/HypnoChair.jsx
@@ -1,5 +1,12 @@
+import {
+ Button,
+ Icon,
+ Input,
+ LabeledList,
+ Section,
+} from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Icon, Input, LabeledList, Section } from '../components';
import { Window } from '../layouts';
export const HypnoChair = (props) => {
diff --git a/tgui/packages/tgui/interfaces/IVDrip.tsx b/tgui/packages/tgui/interfaces/IVDrip.tsx
index 4254f53fa549b..8807ca7cd7f10 100644
--- a/tgui/packages/tgui/interfaces/IVDrip.tsx
+++ b/tgui/packages/tgui/interfaces/IVDrip.tsx
@@ -1,6 +1,3 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +7,10 @@ import {
Section,
Slider,
Tooltip,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type IVDripData = {
diff --git a/tgui/packages/tgui/interfaces/ImplantChair.jsx b/tgui/packages/tgui/interfaces/ImplantChair.jsx
index 44d5f3a17240d..bb45f02a8bd6d 100644
--- a/tgui/packages/tgui/interfaces/ImplantChair.jsx
+++ b/tgui/packages/tgui/interfaces/ImplantChair.jsx
@@ -1,5 +1,6 @@
+import { Button, Icon, LabeledList, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Icon, LabeledList, Section } from '../components';
import { Window } from '../layouts';
export const ImplantChair = (props) => {
diff --git a/tgui/packages/tgui/interfaces/ImplantPad.tsx b/tgui/packages/tgui/interfaces/ImplantPad.tsx
index 90ec17261f613..ec5bf47d04240 100644
--- a/tgui/packages/tgui/interfaces/ImplantPad.tsx
+++ b/tgui/packages/tgui/interfaces/ImplantPad.tsx
@@ -1,6 +1,7 @@
+import { Box, Button, Divider, Flex } from 'tgui-core/components';
+
import { BooleanLike } from '../../common/react';
import { useBackend } from '../backend';
-import { Box, Button, Divider, Flex } from '../components';
import { Window } from '../layouts';
import { sanitizeText } from '../sanitize';
diff --git a/tgui/packages/tgui/interfaces/InfraredEmitter.tsx b/tgui/packages/tgui/interfaces/InfraredEmitter.tsx
index 24aad262f893f..ae2748c4ebc4c 100644
--- a/tgui/packages/tgui/interfaces/InfraredEmitter.tsx
+++ b/tgui/packages/tgui/interfaces/InfraredEmitter.tsx
@@ -1,7 +1,7 @@
-import { BooleanLike } from 'common/react';
+import { Button, LabeledList, Section } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend } from '../backend';
-import { Button, LabeledList, Section } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/InfuserBook.tsx b/tgui/packages/tgui/interfaces/InfuserBook.tsx
index 70169b44651de..d4091ae421860 100644
--- a/tgui/packages/tgui/interfaces/InfuserBook.tsx
+++ b/tgui/packages/tgui/interfaces/InfuserBook.tsx
@@ -1,8 +1,15 @@
import { paginate, range } from 'common/collections';
import { useState } from 'react';
+import {
+ BlockQuote,
+ Box,
+ Button,
+ Section,
+ Stack,
+ Tabs,
+} from 'tgui-core/components';
import { useBackend } from '../backend';
-import { BlockQuote, Box, Button, Section, Stack, Tabs } from '../components';
import { Window } from '../layouts';
type Entry = {
diff --git a/tgui/packages/tgui/interfaces/InstrumentEditor.tsx b/tgui/packages/tgui/interfaces/InstrumentEditor.tsx
index 0afbff0a967bb..594ebbcaff2f7 100644
--- a/tgui/packages/tgui/interfaces/InstrumentEditor.tsx
+++ b/tgui/packages/tgui/interfaces/InstrumentEditor.tsx
@@ -1,6 +1,3 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +7,10 @@ import {
NumberInput,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/Intellicard.jsx b/tgui/packages/tgui/interfaces/Intellicard.jsx
index ed172df03d001..4bca0486d6a8a 100644
--- a/tgui/packages/tgui/interfaces/Intellicard.jsx
+++ b/tgui/packages/tgui/interfaces/Intellicard.jsx
@@ -1,11 +1,12 @@
-import { useBackend } from '../backend';
import {
BlockQuote,
Button,
LabeledList,
ProgressBar,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
export const Intellicard = (props) => {
diff --git a/tgui/packages/tgui/interfaces/Interview.tsx b/tgui/packages/tgui/interfaces/Interview.tsx
index 3f53a177c980f..a02e578e00755 100644
--- a/tgui/packages/tgui/interfaces/Interview.tsx
+++ b/tgui/packages/tgui/interfaces/Interview.tsx
@@ -1,6 +1,4 @@
import { ReactNode, useState } from 'react';
-
-import { useBackend } from '../backend';
import {
BlockQuote,
Box,
@@ -8,7 +6,9 @@ import {
NoticeBox,
Section,
TextArea,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/InterviewManager.jsx b/tgui/packages/tgui/interfaces/InterviewManager.jsx
index 0e92d662f3f50..d2e6d0fb85b06 100644
--- a/tgui/packages/tgui/interfaces/InterviewManager.jsx
+++ b/tgui/packages/tgui/interfaces/InterviewManager.jsx
@@ -1,5 +1,6 @@
+import { Button, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Section } from '../components';
import { Window } from '../layouts';
export const InterviewManager = (props) => {
diff --git a/tgui/packages/tgui/interfaces/JobSelection.tsx b/tgui/packages/tgui/interfaces/JobSelection.tsx
index 44f7c8194f70a..e598ef37f7fe5 100644
--- a/tgui/packages/tgui/interfaces/JobSelection.tsx
+++ b/tgui/packages/tgui/interfaces/JobSelection.tsx
@@ -1,8 +1,5 @@
import { deepMerge } from 'common/collections';
-import { Color } from 'common/color';
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
+import { Color } from 'tgui-core/color';
import {
Box,
Button,
@@ -10,7 +7,10 @@ import {
NoticeBox,
Stack,
StyleableSection,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
import { JOB2ICON } from './common/JobToIcon';
diff --git a/tgui/packages/tgui/interfaces/Jukebox.tsx b/tgui/packages/tgui/interfaces/Jukebox.tsx
index fe9eb054aef66..dd4155b0f466b 100644
--- a/tgui/packages/tgui/interfaces/Jukebox.tsx
+++ b/tgui/packages/tgui/interfaces/Jukebox.tsx
@@ -1,7 +1,4 @@
import { sortBy } from 'common/collections';
-
-import { BooleanLike } from '../../common/react';
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +7,10 @@ import {
LabeledControls,
LabeledList,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { BooleanLike } from '../../common/react';
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Song = {
diff --git a/tgui/packages/tgui/interfaces/KeyComboModal.tsx b/tgui/packages/tgui/interfaces/KeyComboModal.tsx
index 0340ae811cd77..e5368292e2e16 100644
--- a/tgui/packages/tgui/interfaces/KeyComboModal.tsx
+++ b/tgui/packages/tgui/interfaces/KeyComboModal.tsx
@@ -1,8 +1,8 @@
-import { isEscape, KEY } from 'common/keys';
import { useState } from 'react';
+import { Autofocus, Box, Button, Section, Stack } from 'tgui-core/components';
+import { isEscape, KEY } from 'tgui-core/keys';
import { useBackend, useLocalState } from '../backend';
-import { Autofocus, Box, Button, Section, Stack } from '../components';
import { Window } from '../layouts';
import { InputButtons } from './common/InputButtons';
import { Loader } from './common/Loader';
diff --git a/tgui/packages/tgui/interfaces/KeycardAuth.jsx b/tgui/packages/tgui/interfaces/KeycardAuth.jsx
index b29ac9de75e9a..b0d88d37735a7 100644
--- a/tgui/packages/tgui/interfaces/KeycardAuth.jsx
+++ b/tgui/packages/tgui/interfaces/KeycardAuth.jsx
@@ -1,5 +1,6 @@
+import { Box, Button, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Box, Button, Section } from '../components';
import { Window } from '../layouts';
export const KeycardAuth = (props) => {
diff --git a/tgui/packages/tgui/interfaces/LTSRBT.tsx b/tgui/packages/tgui/interfaces/LTSRBT.tsx
index d8c399d2705a8..48e2941b53f86 100644
--- a/tgui/packages/tgui/interfaces/LTSRBT.tsx
+++ b/tgui/packages/tgui/interfaces/LTSRBT.tsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Button,
Image,
@@ -7,7 +6,9 @@ import {
Section,
Stack,
TextArea,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/LaborClaimConsole.jsx b/tgui/packages/tgui/interfaces/LaborClaimConsole.jsx
index 4e0aebdcdd5bb..0cd5f6823615e 100644
--- a/tgui/packages/tgui/interfaces/LaborClaimConsole.jsx
+++ b/tgui/packages/tgui/interfaces/LaborClaimConsole.jsx
@@ -1,7 +1,6 @@
-import { toTitleCase } from 'common/string';
+import { Button, LabeledList, Section } from 'tgui-core/components';
import { useBackend } from '../backend';
-import { Box, Button, LabeledList, Section, Table } from '../components';
import { Window } from '../layouts';
export const LaborClaimConsole = (props) => {
@@ -40,8 +39,8 @@ export const LaborClaimConsole = (props) => {
materials, points will be calculated based on volume of delivered
materials.
- Please note that only sheets printed with our manufacturer's seal of
- quality, such as those produced from the work camp furnace, will be
+ Please note that only sheets printed with our manufacturer's seal
+ of quality, such as those produced from the work camp furnace, will be
accepted as proof of labour.
diff --git a/tgui/packages/tgui/interfaces/LanguageMenu.jsx b/tgui/packages/tgui/interfaces/LanguageMenu.jsx
index fc5a43feb6133..404ac8484ef99 100644
--- a/tgui/packages/tgui/interfaces/LanguageMenu.jsx
+++ b/tgui/packages/tgui/interfaces/LanguageMenu.jsx
@@ -1,5 +1,6 @@
+import { Button, LabeledList, Section } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, LabeledList, Section } from '../components';
import { Window } from '../layouts';
export const LanguageMenu = (props) => {
diff --git a/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx b/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx
index fdad995589449..e584a9deed0ce 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx
+++ b/tgui/packages/tgui/interfaces/LaunchpadConsole.tsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -9,7 +8,9 @@ import {
Section,
Stack,
Tabs,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/LaunchpadRemote.tsx b/tgui/packages/tgui/interfaces/LaunchpadRemote.tsx
index 5e7d1ba8516b4..8dfa89318eda5 100644
--- a/tgui/packages/tgui/interfaces/LaunchpadRemote.tsx
+++ b/tgui/packages/tgui/interfaces/LaunchpadRemote.tsx
@@ -1,7 +1,7 @@
-import { BooleanLike } from 'common/react';
+import { NoticeBox } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend } from '../backend';
-import { NoticeBox } from '../components';
import { Window } from '../layouts';
import { LaunchpadControl } from './LaunchpadConsole';
diff --git a/tgui/packages/tgui/interfaces/Lawpanel.tsx b/tgui/packages/tgui/interfaces/Lawpanel.tsx
index 3ce64868ff8aa..7d72c527ab25a 100644
--- a/tgui/packages/tgui/interfaces/Lawpanel.tsx
+++ b/tgui/packages/tgui/interfaces/Lawpanel.tsx
@@ -1,6 +1,3 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
import {
Button,
Collapsible,
@@ -11,7 +8,10 @@ import {
NoticeBox,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
const lawtype_to_color = {
diff --git a/tgui/packages/tgui/interfaces/LibraryAdmin.tsx b/tgui/packages/tgui/interfaces/LibraryAdmin.tsx
index fd88fdc48fb2f..5e9ead80a6054 100644
--- a/tgui/packages/tgui/interfaces/LibraryAdmin.tsx
+++ b/tgui/packages/tgui/interfaces/LibraryAdmin.tsx
@@ -1,8 +1,5 @@
import { map, sortBy } from 'common/collections';
-import { capitalize } from 'common/string';
import { useState } from 'react';
-
-import { useBackend, useLocalState } from '../backend';
import {
Box,
Button,
@@ -13,7 +10,10 @@ import {
Stack,
Table,
TextArea,
-} from '../components';
+} from 'tgui-core/components';
+import { capitalize } from 'tgui-core/string';
+
+import { useBackend, useLocalState } from '../backend';
import { Window } from '../layouts';
import { PageSelect } from './LibraryConsole';
diff --git a/tgui/packages/tgui/interfaces/LibraryConsole.jsx b/tgui/packages/tgui/interfaces/LibraryConsole.jsx
index de10b3a2e86b0..87d87f9bac84f 100644
--- a/tgui/packages/tgui/interfaces/LibraryConsole.jsx
+++ b/tgui/packages/tgui/interfaces/LibraryConsole.jsx
@@ -1,8 +1,5 @@
import { map, sortBy } from 'common/collections';
-import { classes } from 'common/react';
import { useState } from 'react';
-
-import { useBackend, useLocalState } from '../backend';
import {
Box,
Button,
@@ -16,7 +13,10 @@ import {
Section,
Stack,
Table,
-} from '../components';
+} from 'tgui-core/components';
+import { classes } from 'tgui-core/react';
+
+import { useBackend, useLocalState } from '../backend';
import { Window } from '../layouts';
import { sanitizeText } from '../sanitize';
diff --git a/tgui/packages/tgui/interfaces/LibraryScanner.jsx b/tgui/packages/tgui/interfaces/LibraryScanner.jsx
index efa7156abfbee..3f06b7b3ab36f 100644
--- a/tgui/packages/tgui/interfaces/LibraryScanner.jsx
+++ b/tgui/packages/tgui/interfaces/LibraryScanner.jsx
@@ -1,5 +1,6 @@
+import { Button, NoticeBox, Section, Stack } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, NoticeBox, Section, Stack } from '../components';
import { Window } from '../layouts';
export const LibraryScanner = (props) => {
diff --git a/tgui/packages/tgui/interfaces/LibraryVisitor.jsx b/tgui/packages/tgui/interfaces/LibraryVisitor.jsx
index cb27e42704d98..50ea9bad108c0 100644
--- a/tgui/packages/tgui/interfaces/LibraryVisitor.jsx
+++ b/tgui/packages/tgui/interfaces/LibraryVisitor.jsx
@@ -1,6 +1,4 @@
import { map, sortBy } from 'common/collections';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +8,9 @@ import {
Section,
Stack,
Table,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
import { PageSelect } from './LibraryConsole';
diff --git a/tgui/packages/tgui/interfaces/LightController.tsx b/tgui/packages/tgui/interfaces/LightController.tsx
index 810b644f90f6b..e65104fd9c5a1 100644
--- a/tgui/packages/tgui/interfaces/LightController.tsx
+++ b/tgui/packages/tgui/interfaces/LightController.tsx
@@ -1,9 +1,17 @@
import { useState } from 'react';
+import {
+ Box,
+ Button,
+ Knob,
+ Section,
+ Slider,
+ Stack,
+ Tabs,
+} from 'tgui-core/components';
import { round } from '../../common/math';
import { BooleanLike, classes } from '../../common/react';
import { useBackend } from '../backend';
-import { Box, Button, Knob, Section, Slider, Stack, Tabs } from '../components';
import { Window } from '../layouts';
enum Direction {
diff --git a/tgui/packages/tgui/interfaces/LightSpawn.tsx b/tgui/packages/tgui/interfaces/LightSpawn.tsx
index 68e3430d8178e..75c1f2cf07d6c 100644
--- a/tgui/packages/tgui/interfaces/LightSpawn.tsx
+++ b/tgui/packages/tgui/interfaces/LightSpawn.tsx
@@ -1,8 +1,16 @@
import { useState } from 'react';
+import {
+ Box,
+ Button,
+ Knob,
+ Section,
+ Slider,
+ Stack,
+ Tabs,
+} from 'tgui-core/components';
import { classes } from '../../common/react';
import { useBackend, useLocalState } from '../backend';
-import { Box, Button, Knob, Section, Slider, Stack, Tabs } from '../components';
import { Window } from '../layouts';
enum Direction {
diff --git a/tgui/packages/tgui/interfaces/Limbgrower.jsx b/tgui/packages/tgui/interfaces/Limbgrower.jsx
index 363b416f12fde..8ee02d086b78e 100644
--- a/tgui/packages/tgui/interfaces/Limbgrower.jsx
+++ b/tgui/packages/tgui/interfaces/Limbgrower.jsx
@@ -1,4 +1,3 @@
-import { useBackend, useSharedState } from '../backend';
import {
Box,
Button,
@@ -7,7 +6,9 @@ import {
LabeledList,
Section,
Tabs,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useSharedState } from '../backend';
import { Window } from '../layouts';
export const Limbgrower = (props) => {
diff --git a/tgui/packages/tgui/interfaces/LingMMITalk.tsx b/tgui/packages/tgui/interfaces/LingMMITalk.tsx
index 9f4effb2e663a..fc1f0da7c9e80 100644
--- a/tgui/packages/tgui/interfaces/LingMMITalk.tsx
+++ b/tgui/packages/tgui/interfaces/LingMMITalk.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
+import { Button, ByondUi, Stack, TextArea } from 'tgui-core/components';
import { useBackend } from '../backend';
-import { Button, ByondUi, Stack, TextArea } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/LockedSafe.tsx b/tgui/packages/tgui/interfaces/LockedSafe.tsx
index ba8d6bc966140..77d042912afe1 100644
--- a/tgui/packages/tgui/interfaces/LockedSafe.tsx
+++ b/tgui/packages/tgui/interfaces/LockedSafe.tsx
@@ -1,7 +1,7 @@
-import { BooleanLike } from 'common/react';
+import { Box, Flex } from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend } from '../backend';
-import { Box, Flex } from '../components';
import { Window } from '../layouts';
import { NukeKeypad } from './NuclearBomb';
diff --git a/tgui/packages/tgui/interfaces/LogViewer.tsx b/tgui/packages/tgui/interfaces/LogViewer.tsx
index ffdd18a730fe1..0fe5daf5ec783 100644
--- a/tgui/packages/tgui/interfaces/LogViewer.tsx
+++ b/tgui/packages/tgui/interfaces/LogViewer.tsx
@@ -1,6 +1,4 @@
import { useState } from 'react';
-
-import { useBackend } from '../backend';
import {
Button,
Collapsible,
@@ -8,7 +6,9 @@ import {
NoticeBox,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type LogViewerData = {
diff --git a/tgui/packages/tgui/interfaces/MODpaint.jsx b/tgui/packages/tgui/interfaces/MODpaint.jsx
index 7a047b384260c..0d9a56e459eb5 100644
--- a/tgui/packages/tgui/interfaces/MODpaint.jsx
+++ b/tgui/packages/tgui/interfaces/MODpaint.jsx
@@ -1,6 +1,3 @@
-import { capitalize } from 'common/string';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -9,7 +6,10 @@ import {
Section,
Slider,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { capitalize } from 'tgui-core/string';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
const colorToMatrix = (param) => {
diff --git a/tgui/packages/tgui/interfaces/MODsuit.tsx b/tgui/packages/tgui/interfaces/MODsuit.tsx
index 11d1e294824aa..d2b96a7735c0f 100644
--- a/tgui/packages/tgui/interfaces/MODsuit.tsx
+++ b/tgui/packages/tgui/interfaces/MODsuit.tsx
@@ -1,7 +1,4 @@
-import { BooleanLike } from 'common/react';
import { useState } from 'react';
-
-import { useBackend } from '../backend';
import {
AnimatedNumber,
Box,
@@ -18,32 +15,39 @@ import {
Section,
Stack,
Table,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { formatSiUnit } from '../format';
import { Window } from '../layouts';
type MODsuitData = {
// Static
ui_theme: string;
- control: string;
complexity_max: number;
- parts: PartData[];
// Dynamic
suit_status: SuitStatus;
user_status: UserStatus;
module_custom_status: ModuleCustomStatus;
module_info: Module[];
+ control: string;
+ parts: PartData[];
};
type PartData = {
slot: string;
name: string;
+ deployed: BooleanLike;
+ ref: string;
};
type SuitStatus = {
core_name: string;
- cell_charge_current: number;
- cell_charge_max: number;
+ charge_current: number;
+ charge_max: number;
+ chargebar_color: string;
+ chargebar_string: string;
active: BooleanLike;
open: BooleanLike;
seconds_electrified: number;
@@ -53,8 +57,8 @@ type SuitStatus = {
complexity: number;
selected_module: string;
ai_name: string;
- has_pai: boolean;
- is_ai: boolean;
+ has_pai: BooleanLike;
+ is_ai: BooleanLike;
link_id: string;
link_freq: string;
link_call: string;
@@ -257,6 +261,20 @@ const ConfigurePinEntry = (props) => {
);
};
+// fuck u smartkar configs werent meant to be used as actions 🖕🖕🖕
+// and really u couldnt be bothered to make this and instead used
+// the pin entry? 🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕🖕
+const ConfigureButtonEntry = (props) => {
+ const { name, value, module_ref } = props;
+ const { act } = useBackend();
+ return (
+
act('configure', { key: name, ref: module_ref })}
+ icon={value}
+ />
+ );
+};
+
const ConfigureDataEntry = (props) => {
const { name, display_name, type, value, values, module_ref } = props;
const configureEntryTypes = {
@@ -264,6 +282,7 @@ const ConfigureDataEntry = (props) => {
bool: ();
const {
- core_name,
- cell_charge_current,
- cell_charge_max,
+ charge_current,
+ charge_max,
+ chargebar_color,
+ chargebar_string,
active,
open,
seconds_electrified,
@@ -368,9 +388,6 @@ const SuitStatusSection = (props) => {
: active
? 'Active'
: 'Inactive';
- const charge_percent = Math.round(
- (100 * cell_charge_current) / cell_charge_max,
- );
return (
{
- {!core_name
- ? 'No Core Detected'
- : cell_charge_max === 1
- ? 'Power Cell Missing'
- : cell_charge_current === 1e31
- ? 'Infinite'
- : `${formatSiUnit(
- cell_charge_current,
- 0,
- 'J',
- )} of ${formatSiUnit(
- cell_charge_max,
- 0,
- 'J',
- )} (${charge_percent}%)`}
+ {chargebar_string}
@@ -484,14 +483,14 @@ const HardwareSection = (props) => {
return (
-
- {ai_name || 'No AI Detected'}
-
+ {control}
{core_name || 'No Core Detected'}
- {control}
+ {ai_name || 'No AI Detected'}
+
);
@@ -504,7 +503,18 @@ const ModParts = (props) => {
<>
{parts.map((part) => {
return (
-
+ act('deploy', { ref: part.ref })}
+ />
+ }
+ >
{part.name}
);
diff --git a/tgui/packages/tgui/interfaces/MafiaPanel.tsx b/tgui/packages/tgui/interfaces/MafiaPanel.tsx
index 179ef4d38094c..2044c6609bd52 100644
--- a/tgui/packages/tgui/interfaces/MafiaPanel.tsx
+++ b/tgui/packages/tgui/interfaces/MafiaPanel.tsx
@@ -1,8 +1,4 @@
-import { BooleanLike, classes } from 'common/react';
-import { decodeHtmlEntities } from 'common/string';
import { useState } from 'react';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -13,7 +9,11 @@ import {
Stack,
Tabs,
TextArea,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike, classes } from 'tgui-core/react';
+import { decodeHtmlEntities } from 'tgui-core/string';
+
+import { useBackend } from '../backend';
import { formatTime } from '../format';
import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/ManufacturingSorter.tsx b/tgui/packages/tgui/interfaces/ManufacturingSorter.tsx
index 9ae38a3e5b616..ffebb2d61aa8f 100644
--- a/tgui/packages/tgui/interfaces/ManufacturingSorter.tsx
+++ b/tgui/packages/tgui/interfaces/ManufacturingSorter.tsx
@@ -1,7 +1,14 @@
-import { BooleanLike } from 'common/react';
+import {
+ Box,
+ Button,
+ Icon,
+ LabeledList,
+ Section,
+ Stack,
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
import { useBackend } from '../backend';
-import { Box, Button, Icon, LabeledList, Section, Stack } from '../components';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/MassDriverControl.jsx b/tgui/packages/tgui/interfaces/MassDriverControl.jsx
index adcd246109314..b19b5962a9164 100644
--- a/tgui/packages/tgui/interfaces/MassDriverControl.jsx
+++ b/tgui/packages/tgui/interfaces/MassDriverControl.jsx
@@ -1,5 +1,12 @@
+import {
+ Box,
+ Button,
+ LabeledList,
+ NumberInput,
+ Section,
+} from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Box, Button, LabeledList, NumberInput, Section } from '../components';
import { Window } from '../layouts';
export const MassDriverControl = (props) => {
diff --git a/tgui/packages/tgui/interfaces/MassSpec.tsx b/tgui/packages/tgui/interfaces/MassSpec.tsx
index a6074ce95d57e..f2f212c241192 100644
--- a/tgui/packages/tgui/interfaces/MassSpec.tsx
+++ b/tgui/packages/tgui/interfaces/MassSpec.tsx
@@ -1,7 +1,3 @@
-import { round } from 'common/math';
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +6,11 @@ import {
Section,
Slider,
Table,
-} from '../components';
+} from 'tgui-core/components';
+import { round } from 'tgui-core/math';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Reagent = {
@@ -403,7 +403,7 @@ const MassSpectroscopy = (props: SpectroscopyProps) => {
step={graphUpperRange / base_width}
suppressFlicker
height={17.2}
- format={(value: number) => round(value, 2)}
+ format={(value: number) => round(value, 2).toString()}
width={(centerValue / graphUpperRange) * base_width + 'px'}
value={lowerRange}
minValue={graphLowerRange}
@@ -418,7 +418,7 @@ const MassSpectroscopy = (props: SpectroscopyProps) => {
round(value, 2)}
+ format={(value: number) => round(value, 2).toString()}
step={graphUpperRange / base_width}
width={base_width - (centerValue / graphUpperRange) * base_width + 'px'}
value={upperRange}
@@ -437,7 +437,7 @@ const MassSpectroscopy = (props: SpectroscopyProps) => {
mt={1.2}
value={centerValue}
height={1.9}
- format={(value: number) => round(value, 2)}
+ format={(value: number) => round(value, 2).toString()}
width={base_width + 'px'}
minValue={graphLowerRange + 1}
maxValue={graphUpperRange - 1}
diff --git a/tgui/packages/tgui/interfaces/MatMarket.tsx b/tgui/packages/tgui/interfaces/MatMarket.tsx
index d793b8501f0b4..5dccaf99bef01 100644
--- a/tgui/packages/tgui/interfaces/MatMarket.tsx
+++ b/tgui/packages/tgui/interfaces/MatMarket.tsx
@@ -1,8 +1,4 @@
import { sortBy } from 'common/collections';
-import { BooleanLike } from 'common/react';
-import { toTitleCase } from 'common/string';
-
-import { useBackend } from '../backend';
import {
Button,
Collapsible,
@@ -10,7 +6,11 @@ import {
NoticeBox,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+import { toTitleCase } from 'tgui-core/string';
+
+import { useBackend } from '../backend';
import { formatMoney } from '../format';
import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/MatrixMathTester.tsx b/tgui/packages/tgui/interfaces/MatrixMathTester.tsx
index 118c891c6ae89..2cf28e24acf1e 100644
--- a/tgui/packages/tgui/interfaces/MatrixMathTester.tsx
+++ b/tgui/packages/tgui/interfaces/MatrixMathTester.tsx
@@ -1,8 +1,14 @@
-import { toFixed } from 'common/math';
import { useState } from 'react';
+import {
+ Button,
+ Input,
+ NumberInput,
+ Section,
+ Table,
+} from 'tgui-core/components';
+import { toFixed } from 'tgui-core/math';
import { useBackend } from '../backend';
-import { Button, Input, NumberInput, Section, Table } from '../components';
import { Window } from '../layouts';
const MatrixMathTesterInput = (props: { value: number; varName: string }) => {
diff --git a/tgui/packages/tgui/interfaces/MechBayPowerConsole.jsx b/tgui/packages/tgui/interfaces/MechBayPowerConsole.jsx
index 3c56bcab7ddc4..323241e0d9520 100644
--- a/tgui/packages/tgui/interfaces/MechBayPowerConsole.jsx
+++ b/tgui/packages/tgui/interfaces/MechBayPowerConsole.jsx
@@ -1,11 +1,12 @@
-import { useBackend } from '../backend';
import {
Button,
LabeledList,
NoticeBox,
ProgressBar,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { formatEnergy } from '../format';
import { Window } from '../layouts';
diff --git a/tgui/packages/tgui/interfaces/MechpadConsole.jsx b/tgui/packages/tgui/interfaces/MechpadConsole.jsx
index 938fcbe464ee5..aac7c77c80aed 100644
--- a/tgui/packages/tgui/interfaces/MechpadConsole.jsx
+++ b/tgui/packages/tgui/interfaces/MechpadConsole.jsx
@@ -1,4 +1,3 @@
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -7,7 +6,9 @@ import {
Input,
NoticeBox,
Section,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
export const MechpadControl = (props) => {
diff --git a/tgui/packages/tgui/interfaces/MedicalKiosk.jsx b/tgui/packages/tgui/interfaces/MedicalKiosk.jsx
index 9ca231dd64534..15708faa787ca 100644
--- a/tgui/packages/tgui/interfaces/MedicalKiosk.jsx
+++ b/tgui/packages/tgui/interfaces/MedicalKiosk.jsx
@@ -1,4 +1,3 @@
-import { useBackend, useSharedState } from '../backend';
import {
AnimatedNumber,
Box,
@@ -9,7 +8,9 @@ import {
ProgressBar,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+
+import { useBackend, useSharedState } from '../backend';
import { Window } from '../layouts';
export const MedicalKiosk = (props) => {
diff --git a/tgui/packages/tgui/interfaces/MemoryPanel.jsx b/tgui/packages/tgui/interfaces/MemoryPanel.jsx
index 83a846c2a34f1..26b2eb0d0511a 100644
--- a/tgui/packages/tgui/interfaces/MemoryPanel.jsx
+++ b/tgui/packages/tgui/interfaces/MemoryPanel.jsx
@@ -1,5 +1,6 @@
+import { Button, Dimmer, Section, Stack } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Dimmer, Section, Stack } from '../components';
import { Window } from '../layouts';
const STORY_VALUE_KEY = -1;
diff --git a/tgui/packages/tgui/interfaces/MessageMonitor.tsx b/tgui/packages/tgui/interfaces/MessageMonitor.tsx
index fb237bb786d4d..ed470c6cef2be 100644
--- a/tgui/packages/tgui/interfaces/MessageMonitor.tsx
+++ b/tgui/packages/tgui/interfaces/MessageMonitor.tsx
@@ -1,7 +1,4 @@
-import { BooleanLike } from 'common/react';
import { Dispatch, SetStateAction, useState } from 'react';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +7,10 @@ import {
Section,
Stack,
Table,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
enum Screen {
diff --git a/tgui/packages/tgui/interfaces/Microscope.tsx b/tgui/packages/tgui/interfaces/Microscope.tsx
index 44aa7d2b660b0..dd01d2b7a584a 100644
--- a/tgui/packages/tgui/interfaces/Microscope.tsx
+++ b/tgui/packages/tgui/interfaces/Microscope.tsx
@@ -1,6 +1,3 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
import {
Box,
Button,
@@ -10,7 +7,10 @@ import {
NoticeBox,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/MineBot.tsx b/tgui/packages/tgui/interfaces/MineBot.tsx
index 9118562cdd0fc..a583b13da72a3 100644
--- a/tgui/packages/tgui/interfaces/MineBot.tsx
+++ b/tgui/packages/tgui/interfaces/MineBot.tsx
@@ -1,7 +1,4 @@
-import { BooleanLike } from 'common/react';
import { useState } from 'react';
-
-import { useBackend } from '../backend';
import {
Button,
Dropdown,
@@ -11,7 +8,10 @@ import {
ProgressBar,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type Data = {
diff --git a/tgui/packages/tgui/interfaces/MinigamesMenu.tsx b/tgui/packages/tgui/interfaces/MinigamesMenu.tsx
index 32aab73f90430..e39c3812a4758 100644
--- a/tgui/packages/tgui/interfaces/MinigamesMenu.tsx
+++ b/tgui/packages/tgui/interfaces/MinigamesMenu.tsx
@@ -1,5 +1,6 @@
+import { Button, Divider, Section, Stack } from 'tgui-core/components';
+
import { useBackend } from '../backend';
-import { Button, Divider, Section, Stack } from '../components';
import { Window } from '../layouts';
export const MinigamesMenu = (props) => {
diff --git a/tgui/packages/tgui/interfaces/ModularShieldGen.tsx b/tgui/packages/tgui/interfaces/ModularShieldGen.tsx
index 2ac07fa63c76f..fb9e7d07736fa 100644
--- a/tgui/packages/tgui/interfaces/ModularShieldGen.tsx
+++ b/tgui/packages/tgui/interfaces/ModularShieldGen.tsx
@@ -1,6 +1,3 @@
-import { BooleanLike } from 'common/react';
-
-import { useBackend } from '../backend';
import {
Button,
LabeledList,
@@ -8,7 +5,10 @@ import {
ProgressBar,
Section,
Stack,
-} from '../components';
+} from 'tgui-core/components';
+import { BooleanLike } from 'tgui-core/react';
+
+import { useBackend } from '../backend';
import { Window } from '../layouts';
type ModularShieldGenData = {
@@ -25,7 +25,6 @@ type ModularShieldGenData = {
};
export const ModularShieldGen = (props) => {
- const { topLevel } = props;
const { act, data } = useBackend();
const {
max_strength,
@@ -50,7 +49,6 @@ export const ModularShieldGen = (props) => {
color={recovering ? 'red' : 'white'}
>
{
{
{
@@ -58,7 +62,13 @@ export const OreContainer = (props) => {
-
();
- const { ore_images = [] } = data;
- const { ore } = props;
-
- let icon_display = ore_images.find((icon) => icon.name === ore.name);
-
- if (!icon_display) {
- return null;
- }
-
- return (
-
{!compact && (
-
)}
diff --git a/tgui/packages/tgui/interfaces/ProduceConsole.tsx b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
index 686b194abea8c..b13fda8af077c 100644
--- a/tgui/packages/tgui/interfaces/ProduceConsole.tsx
+++ b/tgui/packages/tgui/interfaces/ProduceConsole.tsx
@@ -8,8 +8,8 @@ import {
Button,
Dimmer,
Divider,
+ DmIcon,
Icon,
- Image,
Input,
NumberInput,
Section,
@@ -26,7 +26,8 @@ type OrderDatum = {
cat: string;
ref: string;
cost: number;
- product_icon: string;
+ icon: string;
+ icon_state: string;
};
type Item = {
@@ -127,13 +128,13 @@ const ShoppingTab = (props) => {
/>{' '}
{!condensed && (
-
)}
diff --git a/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx b/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
index 3bfe22f816479..46b58c4e381bd 100644
--- a/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
+++ b/tgui/packages/tgui/interfaces/RapidPipeDispenser.tsx
@@ -48,29 +48,6 @@ const TOOLS = [
},
];
-const LAYERS = [
- {
- name: '1',
- bitmask: 1,
- },
- {
- name: '2',
- bitmask: 2,
- },
- {
- name: '3',
- bitmask: 4,
- },
- {
- name: '4',
- bitmask: 8,
- },
- {
- name: '5',
- bitmask: 16,
- },
-] as const;
-
type DirectionsAllowed = {
north: BooleanLike;
south: BooleanLike;
@@ -113,19 +90,19 @@ type Preview = {
};
type Data = {
+ // Static
+ paint_colors: Colors;
+ max_pipe_layers: number;
// Dynamic
category: number;
pipe_layers: number;
multi_layer: BooleanLike;
- ducting_layer: number;
categories: Category[];
selected_recipe: string;
selected_color: string;
selected_category: string;
mode: number;
init_directions: DirectionsAllowed;
- // Static
- paint_colors: Colors;
};
export const ColorItem = (props) => {
@@ -168,13 +145,14 @@ const ModeItem = (props) => {
act('mode', {
mode: tool.bitmask,
})
}
- />
+ >
+ {tool.name}
+
))}
);
@@ -201,7 +179,7 @@ const CategoryItem = (props) => {
};
const SelectionSection = (props) => {
- const { act, data } = useBackend();
+ const { data } = useBackend();
const { category: rootCategoryIndex } = data;
return (
@@ -217,37 +195,46 @@ const SelectionSection = (props) => {
const LayerSelect = (props) => {
const { act, data } = useBackend();
- const { pipe_layers } = data;
- const { multi_layer } = data;
+ const { pipe_layers, multi_layer, max_pipe_layers } = data;
+ const layer_to_bitmask = (layer: number) => {
+ return 1 << layer;
+ };
+
return (
- {LAYERS.map((layer) => (
- act('pipe_layers', { pipe_layers: layer.bitmask })}
- />
- ))}
+ {Array(max_pipe_layers)
+ .keys()
+ .map((layer) => (
+
+ act('pipe_layers', { pipe_layers: layer_to_bitmask(layer) })
+ }
+ >
+ {layer + 1}
+
+ ))}
{
act('toggle_multi_layer');
}}
- />
+ >
+ Multi
+
);
};
const PreviewSelect = (props) => {
- const { act, data } = useBackend();
+ const { act } = useBackend();
return (
{props.previews.map((preview) => (
@@ -288,8 +275,8 @@ const PreviewSelect = (props) => {
};
const PipeTypeSection = (props) => {
- const { act, data } = useBackend();
- const { categories = [], selected_category, selected_recipe } = data;
+ const { data } = useBackend();
+ const { categories = [], selected_category } = data;
const [categoryName, setCategoryName] = useState(selected_category);
const shownCategory =
categories.find((category) => category.cat_name === categoryName) ||
@@ -411,7 +398,7 @@ export const SmartPipeBlockSection = (props) => {
};
export const RapidPipeDispenser = (props) => {
- const { act, data } = useBackend();
+ const { data } = useBackend();
const { category: rootCategoryIndex } = data;
return (
diff --git a/tgui/packages/tgui/interfaces/RepairBot.tsx b/tgui/packages/tgui/interfaces/RepairBot.tsx
new file mode 100644
index 0000000000000..58bc26bec41d6
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/RepairBot.tsx
@@ -0,0 +1,101 @@
+import { BooleanLike } from 'common/react';
+import React from 'react';
+import { useBackend } from 'tgui/backend';
+import {
+ Button,
+ DmIcon,
+ Flex,
+ NoticeBox,
+ Section,
+ Stack,
+} from 'tgui/components';
+import { BotControl, BotSettings } from 'tgui/interfaces/SimpleBot';
+import { Window } from 'tgui/layouts';
+
+type Data = {
+ can_hack: BooleanLike;
+ custom_controls: Record;
+ emagged: BooleanLike;
+ has_access: BooleanLike;
+ locked: BooleanLike;
+ settings: Settings;
+ repairbot_materials: RepairbotMaterials[];
+};
+
+type RepairbotMaterials = {
+ material_ref: string;
+ material_name: string;
+ material_icon: string;
+ material_icon_state: string;
+};
+
+type Settings = {
+ airplane_mode: BooleanLike;
+ allow_possession: BooleanLike;
+ has_personality: BooleanLike;
+ maintenance_lock: BooleanLike;
+ pai_inserted: boolean;
+ patrol_station: BooleanLike;
+ possession_enabled: BooleanLike;
+ power: BooleanLike;
+};
+
+export function RepairBot(props) {
+ const { data } = useBackend();
+ const { can_hack, locked } = data;
+ const access = !locked || !!can_hack;
+
+ return (
+
+
+
+
+
+ {!!access && (
+ <>
+
+
+
+
+
+ )}
+
+
+
+ );
+}
+
+function RepairBotMats(props) {
+ const { act, data } = useBackend();
+ const { repairbot_materials } = data;
+
+ return (
+
+ {repairbot_materials.length === 0 && No Materials! }
+
+ {repairbot_materials.map((mat) => (
+
+
+ act('remove_item', {
+ item_reference: mat.material_ref,
+ })
+ }
+ >
+
+
+ ))}
+
+
+ );
+}
diff --git a/tgui/packages/tgui/interfaces/RepairbotResources.tsx b/tgui/packages/tgui/interfaces/RepairbotResources.tsx
new file mode 100644
index 0000000000000..0e82b83d30ad3
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/RepairbotResources.tsx
@@ -0,0 +1,106 @@
+import { useBackend } from '../backend';
+import {
+ Button,
+ DmIcon,
+ Flex,
+ ProgressBar,
+ Section,
+ Stack,
+} from '../components';
+import { Window } from '../layouts';
+
+type Data = {
+ stacks: Stacks[];
+ repairbot_icon: string;
+ repairbot_icon_state: string;
+};
+
+type Stacks = {
+ stack_name: string;
+ stack_amount: number;
+ stack_maximum_amount: number;
+ stack_icon: string;
+ stack_icon_state: string;
+ stack_reference: string;
+};
+export const RepairbotResources = (props) => {
+ const { act, data } = useBackend();
+ const { stacks, repairbot_icon, repairbot_icon_state } = data;
+ return (
+
+
+
+ }
+ >
+
+ {stacks.map((stack) => (
+
+
+
+
+
+
+
+
+
+
+ act('eject', {
+ item_reference: stack.stack_reference,
+ })
+ }
+ >
+ Eject
+
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/tgui/packages/tgui/interfaces/ScannerGate.jsx b/tgui/packages/tgui/interfaces/ScannerGate.jsx
index 51e32cbdc6e67..8eb61cea7f270 100644
--- a/tgui/packages/tgui/interfaces/ScannerGate.jsx
+++ b/tgui/packages/tgui/interfaces/ScannerGate.jsx
@@ -67,10 +67,6 @@ const SCANNER_GATE_ROUTES = {
title: 'Scanner Mode: Nutrition',
component: () => ScannerGateNutrition,
},
- Contraband: {
- title: 'Scanner Mode: Contraband',
- component: () => ScannerGateContraband,
- },
};
const ScannerGateControl = (props) => {
@@ -98,7 +94,6 @@ const ScannerGateControl = (props) => {
const ScannerGateOff = (props) => {
const { act, data } = useBackend();
- const { contraband_enabled } = data;
return (
<>
Select a scanning mode below.
@@ -127,11 +122,6 @@ const ScannerGateOff = (props) => {
content="Nutrition"
onClick={() => act('set_mode', { new_mode: 'Nutrition' })}
/>
- act('set_mode', { new_mode: 'Contraband' })}
- />
);
@@ -273,21 +263,6 @@ const ScannerGateNutrition = (props) => {
);
};
-const ScannerGateContraband = (props) => {
- const { data } = useBackend();
- const { reverse } = data;
- return (
- <>
-
- Trigger if the person scanned {reverse ? 'does not have' : 'has'} any
- anything considered contraband. Requires an N-spect scanner installed to
- enable.
-
- ();
- const { can_hack, custom_controls, locked } = data;
+ const { can_hack, locked } = data;
const access = !locked || !!can_hack;
return (
@@ -43,25 +43,11 @@ export function SimpleBot(props) {
- }>
- {!access ? Locked! :
+
-
-
- {Object.entries(custom_controls).map((control) => (
-
-
- ))}
-
-
+
)}
@@ -70,6 +56,36 @@ export function SimpleBot(props) {
);
}
+export function BotSettings(props) {
+ const { act, data } = useBackend();
+ const { can_hack, locked } = data;
+ const access = !locked || !!can_hack;
+ return (
+ }>
+ {!access ? Locked! :
+ );
+}
+
+export function BotControl(props) {
+ const { act, data } = useBackend();
+ const { custom_controls } = data;
+ return (
+
+
+ {Object.entries(custom_controls).map((control) => (
+
+
+ ))}
+
+
+ );
+}
/** Creates a lock button at the top of the controls */
function TabDisplay(props) {
const { act, data } = useBackend();
diff --git a/tgui/packages/tgui/interfaces/TurbineComputer.tsx b/tgui/packages/tgui/interfaces/TurbineComputer.tsx
index 4d1305b88b5c8..f67a09f2687a8 100644
--- a/tgui/packages/tgui/interfaces/TurbineComputer.tsx
+++ b/tgui/packages/tgui/interfaces/TurbineComputer.tsx
@@ -9,7 +9,9 @@ import {
NumberInput,
ProgressBar,
Section,
+ Stack,
} from '../components';
+import { formatPower } from '../format';
import { Window } from '../layouts';
type TurbineInfo = {
@@ -19,105 +21,99 @@ type TurbineInfo = {
power: number;
temp: number;
integrity: number;
- parts_linked: BooleanLike;
- parts_ready: BooleanLike;
max_rpm: number;
max_temperature: number;
regulator: number;
};
-export const TurbineComputer = (props) => {
+const TurbineDisplay = (props) => {
const { act, data } = useBackend();
- const parts_not_connected = !data.parts_linked && (
-
-
- {
- 'Parts not connected, use a multitool on the core rotor before trying again'
- }
-
-
+
+ return (
+ = 1000)}
+ onClick={() => act('toggle_power')}
+ >
+ {data.active ? 'Online' : 'Offline'}
+
+ }
+ >
+
+
+
+ act('regulate', {
+ regulate: value * 0.01,
+ })
+ }
+ />
+
+
+
+
+ {data.rpm} RPM
+
+
+ {data.max_rpm} RPM
+
+
+ {data.temp} K
+
+
+ {data.max_temperature} K
+
+
+ {formatPower(data.power)}
+
+
+
);
- const parts_not_ready = data.parts_linked && !data.parts_ready && (
+};
+
+const OutOfService = (props) => {
+ return (
-
- {
- 'Some parts have open maintenance hatchet, please close them before starting'
- }
-
+
+
+
+ {
+ 'Parts not connected, close all mantainence panels/use a multitool on the rotor before trying again'
+ }
+
+
+
);
+};
+
+export const TurbineComputer = (props) => {
+ const { data } = useBackend
();
+
return (
- = 1000) || !data.parts_linked}
- onClick={() => act('toggle_power')}
- />
- }
- >
- {parts_not_connected}
- {parts_not_ready}
-
-
-
- act('regulate', {
- regulate: value * 0.01,
- })
- }
- />
-
-
-
-
- {data.rpm} RPM
-
-
- {data.max_rpm} RPM
-
-
- {data.temp} K
-
-
- {data.max_temperature} K
-
-
- {data.power * 4 * 0.001} kW
-
-
-
+ {data.connected ?
);
diff --git a/tgui/packages/tgui/interfaces/Uplink/index.tsx b/tgui/packages/tgui/interfaces/Uplink/index.tsx
index 124d6f3d5050e..0bfc05728f37f 100644
--- a/tgui/packages/tgui/interfaces/Uplink/index.tsx
+++ b/tgui/packages/tgui/interfaces/Uplink/index.tsx
@@ -341,7 +341,7 @@ export class Uplink extends Component<{}, UplinkState> {
)}
- {(primary_objectives || has_objectives) && (
+ {!!(primary_objectives || has_objectives) && (
{primary_objectives && (
diff --git a/tgui/packages/tgui/package.json b/tgui/packages/tgui/package.json
index aa9db580db7de..cc47bc939fb90 100644
--- a/tgui/packages/tgui/package.json
+++ b/tgui/packages/tgui/package.json
@@ -18,8 +18,9 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-popper": "^2.3.0",
- "tgui-core": "^1.2.0",
+ "tgui-core": "^1.3.0",
"tgui-dev-server": "workspace:*",
- "tgui-polyfill": "workspace:*"
+ "tgui-polyfill": "workspace:*",
+ "tgui-styles": "^0.0.10"
}
}
diff --git a/tgui/packages/tgui/styles/atomic/candystripe.scss b/tgui/packages/tgui/styles/atomic/candystripe.scss
index 30159bf99c306..ff46280ea51e4 100644
--- a/tgui/packages/tgui/styles/atomic/candystripe.scss
+++ b/tgui/packages/tgui/styles/atomic/candystripe.scss
@@ -4,5 +4,5 @@
*/
.candystripe:nth-child(odd) {
- background-color: rgba(0, 0, 0, 0.25);
+ background-color: hsla(0, 0%, 0%, 0.25);
}
diff --git a/tgui/packages/tgui/styles/atomic/debug-layout.scss b/tgui/packages/tgui/styles/atomic/debug-layout.scss
index d015185927adb..0b0a2b7f4b2b2 100644
--- a/tgui/packages/tgui/styles/atomic/debug-layout.scss
+++ b/tgui/packages/tgui/styles/atomic/debug-layout.scss
@@ -5,13 +5,13 @@
.debug-layout,
.debug-layout *:not(g):not(path) {
- color: rgba(255, 255, 255, 0.9) !important;
+ color: hsla(0, 0%, 100%, 0.9) !important;
background: transparent !important;
- outline: 1px solid rgba(255, 255, 255, 0.5) !important;
+ outline: 1px solid hsla(0, 0%, 100%, 0.5) !important;
box-shadow: none !important;
filter: none !important;
&:hover {
- outline-color: rgba(255, 255, 255, 0.8) !important;
+ outline-color: hsla(0, 0%, 100%, 0.8) !important;
}
}
diff --git a/tgui/packages/tgui/styles/base.scss b/tgui/packages/tgui/styles/base.scss
index b3d5dd944d008..5d85f31e2fa17 100644
--- a/tgui/packages/tgui/styles/base.scss
+++ b/tgui/packages/tgui/styles/base.scss
@@ -6,9 +6,9 @@
@use 'sass:color';
@use 'sass:math';
-$color-fg: #ffffff !default;
-$color-bg: #1e4c4c !default;
-$color-bg-section: #0e2525 !default;
+$color-fg: hsl(0, 0%, 100%) !default;
+$color-bg: hsl(180, 43%, 21%) !default;
+$color-bg-section: hsl(180, 45%, 10%) !default;
$color-bg-grad-spread: 2% !default;
$color-bg-start: color.adjust(
$color-bg,
diff --git a/tgui/packages/tgui/styles/colors.scss b/tgui/packages/tgui/styles/colors.scss
index 82c26ed1f247e..61d77a7472647 100644
--- a/tgui/packages/tgui/styles/colors.scss
+++ b/tgui/packages/tgui/styles/colors.scss
@@ -9,27 +9,27 @@
// Base colors
-$black: #000000 !default;
-$white: #ffffff !default;
-$red: #ff1205 !default;
-$orange: #ed9550 !default;
-$yellow: #eff792 !default;
-$olive: #8d9770 !default;
-$green: #83bc78 !default;
-$teal: #cef2ec !default;
-$blue: #a7b4f6 !default;
-$violet: #92839f !default;
-$purple: #bfa9da !default;
-$pink: #edc1d5 !default;
-$brown: #b59d7e !default;
-$grey: #8b8b8b !default;
-$light-grey: #c5c5c5 !default;
+$black: hsl(0, 0%, 0%) !default;
+$white: hsl(0, 0%, 100%) !default;
+$red: hsl(3, 100%, 51%) !default;
+$orange: hsl(26, 81%, 62%) !default;
+$yellow: hsl(65, 86%, 77%) !default;
+$olive: hsl(75, 16%, 52%) !default;
+$green: hsl(110, 34%, 60%) !default;
+$teal: hsl(170, 58%, 88%) !default;
+$blue: hsl(230, 81%, 81%) !default;
+$violet: hsl(272, 13%, 57%) !default;
+$purple: hsl(267, 40%, 76%) !default;
+$pink: hsl(333, 55%, 84%) !default;
+$brown: hsl(34, 27%, 60%) !default;
+$grey: hsl(0, 0%, 55%) !default;
+$light-grey: hsl(0, 0%, 77%) !default;
-$primary: #306f94 !default;
-$good: #7ce176 !default;
-$average: #eebe66 !default;
-$bad: #ed6762 !default;
-$label: #92e4ff !default;
+$primary: hsl(202, 51%, 38%) !default;
+$good: hsl(117, 64%, 67%) !default;
+$average: hsl(39, 80%, 67%) !default;
+$bad: hsl(2, 79%, 66%) !default;
+$label: hsl(195, 100%, 79%) !default;
// Background and foreground color lightness ratios
$bg-lightness: -15% !default;
@@ -75,7 +75,7 @@ $bg-map-keys: map.keys($_gen_map) !default;
$fg-map: ();
@each $color-name in $fg-map-keys {
// prettier-ignore
- $fg-map: map-merge($fg-map, (
+ $fg-map: map.merge($fg-map, (
$color-name: fg(map.get($_gen_map, $color-name)),
));
}
@@ -83,7 +83,7 @@ $fg-map: ();
$bg-map: ();
@each $color-name in $bg-map-keys {
// prettier-ignore
- $bg-map: map-merge($bg-map, (
+ $bg-map: map.merge($bg-map, (
$color-name: bg(map.get($_gen_map, $color-name)),
));
}
diff --git a/tgui/packages/tgui/styles/components/BlockQuote.scss b/tgui/packages/tgui/styles/components/BlockQuote.scss
deleted file mode 100644
index 4e54030e5b65c..0000000000000
--- a/tgui/packages/tgui/styles/components/BlockQuote.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/tgui/packages/tgui/styles/components/Button.scss b/tgui/packages/tgui/styles/components/Button.scss
deleted file mode 100644
index fe777e9d3ef52..0000000000000
--- a/tgui/packages/tgui/styles/components/Button.scss
+++ /dev/null
@@ -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: #999999 !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;
-}
diff --git a/tgui/packages/tgui/styles/components/ColorBox.scss b/tgui/packages/tgui/styles/components/ColorBox.scss
deleted file mode 100644
index 739cacee0e45c..0000000000000
--- a/tgui/packages/tgui/styles/components/ColorBox.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/Dialog.scss b/tgui/packages/tgui/styles/components/Dialog.scss
deleted file mode 100644
index c7b7fd13261f7..0000000000000
--- a/tgui/packages/tgui/styles/components/Dialog.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/Dimmer.scss b/tgui/packages/tgui/styles/components/Dimmer.scss
deleted file mode 100644
index 32a43ce509e2f..0000000000000
--- a/tgui/packages/tgui/styles/components/Dimmer.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/Divider.scss b/tgui/packages/tgui/styles/components/Divider.scss
deleted file mode 100644
index e4df190e62c4b..0000000000000
--- a/tgui/packages/tgui/styles/components/Divider.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/tgui/packages/tgui/styles/components/Dropdown.scss b/tgui/packages/tgui/styles/components/Dropdown.scss
deleted file mode 100644
index 7989f6109a232..0000000000000
--- a/tgui/packages/tgui/styles/components/Dropdown.scss
+++ /dev/null
@@ -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);
-}
diff --git a/tgui/packages/tgui/styles/components/Flex.scss b/tgui/packages/tgui/styles/components/Flex.scss
deleted file mode 100644
index d4b6b8ec3889e..0000000000000
--- a/tgui/packages/tgui/styles/components/Flex.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/tgui/packages/tgui/styles/components/Icon.scss b/tgui/packages/tgui/styles/components/Icon.scss
deleted file mode 100644
index 320117a65f3e0..0000000000000
--- a/tgui/packages/tgui/styles/components/Icon.scss
+++ /dev/null
@@ -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: '.';
- }
-}
diff --git a/tgui/packages/tgui/styles/components/Input.scss b/tgui/packages/tgui/styles/components/Input.scss
deleted file mode 100644
index c2e779529f97a..0000000000000
--- a/tgui/packages/tgui/styles/components/Input.scss
+++ /dev/null
@@ -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: #0a0a0a !default;
-$border-color: #88bfff !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;
-}
diff --git a/tgui/packages/tgui/styles/components/Knob.scss b/tgui/packages/tgui/styles/components/Knob.scss
deleted file mode 100644
index 1a5f0d10a998a..0000000000000
--- a/tgui/packages/tgui/styles/components/Knob.scss
+++ /dev/null
@@ -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: #6a96c9 !default;
-$knob-color: #333333 !default;
-$popup-background-color: #000000 !default;
-$popup-text-color: #ffffff !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;
- }
- }
-}
diff --git a/tgui/packages/tgui/styles/components/LabeledList.scss b/tgui/packages/tgui/styles/components/LabeledList.scss
deleted file mode 100644
index 94adf932549d5..0000000000000
--- a/tgui/packages/tgui/styles/components/LabeledList.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/MenuBar.scss b/tgui/packages/tgui/styles/components/MenuBar.scss
deleted file mode 100644
index 0f5eb47380cdb..0000000000000
--- a/tgui/packages/tgui/styles/components/MenuBar.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * 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: lighten($background-color, 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;
-}
diff --git a/tgui/packages/tgui/styles/components/Modal.scss b/tgui/packages/tgui/styles/components/Modal.scss
deleted file mode 100644
index 005ffe316563f..0000000000000
--- a/tgui/packages/tgui/styles/components/Modal.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/NoticeBox.scss b/tgui/packages/tgui/styles/components/NoticeBox.scss
deleted file mode 100644
index 0394ffaa660bb..0000000000000
--- a/tgui/packages/tgui/styles/components/NoticeBox.scss
+++ /dev/null
@@ -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: #bb9b68 !default;
-$color-stripes: rgba(0, 0, 0, 0.1) !default;
-$color-border: #272727 !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);
-}
diff --git a/tgui/packages/tgui/styles/components/NumberInput.scss b/tgui/packages/tgui/styles/components/NumberInput.scss
deleted file mode 100644
index ef2aba4d47464..0000000000000
--- a/tgui/packages/tgui/styles/components/NumberInput.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/ProgressBar.scss b/tgui/packages/tgui/styles/components/ProgressBar.scss
deleted file mode 100644
index e13d25e837599..0000000000000
--- a/tgui/packages/tgui/styles/components/ProgressBar.scss
+++ /dev/null
@@ -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;
- }
- }
-}
diff --git a/tgui/packages/tgui/styles/components/RoundGauge.scss b/tgui/packages/tgui/styles/components/RoundGauge.scss
deleted file mode 100644
index be95519d64613..0000000000000
--- a/tgui/packages/tgui/styles/components/RoundGauge.scss
+++ /dev/null
@@ -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: #6a96c9 !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;
- }
-}
diff --git a/tgui/packages/tgui/styles/components/Section.scss b/tgui/packages/tgui/styles/components/Section.scss
deleted file mode 100644
index d1f81b1f76692..0000000000000
--- a/tgui/packages/tgui/styles/components/Section.scss
+++ /dev/null
@@ -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);
-}
diff --git a/tgui/packages/tgui/styles/components/Slider.scss b/tgui/packages/tgui/styles/components/Slider.scss
deleted file mode 100644
index 83baf71dc0991..0000000000000
--- a/tgui/packages/tgui/styles/components/Slider.scss
+++ /dev/null
@@ -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: #000000 !default;
-$popup-text-color: #ffffff !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;
-}
diff --git a/tgui/packages/tgui/styles/components/Stack.scss b/tgui/packages/tgui/styles/components/Stack.scss
deleted file mode 100644
index 3529c70018390..0000000000000
--- a/tgui/packages/tgui/styles/components/Stack.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/Table.scss b/tgui/packages/tgui/styles/components/Table.scss
deleted file mode 100644
index ecc47e5ba9a7a..0000000000000
--- a/tgui/packages/tgui/styles/components/Table.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/Tabs.scss b/tgui/packages/tgui/styles/components/Tabs.scss
deleted file mode 100644
index 2ab0912502711..0000000000000
--- a/tgui/packages/tgui/styles/components/Tabs.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/tgui/packages/tgui/styles/components/TextArea.scss b/tgui/packages/tgui/styles/components/TextArea.scss
deleted file mode 100644
index fa45857ed9b2f..0000000000000
--- a/tgui/packages/tgui/styles/components/TextArea.scss
+++ /dev/null
@@ -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;
-}
diff --git a/tgui/packages/tgui/styles/components/Tooltip.scss b/tgui/packages/tgui/styles/components/Tooltip.scss
deleted file mode 100644
index 497813a206d0c..0000000000000
--- a/tgui/packages/tgui/styles/components/Tooltip.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../functions.scss' as *;
-
-$color: #ffffff !default;
-$background-color: #000000 !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);
-}
diff --git a/tgui/packages/tgui/styles/functions.scss b/tgui/packages/tgui/styles/functions.scss
index 1c8d65e3a1756..403d43c7b4bcb 100644
--- a/tgui/packages/tgui/styles/functions.scss
+++ b/tgui/packages/tgui/styles/functions.scss
@@ -29,11 +29,11 @@
// Increases perceptual color lightness.
@function lighten($color, $percent) {
$scaled: hsl(
- color.hue($color),
- color.saturation($color),
- color.lightness($color) * (1 + num($percent))
+ color.channel($color, 'hue', $space: hsl),
+ color.channel($color, 'saturation', $space: hsl),
+ color.channel($color, 'lightness', $space: hsl) * (1 + num($percent))
);
- $mixed: color.mix(#ffffff, $color, 100% * num($percent));
+ $mixed: color.mix(hsl(0, 0%, 100%), $color, 100% * num($percent));
@return color.mix($scaled, $mixed, 75%);
}
@@ -41,9 +41,9 @@
// 1 is pure white, 0 is pure black.
@function luminance($color) {
$colors: (
- 'red': color.red($color),
- 'green': color.green($color),
- 'blue': color.blue($color),
+ 'red': color.channel($color, 'red', $space: rgb),
+ 'green': color.channel($color, 'green', $space: rgb),
+ 'blue': color.channel($color, 'blue', $space: rgb),
);
@each $name, $value in $colors {
diff --git a/tgui/packages/tgui/styles/interfaces/DetectiveBoard.scss b/tgui/packages/tgui/styles/interfaces/DetectiveBoard.scss
index 8aa8aae48bb1d..7f9c1f7a46155 100644
--- a/tgui/packages/tgui/styles/interfaces/DetectiveBoard.scss
+++ b/tgui/packages/tgui/styles/interfaces/DetectiveBoard.scss
@@ -26,8 +26,8 @@
}
.BoardTab__Selected {
- background-color: #edcf64;
- border-bottom: 1px solid #edcf64;
+ background-color: hsl(45, 82%, 66%);
+ border-bottom: 1px solid hsl(45, 82%, 66%);
transition: all 0.2s;
}
@@ -37,21 +37,21 @@
overflow: hidden;
}
.Evidence__Pin {
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- background-color: #db2828;
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.2);
+ background-color: hsl(0, 72%, 50%);
border-radius: 20px;
width: 15px;
height: 15px;
}
.Evidence__Box {
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.4);
padding: 5px;
color: black;
min-width: 200px;
max-width: 300px;
- background-color: white;
- border: 2px solid grey;
+ background-color: hsl(0, 0%, 100%);
+ border: 2px solid hsl(0, 0%, 50%);
-ms-user-select: none;
user-select: none;
text-wrap: wrap;
@@ -59,7 +59,7 @@
}
.Evidence__Box__TextBox {
- border-top: 1px solid #eaeaea;
+ border-top: 1px solid hsl(0, 0%, 92%);
text-wrap: wrap;
padding: 5px 0;
margin-top: 5px;
@@ -74,7 +74,7 @@
.Board__Content {
position: relative;
- background-color: #edcf64;
+ background-color: hsl(45, 82%, 66%);
padding: 5px;
overflow: hidden;
height: 95%;
@@ -82,7 +82,7 @@
.Evidence__Icon {
margin-top: 5px;
- border: 5px solid #e0e0e0;
+ border: 5px solid hsl(0, 0%, 88%);
width: 100%;
}
diff --git a/tgui/packages/tgui/styles/interfaces/ExperimentConfigure.scss b/tgui/packages/tgui/styles/interfaces/ExperimentConfigure.scss
index b4265b1fba5d0..4b218b397ef5d 100644
--- a/tgui/packages/tgui/styles/interfaces/ExperimentConfigure.scss
+++ b/tgui/packages/tgui/styles/interfaces/ExperimentConfigure.scss
@@ -1,12 +1,12 @@
.ExperimentTechwebServer__Web,
.ExperimentConfigure__ExperimentPanel {
- background: #000000;
- border: 1px solid #40628a;
+ background: hsl(0, 0%, 0%);
+ border: 1px solid hsl(210, 33%, 41%);
margin: 3px 0;
}
.ExperimentTechwebServer__WebHeader {
- background: #40628a;
+ background: hsl(210, 33%, 41%);
padding: 2px;
}
@@ -81,5 +81,5 @@
height: 100%;
right: 0;
top: 0;
- color: rgba(255, 255, 255, 0.5);
+ color: hsla(0, 0%, 100%, 0.5);
}
diff --git a/tgui/packages/tgui/styles/interfaces/Fabricator.scss b/tgui/packages/tgui/styles/interfaces/Fabricator.scss
index a7488f50a2c98..5016094c64667 100644
--- a/tgui/packages/tgui/styles/interfaces/Fabricator.scss
+++ b/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;
@@ -66,6 +66,7 @@
}
.MaterialDock--active .MaterialDock__Dock {
+ animation: materialdock-open 0.125s ease-out;
@keyframes materialdock-open {
0% {
opacity: 0;
@@ -75,8 +76,6 @@
opacity: 1;
}
}
-
- animation: materialdock-open 0.125s ease-out;
}
.MaterialDock__Button {
diff --git a/tgui/packages/tgui/styles/interfaces/Fishing.scss b/tgui/packages/tgui/styles/interfaces/Fishing.scss
index f9967b2cb82e6..d65ddf27393ec 100644
--- a/tgui/packages/tgui/styles/interfaces/Fishing.scss
+++ b/tgui/packages/tgui/styles/interfaces/Fishing.scss
@@ -45,8 +45,8 @@
width: 100%;
top: 0%;
left: 0;
- background: #4d5f2b;
- border: 0px #4d5f2b;
+ background: hsl(80.8, 37.7%, 27.1%);
+ border: 0px hsl(80.8, 37.7%, 27.1%);
border-radius: 10px;
}
@@ -71,7 +71,7 @@
.fishing .completion .bar {
position: absolute;
width: 100%;
- background: #7cb413;
+ background: hsl(80.9, 80.9%, 39%);
bottom: 0;
border-radius: 5px;
}
diff --git a/tgui/packages/tgui/styles/interfaces/IntegratedCircuit.scss b/tgui/packages/tgui/styles/interfaces/IntegratedCircuit.scss
index 7cfecb250acc4..c3fabf9f0212b 100644
--- a/tgui/packages/tgui/styles/interfaces/IntegratedCircuit.scss
+++ b/tgui/packages/tgui/styles/interfaces/IntegratedCircuit.scss
@@ -62,7 +62,7 @@ $fg-map: colors.$fg-map !default;
}
}
-$border-color: #88bfff !default;
+$border-color: hsl(210, 100%, 73%) !default;
$border-radius: base.$border-radius !default;
.IntegratedCircuit__BlueBorder {
diff --git a/tgui/packages/tgui/styles/components/SearchItem.scss b/tgui/packages/tgui/styles/interfaces/LootPanel.scss
similarity index 93%
rename from tgui/packages/tgui/styles/components/SearchItem.scss
rename to tgui/packages/tgui/styles/interfaces/LootPanel.scss
index 5dadcdf8d6aea..bd6af021e2d27 100644
--- a/tgui/packages/tgui/styles/components/SearchItem.scss
+++ b/tgui/packages/tgui/styles/interfaces/LootPanel.scss
@@ -9,7 +9,7 @@
.SearchItem--box {
background: black;
- border: thin solid #212121;
+ border: thin solid hsl(0, 0%, 12.9%);
display: flex;
align-items: center;
justify-content: center;
diff --git a/tgui/packages/tgui/styles/interfaces/Mecha.scss b/tgui/packages/tgui/styles/interfaces/Mecha.scss
index 8795c8cb69da7..30e33d43b4a64 100644
--- a/tgui/packages/tgui/styles/interfaces/Mecha.scss
+++ b/tgui/packages/tgui/styles/interfaces/Mecha.scss
@@ -2,21 +2,21 @@
@use '../colors.scss';
@use '../functions.scss' as *;
-$color-danger: #c92020 !default;
+$color-danger: hsl(0, 74%, 45%) !default;
.Mecha__displayBox {
- background-color: #002003;
- border: 0.167em inset #e8e4c9;
- color: #03e017;
+ background-color: hsl(150, 100%, 1%);
+ border: 0.167em inset hsl(50, 33%, 91%);
+ color: hsl(132, 100%, 45%);
font-size: 2em;
font-family: monospace;
padding: 0.25em;
}
.Mecha__displayBoxRed {
- background-color: #002003;
- border: 0.167em inset #e8e4c9;
- color: #f54b4b;
+ background-color: hsl(150, 100%, 1%);
+ border: 0.167em inset hsl(50, 33%, 91%);
+ color: hsl(0, 89%, 64%);
font-size: 2em;
font-family: monospace;
padding: 0.25em;
diff --git a/tgui/packages/tgui/styles/interfaces/NtosMessenger.scss b/tgui/packages/tgui/styles/interfaces/NtosMessenger.scss
index cc55e53678c6f..5a29d77f4647e 100644
--- a/tgui/packages/tgui/styles/interfaces/NtosMessenger.scss
+++ b/tgui/packages/tgui/styles/interfaces/NtosMessenger.scss
@@ -19,10 +19,10 @@ $msgpadding: 0.7rem;
border-radius: 0;
- background-color: lighten($msgcolor-incoming, 10%);
+ background-color: color.adjust($msgcolor-incoming, $lightness: 10%);
&_outgoing {
- border-color: lighten($msgcolor-outgoing, 20%);
- background-color: lighten($msgcolor-outgoing, 30%);
+ border-color: color.adjust($msgcolor-outgoing, $lightness: 20%);
+ background-color: color.adjust($msgcolor-outgoing, $lightness: 30%);
}
}
diff --git a/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss b/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss
index 615a3f696afa2..d27311e3f5e60 100644
--- a/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss
+++ b/tgui/packages/tgui/styles/interfaces/NuclearBomb.scss
@@ -5,12 +5,12 @@
$color-danger: colors.bg(colors.$red) !default;
$color-caution: colors.bg(colors.$yellow) !default;
-$background-beige: #e8e4c9;
+$background-beige: hsl(50, 33%, 84%);
.NuclearBomb__displayBox {
- background-color: #002003;
+ background-color: hsl(150, 100%, 1%);
border: 0.167em inset $background-beige;
- color: #03e017;
+ color: hsl(132, 100%, 45%);
font-size: 2em;
font-family: monospace;
padding: 0.25em;
@@ -33,9 +33,9 @@ $background-beige: #e8e4c9;
}
.NuclearBomb__Button--1 {
- background-color: #d3cfb7 !important;
- border-color: #d3cfb7 !important;
- color: #a9a692 !important;
+ background-color: hsl(50, 33%, 78%) !important;
+ border-color: hsl(50, 33%, 78%) !important;
+ color: hsl(50, 10%, 70%) !important;
}
.NuclearBomb__Button--E {
diff --git a/tgui/packages/tgui/styles/interfaces/PersonalCrafting.scss b/tgui/packages/tgui/styles/interfaces/PersonalCrafting.scss
index ec06d9fd1ba59..0acbafa742e19 100644
--- a/tgui/packages/tgui/styles/interfaces/PersonalCrafting.scss
+++ b/tgui/packages/tgui/styles/interfaces/PersonalCrafting.scss
@@ -36,7 +36,7 @@
.PersonalCraftingGridItem__content {
position: relative;
- color: #888;
+ color: hsl(0, 0%, 53.3%);
padding: 0.5em 0.5em 2.5em 0.5em;
min-height: 100%;
pointer-events: none;
@@ -57,7 +57,7 @@
right: 0;
left: 0;
padding: 0.5em;
- color: #fff;
+ color: hsl(0, 0%, 100%);
background-color: rgba(255, 0, 0, 0.1);
text-align: center;
visibility: hidden;
@@ -76,21 +76,21 @@
overflow: hidden;
font-weight: bold;
margin-bottom: 0.5em;
- color: #aaa;
+ color: hsl(0, 0%, 66.7%);
}
.PersonalCraftingGridItem--craftable .PersonalCraftingGridItem__name {
- color: #fff;
+ color: hsl(0, 0%, 100%);
}
.PersonalCraftingGridItem__prereq {
- color: #777;
+ color: hsl(0, 0%, 46.7%);
overflow: hidden;
white-space: nowrap;
}
.PersonalCraftingGridItem--craftable .PersonalCraftingGridItem__prereq {
- color: #bbb;
+ color: hsl(0, 0%, 73.3%);
}
.PersonalCraftingGridItem__extra {
diff --git a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss b/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
index 6a1d241b83fec..cbaf1c9e6765d 100644
--- a/tgui/packages/tgui/styles/interfaces/PreferencesMenu.scss
+++ b/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';
@@ -10,7 +9,7 @@ $department_map: (
'Cargo': colors.$brown,
'Command': colors.$yellow,
'Security': colors.$red,
- 'Engineering': #f1a839,
+ 'Engineering': hsl(36, 89%, 60%),
'Medical': colors.$teal,
'Science': colors.fg(colors.$purple),
'Service': colors.$green,
@@ -110,7 +109,7 @@ $department_map: (
.antagonist-days-left {
text-align: center;
- text-shadow: 1px 1px 1px #222;
+ text-shadow: 1px 1px 1px hsl(0, 0%, 13.3%);
width: 100%;
@@ -140,9 +139,9 @@ $department_map: (
}
background: colors.fg($color-value);
- border-bottom: 2px solid rgba(0, 0, 0, 0.3);
- border-left: 2px solid rgba(0, 0, 0, 0.3);
- border-right: 2px solid rgba(0, 0, 0, 0.3);
+ border-bottom: 2px solid hsla(0, 0%, 0%, 0.3);
+ border-left: 2px solid hsla(0, 0%, 0%, 0.3);
+ border-right: 2px solid hsla(0, 0%, 0%, 0.3);
color: black;
> * {
@@ -151,20 +150,20 @@ $department_map: (
}
&:first-child {
- border-top: 2px solid rgba(0, 0, 0, 0.3);
+ border-top: 2px solid hsla(0, 0%, 0%, 0.3);
}
.options {
- background: rgba(0, 0, 0, 0.2);
+ background: hsla(0, 0%, 0%, 0.2);
height: 100%;
}
}
&--Captain {
- border: 3px solid rgba(200, 200, 0, 1);
+ border: 3px solid hsla(60, 100%, 39.2%, 1);
&:first-child {
- border-top: 3px solid rgba(200, 200, 0, 1);
+ border-top: 3px solid hsla(60, 100%, 39.2%, 1);
}
.job-name {
@@ -174,12 +173,12 @@ $department_map: (
}
&__priority {
- border: 1px solid rgba(0, 0, 0, 0.3);
+ border: 1px solid hsla(0, 0%, 0%, 0.3);
&--off::after {
content: '';
- background: rgba(0, 0, 0, 0.2);
+ background: hsla(0, 0%, 0%, 0.2);
display: block;
height: 80%;
left: 50%;
@@ -209,7 +208,7 @@ $department_map: (
&__quirk {
background-color: colors.$white;
border-bottom: 1px solid black;
- color: #111;
+ color: hsl(0, 0%, 6.7%);
transition: background-color 0.1s ease-in;
$quality_map: (
diff --git a/tgui/packages/tgui/styles/interfaces/Safe.scss b/tgui/packages/tgui/styles/interfaces/Safe.scss
index 2f9f3d9d3613b..706d1b3f965ec 100644
--- a/tgui/packages/tgui/styles/interfaces/Safe.scss
+++ b/tgui/packages/tgui/styles/interfaces/Safe.scss
@@ -4,18 +4,18 @@
height: 96%;
left: 2.5%;
top: 2%;
- border: 5px outset #3e4f6a;
+ border: 5px outset hsl(217, 27%, 34%);
padding: 5px;
text-align: center;
}
.Safe__engraving-arrow {
- color: #35435a;
+ color: hsl(217, 27%, 27%);
}
.Safe__engraving-hinge {
content: ' ';
- background-color: #191f2a;
+ background-color: hsl(217, 27%, 15%);
width: 25px;
height: 40px;
position: absolute;
@@ -39,17 +39,17 @@
}
.Safe__dialer-number {
- color: #bbbbbb;
+ color: hsl(0, 0%, 73.3%);
display: inline;
- background-color: #191f2a;
+ background-color: hsl(217, 27%, 15%);
font-size: 1.5rem;
font-weight: bold;
padding: 0 0.5rem;
}
.Safe__contents {
- border: 10px solid #191f2a;
- background-color: #0f131a;
+ border: 10px solid hsl(217, 27%, 15%);
+ background-color: hsl(217, 27%, 10%);
height: calc(85% + 7.5px);
text-align: left;
padding: 5px;
@@ -64,8 +64,12 @@
font-family: 'Comic Sans MS', cursive, sans-serif;
font-style: italic;
color: black;
- box-shadow: 5px 5px #111111;
- background-image: linear-gradient(to bottom, #b2ae74 0%, #8e8b5d 100%);
+ box-shadow: 5px 5px hsl(0, 0%, 6.7%);
+ background-image: linear-gradient(
+ to bottom,
+ hsl(50, 20%, 58.8%) 0%,
+ hsl(50, 6%, 45.5%) 100%
+ );
transform: rotate(-1deg);
&:before {
@@ -73,8 +77,12 @@
display: block;
width: 24px;
height: 40px;
- background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
- box-shadow: 1px 1px #111111;
+ background-image: linear-gradient(
+ to bottom,
+ transparent 0%,
+ hsl(0, 0%, 100%) 100%
+ );
+ box-shadow: 1px 1px hsl(0, 0%, 6.7%);
opacity: 0.2;
position: absolute;
top: -30px;
diff --git a/tgui/packages/tgui/styles/interfaces/Techweb.scss b/tgui/packages/tgui/styles/interfaces/Techweb.scss
index 684267185d104..f73aaa6ca7a5d 100644
--- a/tgui/packages/tgui/styles/interfaces/Techweb.scss
+++ b/tgui/packages/tgui/styles/interfaces/Techweb.scss
@@ -23,7 +23,7 @@
.Techweb__HeaderContent {
background-color: black;
padding: 6px;
- border: 1px solid #40628a;
+ border: 1px solid hsl(210, 33%, 41%);
}
.Techweb__HeaderContent > * > :not(:last-child) {
@@ -33,13 +33,13 @@
.Techweb__HeaderSectionTabs {
margin-top: 8px;
background-color: black;
- border: 1px solid #40628a;
+ border: 1px solid hsl(210, 33%, 41%);
padding-left: 5px;
padding-right: 5px;
}
.Techweb__HeaderTabTitle {
- border-right: 1px solid #40628a;
+ border-right: 1px solid hsl(210, 33%, 41%);
padding-right: 0.5em;
margin-right: 0.5em;
font-weight: bold;
diff --git a/tgui/packages/tgui/styles/interfaces/Uplink.scss b/tgui/packages/tgui/styles/interfaces/Uplink.scss
index 58cf956a9027a..bb3d2834bb994 100644
--- a/tgui/packages/tgui/styles/interfaces/Uplink.scss
+++ b/tgui/packages/tgui/styles/interfaces/Uplink.scss
@@ -1,9 +1,39 @@
-$badGradient: linear-gradient(to right, #9c1e1e, #6c2828, #9c1e1e);
-$normalGradient: linear-gradient(to right, #5d5041, #40372d, #5d5041);
-$goodGradient: linear-gradient(to right, #515d6c, #252a30, #515d6c);
-$veryGoodGradient: linear-gradient(to right, #977949, #534328, #977949);
-$superGoodGradient: linear-gradient(to right, #9d9948, #777437, #9d9948);
-$bestGradient: linear-gradient(to right, #9d486b, #57283c, #9d486b);
+$badGradient: linear-gradient(
+ to right,
+ hsl(0, 67%, 37%),
+ hsl(0, 43%, 28%),
+ hsl(0, 67%, 37%)
+);
+$normalGradient: linear-gradient(
+ to right,
+ hsl(30, 14%, 34%),
+ hsl(30, 20%, 19%),
+ hsl(30, 14%, 34%)
+);
+$goodGradient: linear-gradient(
+ to right,
+ hsl(210, 11%, 37%),
+ hsl(210, 14%, 17%),
+ hsl(210, 11%, 37%)
+);
+$veryGoodGradient: linear-gradient(
+ to right,
+ hsl(36, 38%, 44%),
+ hsl(36, 33%, 19%),
+ hsl(36, 38%, 44%)
+);
+$superGoodGradient: linear-gradient(
+ to right,
+ hsl(60, 39%, 45%),
+ hsl(60, 35%, 34%),
+ hsl(60, 39%, 45%)
+);
+$bestGradient: linear-gradient(
+ to right,
+ hsl(330, 34%, 45%),
+ hsl(330, 43%, 26%),
+ hsl(330, 34%, 45%)
+);
$_rep_map: (
'bad': $badGradient,
diff --git a/tgui/packages/tgui/styles/layouts/Layout.scss b/tgui/packages/tgui/styles/layouts/Layout.scss
index eaadcd9a6978b..ecf750ecc0740 100644
--- a/tgui/packages/tgui/styles/layouts/Layout.scss
+++ b/tgui/packages/tgui/styles/layouts/Layout.scss
@@ -4,7 +4,7 @@
*/
@use 'sass:color';
-@use '../base.scss';
+@use '../base';
$scrollbar-color-multiplier: 1 !default;
diff --git a/tgui/packages/tgui/styles/layouts/NtosWindow.scss b/tgui/packages/tgui/styles/layouts/NtosWindow.scss
index bed4abab53cec..7c75cdfafe9c3 100644
--- a/tgui/packages/tgui/styles/layouts/NtosWindow.scss
+++ b/tgui/packages/tgui/styles/layouts/NtosWindow.scss
@@ -3,7 +3,7 @@
* SPDX-License-Identifier: MIT
*/
-@use '../base.scss';
+@use '../base';
.NtosWindow__header {
position: absolute;
@@ -12,7 +12,7 @@
right: 0;
height: 2em;
line-height: 1.928em;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: hsla(0, 0, 0, 0.5);
font-family: Consolas, monospace;
font-size: base.em(14px);
user-select: none;
diff --git a/tgui/packages/tgui/styles/layouts/TitleBar.scss b/tgui/packages/tgui/styles/layouts/TitleBar.scss
index 1a26dd9e29ebf..517f2b8ad811e 100644
--- a/tgui/packages/tgui/styles/layouts/TitleBar.scss
+++ b/tgui/packages/tgui/styles/layouts/TitleBar.scss
@@ -4,13 +4,13 @@
*/
@use 'sass:color';
-@use '../base.scss';
-@use '../colors.scss';
+@use '../base';
+@use '../colors';
-$text-color: rgba(255, 255, 255, 0.75) !default;
-$background-color: #363636 !default;
-$shadow-color-core: #161616 !default;
-$shadow-color: rgba(0, 0, 0, 0.1) !default;
+$text-color: hsla(0, 0%, 100%, 0.75) !default;
+$background-color: hsl(0, 0%, 21%) !default;
+$shadow-color-core: hsl(0, 0%, 8.6%) !default;
+$shadow-color: hsla(0, 0%, 0%, 0.1) !default;
.TitleBar {
background-color: $background-color;
@@ -30,7 +30,7 @@ $shadow-color: rgba(0, 0, 0, 0.1) !default;
&:hover {
color: rgba(255, 255, 255, 1);
- background-color: #cc0000;
+ background-color: hsl(0, 100%, 40%);
transition:
color 0ms,
background-color 0ms;
@@ -105,7 +105,7 @@ $shadow-color: rgba(0, 0, 0, 0.1) !default;
min-width: base.rem(20px);
padding: 2px 4px;
padding: base.rem(2px) base.rem(4px);
- background-color: rgba(colors.$good, 0.75);
- color: #fff;
+ background-color: darken(colors.$good, 10%);
+ color: hsl(120, 100%, 100%);
text-align: center;
}
diff --git a/tgui/packages/tgui/styles/layouts/Window.scss b/tgui/packages/tgui/styles/layouts/Window.scss
index 232dd8396bbf2..1bb1e2acd6975 100644
--- a/tgui/packages/tgui/styles/layouts/Window.scss
+++ b/tgui/packages/tgui/styles/layouts/Window.scss
@@ -4,8 +4,8 @@
*/
@use 'sass:color';
-@use '../base.scss';
-@use '../functions.scss' as *;
+@use '../base';
+@use '../functions' as *;
.Window {
position: fixed;
diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
index 53cd615871141..8372dd3171b7f 100644
--- a/tgui/packages/tgui/styles/main.scss
+++ b/tgui/packages/tgui/styles/main.scss
@@ -4,7 +4,8 @@
*/
@use 'sass:meta';
-@use './base.scss';
+@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');
diff --git a/tgui/packages/tgui/styles/reset.scss b/tgui/packages/tgui/styles/reset.scss
index e7fff7f936dae..69d03ce4801af 100644
--- a/tgui/packages/tgui/styles/reset.scss
+++ b/tgui/packages/tgui/styles/reset.scss
@@ -3,7 +3,7 @@
* SPDX-License-Identifier: MIT
*/
-@use './base.scss';
+@use 'base';
html,
body {
diff --git a/tgui/packages/tgui/styles/themes/abductor.scss b/tgui/packages/tgui/styles/themes/abductor.scss
index 39dac5773c063..c80bacf0fa0ac 100644
--- a/tgui/packages/tgui/styles/themes/abductor.scss
+++ b/tgui/packages/tgui/styles/themes/abductor.scss
@@ -6,13 +6,13 @@
@use 'sass:color';
@use 'sass:meta';
-@use '../colors.scss' with (
- $primary: #ad2350,
+@use '../colors' with (
+ $primary: hsl(340, 67%, 41%),
$fg-map-keys: (),
$bg-map-keys: ()
);
-@use '../base.scss' with (
- $color-bg: #2a314a,
+@use '../base' with (
+ $color-bg: hsl(227, 29%, 23%),
$color-bg-grad-spread: 6%,
$border-radius: 2px
);
@@ -23,35 +23,35 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': colors.$primary,
- 'color-disabled': #363636,
- 'color-selected': #465899,
- 'color-caution': #be6209,
- 'color-danger': #9a9d00
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(227, 37%, 45%),
+ 'color-caution': hsl(30, 88%, 39%),
+ 'color-danger': hsl(62, 100%, 30%)
)
);
@include meta.load-css(
- '../components/Input.scss',
- $with: ('border-color': #404b6e)
+ 'pkg:tgui-styles/components/Input',
+ $with: ('border-color': hsl(227, 29%, 27%))
);
@include meta.load-css(
- '../components/NoticeBox.scss',
- $with: ('background-color': #a82d55)
+ 'pkg:tgui-styles/components/NoticeBox',
+ $with: ('background-color': hsl(340, 67%, 41%))
);
@include meta.load-css(
- '../components/NumberInput.scss',
- $with: ('border-color': #404b6e)
+ 'pkg:tgui-styles/components/NumberInput',
+ $with: ('border-color': hsl(227, 29%, 27%))
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('background-color': rgba(0, 0, 0, 0.5))
+ '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',
- $with: ('background-color': #a82d55)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(340, 67%, 41%))
);
// Layouts
@@ -59,7 +59,7 @@
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #9e1b46)
+ $with: ('background-color': hsl(340, 71%, 36%))
);
.Layout__content {
diff --git a/tgui/packages/tgui/styles/themes/admin.scss b/tgui/packages/tgui/styles/themes/admin.scss
index c36d5305beffb..73940e47f9cd6 100644
--- a/tgui/packages/tgui/styles/themes/admin.scss
+++ b/tgui/packages/tgui/styles/themes/admin.scss
@@ -7,12 +7,13 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #1596b6,
+ // convert to hsl
+ $primary: hsl(191.93, 79.31%, 39.8%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #29333a,
+ $color-bg: hsl(204.7, 17.2%, 19.4%),
$color-bg-grad-spread: 6%,
$border-radius: 2px
);
diff --git a/tgui/packages/tgui/styles/themes/cardtable.scss b/tgui/packages/tgui/styles/themes/cardtable.scss
index e5047e2e2f0c7..ba1f2bcf1a991 100644
--- a/tgui/packages/tgui/styles/themes/cardtable.scss
+++ b/tgui/packages/tgui/styles/themes/cardtable.scss
@@ -6,13 +6,13 @@
@use 'sass:color';
@use 'sass:meta';
-@use '../colors.scss' with (
- $primary: #000000,
+@use '../colors' with (
+ $primary: hsl(0, 0%, 0%),
$fg-map-keys: (),
$bg-map-keys: ()
);
-@use '../base.scss' with (
- $color-bg: #117039,
+@use '../base' with (
+ $color-bg: hsl(145.26, 73.64%, 25.29%),
$color-bg-grad-spread: 0%,
$border-radius: 0
);
@@ -24,31 +24,31 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
- 'color-default': #117039,
- 'color-disabled': #363636,
- 'color-selected': #9d0808,
- 'color-caution': #be6209,
- 'color-danger': #9a9d00
+ 'color-default': hsl(145.26, 73.64%, 25.29%),
+ 'color-disabled': hsl(0, 0%, 21.18%),
+ 'color-selected': hsl(0, 90.3%, 32.35%),
+ 'color-caution': hsl(29.5, 90.95%, 39.02%),
+ 'color-danger': hsl(61.15, 100%, 30.78%)
)
);
@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');
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #381608)
+ $with: ('background-color': hsl(17.5, 75%, 12.5%))
);
.Button {
diff --git a/tgui/packages/tgui/styles/themes/hackerman.scss b/tgui/packages/tgui/styles/themes/hackerman.scss
index 51befcf1b3668..25c6956fc3d87 100644
--- a/tgui/packages/tgui/styles/themes/hackerman.scss
+++ b/tgui/packages/tgui/styles/themes/hackerman.scss
@@ -7,12 +7,12 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #00ff00,
+ $primary: hsl(120, 100%, 50%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #121b12,
+ $color-bg: hsl(120, 20%, 8.8%),
$color-bg-grad-spread: 0%
);
@@ -22,34 +22,34 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': colors.$primary,
- 'color-disabled': #4a6a4a,
- 'color-selected': #00ff00
+ 'color-disabled': hsl(120, 17.78%, 35.29%),
+ 'color-selected': hsl(120, 100%, 50%)
)
);
@include meta.load-css(
- '../components/Tabs.scss',
+ 'pkg:tgui-styles/components/Tabs',
$with: (
'color-default': colors.$primary,
- 'tab-color-selected': #00ff003f,
- 'text-color': #e7e7e7
+ 'tab-color-selected': hsla(120, 100%, 50%, 0.25),
+ 'text-color': hsl(0, 0%, 90.59%)
)
);
@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');
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #223d22)
+ $with: ('background-color': hsl(120, 28.4%, 18.6%))
);
.Layout__content {
@@ -60,7 +60,7 @@
font-family: monospace;
border-width: base.em(2px);
border-style: outset;
- border-color: #00aa00;
+ border-color: hsl(120, 100%, 33.33%);
outline: base.em(1px) solid rgb(0, 122, 0);
}
diff --git a/tgui/packages/tgui/styles/themes/malfunction.scss b/tgui/packages/tgui/styles/themes/malfunction.scss
index d32113ba5e661..9e2abe451a65d 100644
--- a/tgui/packages/tgui/styles/themes/malfunction.scss
+++ b/tgui/packages/tgui/styles/themes/malfunction.scss
@@ -7,12 +7,12 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #910101,
+ $primary: hsl(0, 99%, 29%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #1b3443,
+ $color-bg: hsl(204, 43%, 19%),
$color-bg-grad-spread: 6%
);
@@ -22,35 +22,35 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': colors.$primary,
- 'color-disabled': #363636,
- 'color-selected': #1e5881,
- 'color-caution': #be6209,
- 'color-danger': #9a9d00
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(204, 61%, 31%),
+ 'color-caution': hsl(30, 88%, 39%),
+ 'color-danger': hsl(62, 100%, 30%)
)
);
@include meta.load-css(
- '../components/Input.scss',
- $with: ('border-color': #910101)
+ 'pkg:tgui-styles/components/Input',
+ $with: ('border-color': hsl(0, 99%, 29%))
);
@include meta.load-css(
- '../components/NoticeBox.scss',
- $with: ('background-color': #1a3f57)
+ 'pkg:tgui-styles/components/NoticeBox',
+ $with: ('background-color': hsl(204, 54%, 23%))
);
@include meta.load-css(
- '../components/NumberInput.scss',
- $with: ('border-color': #910101)
+ 'pkg:tgui-styles/components/NumberInput',
+ $with: ('border-color': hsl(0, 99%, 29%))
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('background-color': rgba(0, 0, 0, 0.5))
+ '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',
- $with: ('background-color': #235577)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(204, 54%, 29%))
);
// Layouts
@@ -58,7 +58,7 @@
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #1a3f57)
+ $with: ('background-color': hsl(204, 54%, 23%))
);
.Layout__content {
diff --git a/tgui/packages/tgui/styles/themes/neutral.scss b/tgui/packages/tgui/styles/themes/neutral.scss
index e8ed3ca7da98b..6665a6673c44d 100644
--- a/tgui/packages/tgui/styles/themes/neutral.scss
+++ b/tgui/packages/tgui/styles/themes/neutral.scss
@@ -6,7 +6,7 @@
@use 'sass:color';
@use 'sass:meta';
-$neutral: #ffb300;
+$neutral: hsl(42.12, 100%, 50%);
@use '../colors.scss' with (
$primary: $neutral,
@@ -21,20 +21,20 @@ $neutral: #ffb300;
.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');
diff --git a/tgui/packages/tgui/styles/themes/ntOS95.scss b/tgui/packages/tgui/styles/themes/ntOS95.scss
index df541bf18a44e..90c0d3ed76504 100644
--- a/tgui/packages/tgui/styles/themes/ntOS95.scss
+++ b/tgui/packages/tgui/styles/themes/ntOS95.scss
@@ -6,19 +6,19 @@
@use 'sass:color';
@use 'sass:meta';
-$light-gray: #c3c3c3;
-$dark-gray: #858585;
+$light-gray: hsl(0, 0%, 76%);
+$dark-gray: hsl(0, 0%, 52%);
$scrollbar-color-multiplier: 1;
@use '../colors.scss' with (
- $primary: #000000,
- $good: #007c11,
- $average: #f0ec11,
- $bad: #db2828,
- $label: #000000
+ $primary: hsl(0, 0%, 0%),
+ $good: hsl(134, 100%, 24.3%),
+ $average: hsl(56, 88%, 50%),
+ $bad: hsl(0, 72%, 50%),
+ $label: hsl(0, 0%, 0%)
);
@use '../base.scss' with (
- $color-bg: #008081,
+ $color-bg: hsl(180, 100%, 25.3%),
$color-bg-grad-spread: 0%,
$border-radius: 0
);
@@ -29,59 +29,59 @@ $scrollbar-color-multiplier: 1;
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
- 'color-default': #e8e4c9,
- 'color-disabled': #707070,
- 'color-selected': #007c11,
- 'color-caution': #be6209,
- 'color-danger': #9d0808
+ 'color-default': hsl(52.3, 40.3%, 84.9%),
+ 'color-disabled': hsl(0, 0%, 43.9%),
+ 'color-selected': hsl(128.2, 100%, 24.3%),
+ 'color-caution': hsl(29.5, 91%, 39%),
+ 'color-danger': hsl(0, 90.3%, 32.4%)
)
);
@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',
- $with: ('background-color': #ecee9e)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(61.5, 70.2%, 77.6%))
);
// Layouts
@include meta.load-css('../layouts/Layout.scss');
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #000080)
+ $with: ('background-color': hsl(240, 100%, 25.1%))
);
.Button {
- color: #161613;
- background-color: #c2c2c2;
- //border: base.em(2px) outset #E8E4C9;
- outline: base.em(2px) outset #c3c3c3;
+ color: hsl(60, 7.3%, 8%);
+ background-color: hsl(0, 0%, 76.1%);
+ //border: base.em(2px) outset hsl(52.3, 40.3%, 84.9%);
+ outline: base.em(2px) outset hsl(0, 0%, 76.5%);
}
.Button:hover {
- background-color: #002ead;
+ background-color: hsl(224, 100%, 33.9%);
transition: 0.1s;
}
.Section {
+ color: black;
+ background-color: hsl(0, 0%, 75.3%);
+ outline: base.em(2px) outset hsl(0, 0%, 76.5%);
&__titleText {
color: black;
}
- color: black;
- background-color: #c0c0c0;
- outline: base.em(2px) outset #c3c3c3;
}
.Input {
background-color: white;
- outline: base.em(2px) inset #c3c3c3;
+ outline: base.em(2px) inset hsl(0, 0%, 76.5%);
color: black;
&__input:-ms-input-placeholder {
color: black;
@@ -90,7 +90,7 @@ $scrollbar-color-multiplier: 1;
.TextArea {
background-color: white;
- outline: base.em(2px) inset #c3c3c3;
+ outline: base.em(2px) inset hsl(0, 0%, 76.5%);
}
.Layout__content {
@@ -131,13 +131,13 @@ $scrollbar-color-multiplier: 1;
}
.Tab {
- color: #000000;
- background-color: #ecee9e;
+ color: hsl(0, 0%, 0%);
+ background-color: hsl(61.5, 70.2%, 77.6%);
}
.Tab--selected {
- color: #9d0808;
- background-color: #c3c3c3;
+ color: hsl(0, 90.3%, 32.4%);
+ background-color: hsl(0, 0%, 76.5%);
}
body {
@@ -151,11 +151,11 @@ $scrollbar-color-multiplier: 1;
.Table__cell {
display: table-cell;
padding: 0 0.25em;
- background-color: #c3c3c3;
- //outline: base.em(3px) outset #c0c0c0
+ background-color: hsl(0, 0%, 76.5%);
+ //outline: base.em(3px) outset hsl(0.0, 0.0%, 75.3%)
}
.Box {
- outline: base.em(3px) outset #c0c0c0;
+ outline: base.em(3px) outset hsl(0, 0%, 75.3%);
}
.Tooltip {
color: black;
diff --git a/tgui/packages/tgui/styles/themes/ntos.scss b/tgui/packages/tgui/styles/themes/ntos.scss
index 8b102b4777813..a43210b616aea 100644
--- a/tgui/packages/tgui/styles/themes/ntos.scss
+++ b/tgui/packages/tgui/styles/themes/ntos.scss
@@ -6,7 +6,7 @@
@use 'sass:color';
@use 'sass:meta';
-$nanotrasen: #384e68;
+$nanotrasen: hsl(213, 30%, 32%);
@use '../colors.scss' with (
$fg-map-keys: (),
@@ -19,20 +19,20 @@ $nanotrasen: #384e68;
.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');
diff --git a/tgui/packages/tgui/styles/themes/ntos_cat.scss b/tgui/packages/tgui/styles/themes/ntos_cat.scss
index ae6236b5aa39c..f09bbbf5c0d15 100644
--- a/tgui/packages/tgui/styles/themes/ntos_cat.scss
+++ b/tgui/packages/tgui/styles/themes/ntos_cat.scss
@@ -8,27 +8,26 @@
//@use 'sass:map';
//palette
-$cyan: #5edba5;
-$pink: #ed12f5;
-$orange: #ff9900;
-$purple: #463191;
+$cyan: hsl(156, 65%, 60%);
+$pink: hsl(300, 91%, 52%);
+$orange: hsl(36, 100%, 50%);
+$purple: hsl(248, 47%, 37%);
-$light-gray: #c3c3c3;
-$dark-gray: #858585;
+$light-gray: hsl(0, 0%, 76%);
+$dark-gray: hsl(0, 0%, 52%);
$scrollbar-color-multiplier: 0.5;
@use '../colors.scss' with (
$primary: black,
- $label: rgb(255, 132, 153),
- $good: pink,
-
+ $label: hsl(350, 100%, 76.5%),
+ $good: hsl(300, 91%, 52%),
$bad: red,
// $fg-map-keys: (),
// $bg-map-keys: (),
);
@use '../base.scss' with (
- $color-bg: orange,
+ $color-bg: hsl(36, 100%, 50%),
$color-bg-grad-spread: 12%,
//$border-radius: 0,
);
@@ -39,26 +38,26 @@ $scrollbar-color-multiplier: 0.5;
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
- 'color-default': pink,
- 'color-transparent-text': rgba(227, 240, 255, 0.75),
- 'color-disabled': #363636,
- 'color-selected': #465899,
- 'color-caution': #be6209
+ 'color-default': hsl(300, 91%, 52%),
+ 'color-transparent-text': hsla(210, 100%, 94%, 0.75),
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(227, 37%, 45%),
+ 'color-caution': hsl(30, 88%, 39%)
)
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('color-default-fill': rgb(255, 132, 153, 0.75))
+ 'pkg:tgui-styles/components/ProgressBar',
+ $with: ('color-default-fill': hsla(350, 100%, 76.5%, 0.75))
);
@include meta.load-css(
- '../components/Section.scss',
- $with: ('background-color': rgba(124, 62, 34, 0.75))
+ 'pkg:tgui-styles/components/Section',
+ $with: ('background-color': hsla(24, 56%, 31%, 0.75))
);
@include meta.load-css(
- '../components/Tooltip.scss',
- $with: ('background-color': rgba(255, 153, 0, 0.75))
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsla(36, 100%, 50%, 0.75))
);
// Layouts
@@ -66,16 +65,16 @@ $scrollbar-color-multiplier: 0.5;
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': rgb(255, 132, 153, 0.75))
+ $with: ('background-color': hsla(350, 100%, 76.5%, 0.75))
);
.Section {
color: black;
- outline: base.em(2px) inset rgb(255, 132, 153);
+ outline: base.em(2px) inset hsl(350, 100%, 76.5%);
}
.Button {
- color: rgb(255, 132, 153);
- background-color: rgb(255, 255, 255);
+ color: hsl(350, 100%, 76.5%);
+ background-color: hsl(0, 0%, 100%);
}
.ProgressBar {
@@ -91,58 +90,58 @@ $scrollbar-color-multiplier: 0.5;
.Layout * {
// Fancy scrollbar
scrollbar-base-color: color.scale(
- #454255,
+ hsl(248, 17%, 27%),
$lightness: -25% * $scrollbar-color-multiplier
);
scrollbar-face-color: color.scale(
- #454255,
+ hsl(248, 17%, 27%),
$lightness: 10% * $scrollbar-color-multiplier
);
scrollbar-3dlight-color: color.scale(
- orange,
+ hsl(36, 100%, 50%),
$lightness: 0% * $scrollbar-color-multiplier
);
scrollbar-highlight-color: color.scale(
- orange,
+ hsl(36, 100%, 50%),
$lightness: 0% * $scrollbar-color-multiplier
);
scrollbar-track-color: color.scale(
- #ba753a,
+ hsl(30, 47%, 47%),
$lightness: -25% * $scrollbar-color-multiplier
);
scrollbar-arrow-color: color.scale(
- orange,
+ hsl(36, 100%, 50%),
$lightness: 50% * $scrollbar-color-multiplier
);
scrollbar-shadow-color: color.scale(
- #454255,
+ hsl(248, 17%, 27%),
$lightness: 10% * $scrollbar-color-multiplier
);
}
.Tab {
- color: rgb(255, 132, 153);
- background-color: rgba(255, 255, 255, 0.5);
+ color: hsl(350, 100%, 76.5%);
+ background-color: hsla(0, 0%, 100%, 0.5);
}
.Tab--selected {
color: black;
- background-color: rgb(255, 132, 153);
+ background-color: hsl(350, 100%, 76.5%);
}
.Box {
- outline: base.em(3px) outset #c0c0c0;
+ outline: base.em(3px) outset hsl(0, 0%, 76%);
}
.Tooltip {
color: black;
}
.Input {
- background-color: white;
- outline: base.em(2px) inset rgb(255, 132, 153);
+ background-color: hsl(0, 0%, 100%);
+ outline: base.em(2px) inset hsl(350, 100%, 76.5%);
}
.NtosWindow__header {
- background-color: #454255;
+ background-color: hsl(248, 17%, 27%);
}
.Flex {
- color: white;
- background-color: rgba(0, 0, 0, 0);
+ color: hsl(0, 0%, 100%);
+ background-color: hsla(0, 0%, 0%, 0);
}
}
diff --git a/tgui/packages/tgui/styles/themes/ntos_darkmode.scss b/tgui/packages/tgui/styles/themes/ntos_darkmode.scss
index b22ad60fc3f2f..0e3ec116f071f 100644
--- a/tgui/packages/tgui/styles/themes/ntos_darkmode.scss
+++ b/tgui/packages/tgui/styles/themes/ntos_darkmode.scss
@@ -6,7 +6,7 @@
@use 'sass:color';
@use 'sass:meta';
-$nanotrasen: #2c2c2c;
+$nanotrasen: hsl(0, 0%, 17.25%);
@use '../colors.scss' with (
$fg-map-keys: (),
@@ -19,20 +19,20 @@ $nanotrasen: #2c2c2c;
.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');
diff --git a/tgui/packages/tgui/styles/themes/ntos_lightmode.scss b/tgui/packages/tgui/styles/themes/ntos_lightmode.scss
index 9cf1a647b778d..797fa101a9986 100644
--- a/tgui/packages/tgui/styles/themes/ntos_lightmode.scss
+++ b/tgui/packages/tgui/styles/themes/ntos_lightmode.scss
@@ -6,37 +6,37 @@
@use 'sass:color';
@use 'sass:meta';
-$nanotrasen: #ffffff;
+$nanotrasen: hsl(0, 0%, 100%);
@use '../colors.scss' with (
- $primary: #000000,
- $label: #000000
+ $primary: hsl(0, 0%, 0%),
+ $label: hsl(0, 0%, 0%)
);
@use '../base.scss' with (
- $color-bg: white
+ $color-bg: hsl(0, 0%, 100%)
);
.theme-ntos_lightmode {
@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': rgba(0, 0, 0, 0.5)
+ 'background-color': hsla(0, 0%, 0%, 0.5)
)
);
@include meta.load-css(
- '../components/Section.scss',
- $with: ('background-color': rgba(119, 119, 119, 0.4))
+ 'pkg:tgui-styles/components/Section',
+ $with: ('background-color': hsla(0, 0%, 47%, 0.4))
);
@include meta.load-css(
- '../components/Tooltip.scss',
- $with: ('background-color': white)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(0, 0%, 100%))
);
// Layouts
@@ -44,24 +44,24 @@ $nanotrasen: #ffffff;
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': gray)
+ $with: ('background-color': hsl(0, 0%, 50%))
);
.Button {
- color: #161613;
+ color: hsl(45, 6%, 8%);
}
.Button:hover {
- background-color: #777777;
+ background-color: hsl(0, 0%, 47%);
transition: 0.1s;
}
.Section {
- color: black;
+ color: hsl(0, 0%, 0%);
}
.Tab {
- color: black;
+ color: hsl(0, 0%, 0%);
}
.Tab--selected {
- color: white;
- background-color: darkgray;
+ color: hsl(0, 0%, 100%);
+ background-color: hsl(0, 0%, 66%);
}
}
diff --git a/tgui/packages/tgui/styles/themes/ntos_spooky.scss b/tgui/packages/tgui/styles/themes/ntos_spooky.scss
index 147464218568c..5d1243c0b4133 100644
--- a/tgui/packages/tgui/styles/themes/ntos_spooky.scss
+++ b/tgui/packages/tgui/styles/themes/ntos_spooky.scss
@@ -3,12 +3,12 @@
@use 'sass:map';
@use '../colors.scss' with (
- $primary: #3f021a,
- $good: #e62626,
- $bad: #970934
+ $primary: hsl(345, 96%, 12%),
+ $good: hsl(0, 82%, 52%),
+ $bad: hsl(340, 91%, 32%)
);
@use '../base.scss' with (
- $color-bg: #240101,
+ $color-bg: hsl(0, 98%, 7%),
$color-bg-grad-spread: 12%
);
@@ -18,40 +18,40 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
- 'color-default': #7e0322,
- 'color-disabled': #363636,
- 'color-selected': #610a0a,
- 'color-caution': #1416a3,
- 'color-danger': #5c1e80
+ 'color-default': hsl(345, 96%, 25%),
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(0, 85%, 21%),
+ 'color-caution': hsl(240, 80%, 35%),
+ 'color-danger': hsl(282, 61%, 30%)
)
);
@include meta.load-css(
- '../components/Dimmer.scss',
+ 'pkg:tgui-styles/components/Dimmer',
$with: ('background-dimness': 0.45)
);
@include meta.load-css(
- '../components/Input.scss',
- $with: ('border-color': #473a37)
+ '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',
- $with: ('background-color': #740707)
+ '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',
- $with: ('background-color': #000000)
+ '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': rgba(190, 0, 0, 0.75),
- 'background-color': rgba(34, 1, 1, 0.5)
+ 'color-default-fill': hsla(0, 100%, 37%, 0.75),
+ 'background-color': hsla(0, 97%, 7%, 0.5)
)
);
@@ -60,7 +60,7 @@
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #6b0808)
+ $with: ('background-color': hsl(0, 88%, 23%))
);
.Layout__content {
diff --git a/tgui/packages/tgui/styles/themes/ntos_synth.scss b/tgui/packages/tgui/styles/themes/ntos_synth.scss
index 5085308dd3bcd..5cc6209489545 100644
--- a/tgui/packages/tgui/styles/themes/ntos_synth.scss
+++ b/tgui/packages/tgui/styles/themes/ntos_synth.scss
@@ -8,10 +8,10 @@
//@use 'sass:map';
//palette
-$cyan: #5edba5;
-$pink: #ed12f5;
-$orange: #ff9900;
-$purple: #463191;
+$cyan: hsl(156, 65%, 60%);
+$pink: hsl(300, 91%, 52%);
+$orange: hsl(36, 100%, 50%);
+$purple: hsl(248, 47%, 37%);
@use '../colors.scss' with (
$primary: $pink,
@@ -32,26 +32,26 @@ $purple: #463191;
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': $cyan,
- 'color-transparent-text': rgba(227, 240, 255, 0.75),
- 'color-disabled': #363636,
- 'color-selected': #465899,
- 'color-caution': #be6209
+ 'color-transparent-text': hsla(210, 100%, 94%, 0.75),
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(227, 37%, 45%),
+ 'color-caution': hsl(30, 88%, 39%)
)
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('color-default-fill': rgba(237, 18, 245, 0.75))
+ 'pkg:tgui-styles/components/ProgressBar',
+ $with: ('color-default-fill': hsla(300, 91%, 52%, 0.75))
);
@include meta.load-css(
- '../components/Section.scss',
- $with: ('background-color': rgba(0, 0, 0, 0.3))
+ 'pkg:tgui-styles/components/Section',
+ $with: ('background-color': hsla(0, 0%, 0%, 0.3))
);
@include meta.load-css(
- '../components/Tooltip.scss',
- $with: ('background-color': rgba(255, 153, 0, 0.75))
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsla(36, 100%, 50%, 0.75))
);
// Layouts
@@ -59,15 +59,15 @@ $purple: #463191;
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': rgba(3, 100, 117, 0.75))
+ $with: ('background-color': hsla(185, 95%, 23%, 0.75))
);
.Section {
color: $cyan;
background-image: linear-gradient(
to right,
- rgba(194, 0, 219, 0.75),
- rgba(3, 100, 117, 0.75)
+ hsla(300, 100%, 42%, 0.75),
+ hsla(185, 95%, 23%, 0.75)
);
}
.Button {
@@ -89,8 +89,8 @@ $purple: #463191;
color: $cyan;
background-image: linear-gradient(
to right,
- rgba(255, 153, 0, 0.4),
- rgba(194, 0, 219, 0.75)
+ hsla(36, 100%, 50%, 0.4),
+ hsla(300, 100%, 42%, 0.75)
);
}
.Tab--selected {
diff --git a/tgui/packages/tgui/styles/themes/ntos_terminal.scss b/tgui/packages/tgui/styles/themes/ntos_terminal.scss
index 234e20fce7605..3d9230c20887e 100644
--- a/tgui/packages/tgui/styles/themes/ntos_terminal.scss
+++ b/tgui/packages/tgui/styles/themes/ntos_terminal.scss
@@ -7,14 +7,14 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #24e87e,
- $label: #24e87e,
- $good: rgba(36, 232, 127, 0.5),
+ $primary: hsl(146, 82%, 53%),
+ $label: hsl(146, 82%, 53%),
+ $good: hsla(146, 82%, 53%, 0.5),
// $fg-map-keys: (),
// $bg-map-keys: (),
);
@use '../base.scss' with (
- $color-bg: #121b12,
+ $color-bg: hsl(120, 10%, 9%),
$color-bg-grad-spread: 0%
);
@@ -24,89 +24,89 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': rgba(0, 0, 0, 0),
- 'color-disabled': #4a6a4a,
- 'color-selected': rgba(36, 232, 127, 0.25)
+ 'color-disabled': hsl(120, 18%, 35%),
+ 'color-selected': hsla(146, 82%, 53%, 0.25)
)
);
@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': rgba(0, 0, 0, 0.5),
- 'color-default-fill': rgba(36, 232, 127, 0.5)
+ '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');
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': rgba(0, 97, 0, 0.25))
+ $with: ('background-color': hsla(120, 100%, 19%, 0.25))
);
.Layout__content {
//background-image: none;
background-image: repeating-linear-gradient(
0deg,
- rgba(black, 0.15),
- rgba(black, 0.15) 1px,
+ hsla(0, 0%, 0%, 0.15),
+ hsla(0, 0%, 0%, 0.15) 1px,
transparent 2.5px,
transparent 5px
),
- radial-gradient(rgba(0, 97, 0, 0.75), black 120%);
+ radial-gradient(hsla(120, 100%, 19%, 0.75), black 120%);
background-size: 100%, 100%;
background-position: center, center;
}
.Button {
font: Inconsolata;
- color: #24e87e;
- text-shadow: 0 0 2px #24e87e;
+ color: hsl(146, 82%, 53%);
+ text-shadow: 0 0 2px hsl(146, 82%, 53%);
}
.Button:hover {
- background-color: rgba(36, 232, 127, 0.25);
+ background-color: hsla(146, 82%, 53%, 0.25);
transition: 0.1s;
}
.Button--selected {
- color: #24e87e;
+ color: hsl(146, 82%, 53%);
}
body {
//background-color: black;
- color: white;
+ color: hsl(0, 0%, 100%);
font: 1.3rem Inconsolata;
- text-shadow: 0 0 2px #24e87e;
+ text-shadow: 0 0 2px hsl(146, 82%, 53%);
//font: bold 12px Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.Section {
- color: rgb(36, 232, 126);
+ color: hsl(146, 82%, 53%);
}
.Tab {
- color: #24e87e;
+ color: hsl(146, 82%, 53%);
}
.Tab--selected {
- color: #24e87e;
- border: 2px solid #24e87e;
- background-color: rgba(36, 232, 127, 0.25);
+ color: hsl(146, 82%, 53%);
+ border: 2px solid hsl(146, 82%, 53%);
+ background-color: hsla(146, 82%, 53%, 0.25);
}
::selection {
- background: #0080ff;
+ background: hsl(210, 100%, 50%);
text-shadow: none;
}
.Table {
- text-shadow: 0 0 2px #24e87e;
+ text-shadow: 0 0 2px hsl(146, 82%, 53%);
}
.Flex {
- text-shadow: 0 0 2px #24e87e;
+ text-shadow: 0 0 2px hsl(146, 82%, 53%);
}
}
diff --git a/tgui/packages/tgui/styles/themes/paper.scss b/tgui/packages/tgui/styles/themes/paper.scss
index 2f9fa6e16f2bd..65b23a93136cf 100644
--- a/tgui/packages/tgui/styles/themes/paper.scss
+++ b/tgui/packages/tgui/styles/themes/paper.scss
@@ -7,7 +7,7 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #ffffff,
+ $primary: hsl(0, 0%, 100%),
$bg-lightness: 25%,
$fg-lightness: -10%,
// Commenting out color maps will adjust all colors based on the lightness
@@ -16,8 +16,8 @@
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-fg: #000000,
- $color-bg: #dfdfdf,
+ $color-fg: hsl(0, 0%, 0%),
+ $color-bg: hsl(0, 0%, 87%),
$color-bg-grad-spread: 0%
);
@@ -30,20 +30,20 @@ $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',
- $with: ('background-color': rgba(0, 0, 0, 0.1))
+ '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': #e8e4c9,
- 'color-disabled': #363636,
- 'color-selected': #9d0808,
- 'color-caution': #be6209,
- 'color-danger': #9a9d00,
- 'color-transparent-text': rgba(0, 0, 0, 0.5)
+ 'color-default': hsl(50, 50%, 90%),
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(0, 100%, 30%),
+ 'color-caution': hsl(30, 90%, 40%),
+ 'color-danger': hsl(60, 100%, 30%),
+ 'color-transparent-text': hsla(0, 0%, 0%, 0.5)
)
);
@@ -56,9 +56,9 @@ $font-size: 24px;
@include meta.load-css(
'../layouts/TitleBar.scss',
$with: (
- 'text-color': rgba(0, 0, 0, 0.75),
+ 'text-color': hsla(0, 0%, 0%, 0.75),
'background-color': base.$color-bg,
- 'shadow-color-core': rgba(0, 0, 0, 0.25)
+ 'shadow-color-core': hsla(0, 0%, 0%, 0.25)
)
);
@@ -68,9 +68,9 @@ $font-size: 24px;
width: 120px;
border: none;
background: transparent;
- border-bottom: 1px solid #000;
+ border-bottom: 1px solid hsl(0, 0%, 0%);
outline: none;
- background-color: rgba(255, 255, 62, 0.8);
+ background-color: hsla(60, 100%, 60%, 0.8);
padding: 0 4px;
margin-right: 2px;
line-height: 17px;
@@ -99,13 +99,13 @@ $font-size: 24px;
padding: 0 6px;
font-family: Verdana, sans-serif;
background-color: transparent;
- color: #fff;
+ color: hsl(0, 0%, 100%);
color: inherit;
&:-ms-input-placeholder {
font-style: italic;
- color: #777;
- color: rgba(255, 255, 255, 0.45);
+ color: hsl(0, 0%, 47%);
+ color: hsla(0, 0%, 100%, 0.45);
}
}
@@ -124,9 +124,9 @@ $font-size: 24px;
display: inline-block;
border: none;
background: transparent;
- border-bottom: 1px solid #000;
+ border-bottom: 1px solid hsl(0, 0%, 0%);
outline: none;
- background-color: rgba(255, 255, 62, 0.8);
+ background-color: hsla(60, 100%, 60%, 0.8);
padding: 0 4px;
margin-right: 2px;
line-height: 17px;
@@ -138,9 +138,9 @@ $font-size: 24px;
display: inline-block;
border: none;
background: transparent;
- border-bottom: 1px solid #000;
+ border-bottom: 1px solid hsl(0, 0%, 0%);
outline: none;
- background-color: rgba(255, 255, 62, 0.8);
+ background-color: hsla(60, 100%, 60%, 0.8);
padding: 0 4px;
margin-right: 2px;
line-height: 17px;
@@ -158,9 +158,9 @@ $font-size: 24px;
border: none;
background: transparent;
- border-bottom: 1px solid #000;
+ border-bottom: 1px solid hsl(0, 0%, 0%);
outline: none;
- background-color: rgba(255, 255, 62, 0.8);
+ background-color: hsla(60, 100%, 60%, 0.8);
padding: 0 4px;
margin-right: 2px;
line-height: 17px;
@@ -172,9 +172,9 @@ $font-size: 24px;
border: none;
background: transparent;
- border-bottom: 1px solid #000;
+ border-bottom: 1px solid hsl(0, 0%, 0%);
outline: none;
- background-color: rgba(255, 255, 62, 0.8);
+ background-color: hsla(60, 100%, 60%, 0.8);
padding: 0 4px;
margin-right: 2px;
line-height: 17px;
diff --git a/tgui/packages/tgui/styles/themes/retro.scss b/tgui/packages/tgui/styles/themes/retro.scss
index 9e08c8b9caef6..f36aaa5c8ac13 100644
--- a/tgui/packages/tgui/styles/themes/retro.scss
+++ b/tgui/packages/tgui/styles/themes/retro.scss
@@ -7,12 +7,12 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #000000,
+ $primary: hsl(0, 0%, 0%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #e8e4c9,
+ $color-bg: hsl(48, 38%, 84%),
$color-bg-grad-spread: 0%,
$border-radius: 0
);
@@ -25,44 +25,44 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
- 'color-default': #e8e4c9,
- 'color-disabled': #505046,
- 'color-selected': #9d0808,
- 'color-caution': #be6209,
- 'color-danger': #9a9d00
+ 'color-default': hsl(48, 38%, 84%),
+ 'color-disabled': hsl(60, 6%, 28%),
+ 'color-selected': hsl(0, 91%, 31%),
+ 'color-caution': hsl(28, 87%, 39%),
+ 'color-danger': hsl(61, 100%, 30%)
)
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('background-color': rgba(0, 0, 0, 0.5))
+ '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');
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #585337)
+ $with: ('background-color': hsl(48, 10%, 28%))
);
.Button {
font-family: monospace;
- color: #161613;
- border: base.em(2px) outset #e8e4c9;
- outline: base.em(1px) solid #161613;
+ color: hsl(60, 6%, 8%);
+ border: base.em(2px) outset hsl(48, 38%, 84%);
+ outline: base.em(1px) solid hsl(60, 6%, 8%);
}
.Button--disabled {
- color: #c5c5c2;
+ color: hsl(60, 6%, 77%);
font-family: monospace;
&:hover {
- color: #ffffff;
+ color: hsl(0, 0%, 100%);
}
&:focus {
- color: #ffffff;
+ color: hsl(0, 0%, 100%);
}
}
diff --git a/tgui/packages/tgui/styles/themes/spookyconsole.scss b/tgui/packages/tgui/styles/themes/spookyconsole.scss
index 07fd5b4dbe3d8..a15cf23aa1119 100644
--- a/tgui/packages/tgui/styles/themes/spookyconsole.scss
+++ b/tgui/packages/tgui/styles/themes/spookyconsole.scss
@@ -3,14 +3,14 @@
@use 'sass:map';
@use '../colors.scss' with (
- $primary: #3f021a,
- $good: #010005,
- $bad: #970934,
+ $primary: hsl(345, 96%, 12%),
+ $good: hsl(240, 100%, 1%),
+ $bad: hsl(340, 91%, 32%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #240101,
+ $color-bg: hsl(0, 100%, 7%),
$color-bg-grad-spread: 12%
);
@@ -28,35 +28,35 @@ $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': #7e0322,
- 'color-disabled': #363636,
- 'color-selected': #610a0a,
- 'color-caution': #1416a3,
- 'color-danger': #5c1e80,
+ 'color-default': hsl(345, 96%, 25%),
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(0, 85%, 21%),
+ 'color-caution': hsl(240, 80%, 35%),
+ 'color-danger': hsl(282, 61%, 30%),
'bg-map': $updated-bg-map
)
);
@include meta.load-css(
- '../components/Dimmer.scss',
+ 'pkg:tgui-styles/components/Dimmer',
$with: ('background-dimness': 0.45)
);
@include meta.load-css(
- '../components/Input.scss',
- $with: ('border-color': #473a37)
+ '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',
- $with: ('background-color': #740707)
+ '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',
- $with: ('background-color': #000000)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(0, 0%, 0%))
);
// Layouts
@@ -64,7 +64,7 @@ $updated-bg-map: map.set($updated-bg-map, 'bad', colors.$bad);
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #6b0808)
+ $with: ('background-color': hsl(0, 88%, 23%))
);
.Layout__content {
diff --git a/tgui/packages/tgui/styles/themes/syndicate.scss b/tgui/packages/tgui/styles/themes/syndicate.scss
index 4a547edef9b66..f4f82a6c171aa 100644
--- a/tgui/packages/tgui/styles/themes/syndicate.scss
+++ b/tgui/packages/tgui/styles/themes/syndicate.scss
@@ -7,12 +7,12 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #397439,
+ $primary: hsl(120, 34%, 35%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #550202,
+ $color-bg: hsl(0, 96%, 17%),
$color-bg-grad-spread: 6%
);
@@ -22,35 +22,35 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': colors.$primary,
- 'color-disabled': #363636,
- 'color-selected': #9d0808,
- 'color-caution': #be6209,
- 'color-danger': #9a9d00
+ 'color-disabled': hsl(0, 0%, 21%),
+ 'color-selected': hsl(0, 91%, 31%),
+ 'color-caution': hsl(28, 87%, 39%),
+ 'color-danger': hsl(61, 100%, 30%)
)
);
@include meta.load-css(
- '../components/Input.scss',
- $with: ('border-color': #87ce87)
+ 'pkg:tgui-styles/components/Input',
+ $with: ('border-color': hsl(120, 60%, 70%))
);
@include meta.load-css(
- '../components/NoticeBox.scss',
- $with: ('background-color': #910101)
+ 'pkg:tgui-styles/components/NoticeBox',
+ $with: ('background-color': hsl(0, 98%, 28%))
);
@include meta.load-css(
- '../components/NumberInput.scss',
- $with: ('border-color': #87ce87)
+ 'pkg:tgui-styles/components/NumberInput',
+ $with: ('border-color': hsl(120, 60%, 70%))
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('background-color': rgba(0, 0, 0, 0.5))
+ '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',
- $with: ('background-color': #4a0202)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(0, 96%, 14%))
);
// Layouts
@@ -58,7 +58,7 @@
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #910101)
+ $with: ('background-color': hsl(0, 98%, 28%))
);
.Layout__content {
diff --git a/tgui/packages/tgui/styles/themes/wizard.scss b/tgui/packages/tgui/styles/themes/wizard.scss
index 9c4056cc1289a..3de051e8e635f 100644
--- a/tgui/packages/tgui/styles/themes/wizard.scss
+++ b/tgui/packages/tgui/styles/themes/wizard.scss
@@ -7,12 +7,12 @@
@use 'sass:meta';
@use '../colors.scss' with (
- $primary: #1596b6,
+ $primary: hsl(191, 79%, 41%),
$fg-map-keys: (),
$bg-map-keys: ()
);
@use '../base.scss' with (
- $color-bg: #213e4e,
+ $color-bg: hsl(204, 40%, 21%),
$color-bg-grad-spread: 6%,
$border-radius: 2px
);
@@ -23,35 +23,35 @@
// Components
@include meta.load-css(
- '../components/Button.scss',
+ 'pkg:tgui-styles/components/Button',
$with: (
'color-default': colors.$primary,
- 'color-disabled': #02426d,
- 'color-selected': #465899,
- 'color-caution': #be6209,
- 'color-danger': #b30707
+ 'color-disabled': hsl(204, 97%, 21%),
+ 'color-selected': hsl(227, 40%, 44%),
+ 'color-caution': hsl(28, 89%, 39%),
+ 'color-danger': hsl(0, 91%, 35%)
)
);
@include meta.load-css(
- '../components/Input.scss',
- $with: ('border-color': #404b6e)
+ 'pkg:tgui-styles/components/Input',
+ $with: ('border-color': hsl(227, 25%, 34%))
);
@include meta.load-css(
- '../components/NoticeBox.scss',
- $with: ('background-color': #a82d55)
+ 'pkg:tgui-styles/components/NoticeBox',
+ $with: ('background-color': hsl(340, 58%, 41%))
);
@include meta.load-css(
- '../components/NumberInput.scss',
- $with: ('border-color': #404b6e)
+ 'pkg:tgui-styles/components/NumberInput',
+ $with: ('border-color': hsl(227, 25%, 34%))
);
@include meta.load-css(
- '../components/ProgressBar.scss',
- $with: ('background-color': rgba(0, 0, 0, 0.5))
+ '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',
- $with: ('background-color': #2da848)
+ 'pkg:tgui-styles/components/Tooltip',
+ $with: ('background-color': hsl(134, 61%, 42%))
);
// Layouts
@@ -59,7 +59,7 @@
@include meta.load-css('../layouts/Window.scss');
@include meta.load-css(
'../layouts/TitleBar.scss',
- $with: ('background-color': #1b9e26)
+ $with: ('background-color': hsl(134, 71%, 31%))
);
.Layout__content {
diff --git a/tgui/yarn.lock b/tgui/yarn.lock
index b41f103989440..21779bbe5e8eb 100644
--- a/tgui/yarn.lock
+++ b/tgui/yarn.lock
@@ -17137,9 +17137,9 @@ __metadata:
languageName: node
linkType: hard
-"sass-loader@npm:^14.2.1":
- version: 14.2.1
- resolution: "sass-loader@npm:14.2.1"
+"sass-loader@npm:^16.0.3":
+ version: 16.0.3
+ resolution: "sass-loader@npm:16.0.3"
dependencies:
neo-async: "npm:^2.6.2"
peerDependencies:
@@ -17159,7 +17159,7 @@ __metadata:
optional: true
webpack:
optional: true
- checksum: 10c0/9a48d454584d96d6c562eb323bb9e3c6808e930eeaaa916975b97d45831e0b87936a8655cdb3a4512a25abc9587dea65a9616e42396be0d7e7c507a4795a8146
+ checksum: 10c0/2dc188dd0d5276ed0251eee7f245848ccf9df6ec121227462403f322c17a3dbe100fb60d47968f078e585e4aced452eb7fa1a8e55b415d5de3151fa1bbf2d561
languageName: node
linkType: hard
@@ -18724,13 +18724,13 @@ __metadata:
languageName: unknown
linkType: soft
-"tgui-core@npm:^1.2.0":
- version: 1.2.0
- resolution: "tgui-core@npm:1.2.0"
+"tgui-core@npm:^1.3.0":
+ version: 1.3.0
+ resolution: "tgui-core@npm:1.3.0"
peerDependencies:
react: ^18.2.0
react-dom: ^18.2.0
- checksum: 10c0/1eead0edbe0df5c49bfa88f0d2caa5df743057be75e9c526d0afd838b8def072c67fe60435c66cba52551c4ef70749d60d68094fa103542187008998002714f7
+ checksum: 10c0/448c38a23149a13f80dcbe3688f3edba8dbe25dd65fc1b48036627f6e992996107a7962cd7bca6194f41959dc3aad531fdf3fbe032decaac7989c32721ad99a1
languageName: node
linkType: hard
@@ -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:."
@@ -18815,7 +18824,7 @@ __metadata:
mini-css-extract-plugin: "npm:^2.9.2"
prettier: "npm:^3.2.5"
sass: "npm:^1.80.6"
- sass-loader: "npm:^14.2.1"
+ sass-loader: "npm:^16.0.3"
style-loader: "npm:^4.0.0"
swc-loader: "npm:^0.2.6"
typescript: "npm:^5.6.3"
@@ -18845,9 +18854,10 @@ __metadata:
react: "npm:^18.3.1"
react-dom: "npm:^18.3.1"
react-popper: "npm:^2.3.0"
- tgui-core: "npm:^1.2.0"
+ tgui-core: "npm:^1.3.0"
tgui-dev-server: "workspace:*"
tgui-polyfill: "workspace:*"
+ tgui-styles: "npm:^0.0.10"
languageName: unknown
linkType: soft
diff --git a/tools/UpdatePaths/Scripts/86084_replace_floorbots.txt b/tools/UpdatePaths/Scripts/86084_replace_floorbots.txt
new file mode 100644
index 0000000000000..711e01207ea43
--- /dev/null
+++ b/tools/UpdatePaths/Scripts/86084_replace_floorbots.txt
@@ -0,0 +1,2 @@
+/mob/living/simple_animal/bot/floorbot : /mob/living/basic/bot/repairbot {@OLD}
+/obj/item/bot_assembly/floorbot : /obj/item/bot_assembly/repairbot {@OLD}
\ No newline at end of file
diff --git a/tools/UpdatePaths/Scripts/87828_exofab_directions.txt b/tools/UpdatePaths/Scripts/87828_exofab_directions.txt
new file mode 100644
index 0000000000000..468bc23847a98
--- /dev/null
+++ b/tools/UpdatePaths/Scripts/87828_exofab_directions.txt
@@ -0,0 +1 @@
+/obj/machinery/mecha_part_fabricator/@SUBTYPES{dir = @ANY} : /obj/machinery/mecha_part_fabricator/@SUBTYPES{@OLD;dir=@SKIP;drop_direction=@OLD:dir}
diff --git a/tools/UpdatePaths/Scripts/87866_fish_tanks.txt b/tools/UpdatePaths/Scripts/87866_fish_tanks.txt
new file mode 100644
index 0000000000000..a0762acacf27a
--- /dev/null
+++ b/tools/UpdatePaths/Scripts/87866_fish_tanks.txt
@@ -0,0 +1 @@
+/obj/structure/aquarium/lawyer : /obj/item/fish_tank/lawyer
diff --git a/tools/UpdatePaths/Scripts/repaths_a357_to_c357.txt b/tools/UpdatePaths/Scripts/repaths_a357_to_c357.txt
new file mode 100644
index 0000000000000..28ad97efff1ab
--- /dev/null
+++ b/tools/UpdatePaths/Scripts/repaths_a357_to_c357.txt
@@ -0,0 +1,3 @@
+#comment Repaths instances of a357 with c357, so as to acknowledge that it is consistent with other casings.
+
+/obj/item/ammo_casing/c357 : /obj/item/ammo_casing/a357{@OLD}
diff --git a/tools/ci/ci_config.txt b/tools/ci/ci_config.txt
index 51e08e6328ba1..1e6f19eb692c9 100644
--- a/tools/ci/ci_config.txt
+++ b/tools/ci/ci_config.txt
@@ -5,6 +5,4 @@ FEEDBACK_DATABASE tg_ci
FEEDBACK_TABLEPREFIX
FEEDBACK_LOGIN root
FEEDBACK_PASSWORD
-LAVALAND_BUDGET 0
-SPACE_BUDGET 0
AUXTOOLS_ENABLED
diff --git a/tools/hslify/README.md b/tools/hslify/README.md
new file mode 100644
index 0000000000000..cc6937ed4f69c
--- /dev/null
+++ b/tools/hslify/README.md
@@ -0,0 +1,21 @@
+# HSLify
+
+This is a simple Python script that converts all hex colors in a directory to their corresponding HSL values.
+
+## Usage
+
+1. Install the required dependencies:
+
+```bash
+pip install colormath
+```
+
+2. Move files so that hslify is in the same directory as the files you want to process. That can be in this folder, or by moving this folder to the same directory as the files you want to process.
+
+3. Run the script:
+
+```bash
+py hslify.py
+```
+
+4. Formatting is strange, so it may be necessary to save the file manually for prettier to format it.
diff --git a/tools/hslify/hslify.py b/tools/hslify/hslify.py
new file mode 100644
index 0000000000000..9a87ad4415710
--- /dev/null
+++ b/tools/hslify/hslify.py
@@ -0,0 +1,27 @@
+import re
+import glob
+from colormath.color_objects import sRGBColor, HSLColor
+from colormath.color_conversions import convert_color
+
+def hex_to_hsl(hex_color):
+ rgb = sRGBColor.new_from_rgb_hex(hex_color)
+ hsl = convert_color(rgb, HSLColor)
+ return f"hsl({hsl.hsl_h:.1f}, {hsl.hsl_s * 100:.1f}%, {hsl.hsl_l * 100:.1f}%)"
+
+def replace_hex_with_hsl(file_path):
+ with open(file_path, 'r') as file:
+ content = file.read()
+
+ hex_pattern = re.compile(r'#([0-9a-fA-F]{6})')
+ updated_content = hex_pattern.sub(lambda match: hex_to_hsl(match.group(0)), content)
+
+ with open(file_path, 'w') as file:
+ file.write(updated_content)
+
+def process_all_scss_files():
+ scss_files = glob.glob('*.scss')
+ for scss_file in scss_files:
+ replace_hex_with_hsl(scss_file)
+
+if __name__ == "__main__":
+ process_all_scss_files()