Ports https://github.com/tgstation/tgstation/pull/50225

tgui/packages/tgui/components/Divider.js

@@ -0,0 +1,18 @@
+import { classes } from 'common/react';
+
+export const Divider = props => {
+  const {
+    vertical,
+    hidden,
+  } = props;
+  return (
+    <div
+      className={classes([
+        'Divider',
+        hidden && 'Divider--hidden',
+        vertical
+          ? 'Divider--vertical'
+          : 'Divider--horizontal',
+      ])} />
+  );
+};

tgui/packages/tgui/styles/atomic/outline.scss

@@ -0,0 +1,50 @@
+@use '../colors.scss';
+
+.outline-dotted {
+  outline-style: dotted !important;
+  outline-width: 2px !important;
+}
+
+.outline-dashed {
+  outline-style: dashed !important;
+  outline-width: 2px !important;
+}
+
+.outline-solid {
+  outline-style: solid !important;
+  outline-width: 2px !important;
+}
+
+.outline-double {
+  outline-style: double !important;
+  outline-width: 2px !important;
+}
+
+.outline-groove {
+  outline-style: groove !important;
+  outline-width: 2px !important;
+}
+
+.outline-ridge {
+  outline-style: ridge !important;
+  outline-width: 2px !important;
+}
+
+.outline-inset {
+  outline-style: inset !important;
+  outline-width: 2px !important;
+}
+
+.outline-outset {
+  outline-style: outset !important;
+  outline-width: 2px !important;
+}
+
+$fg-map: colors.$fg-map !default;
+$bg-map: colors.$bg-map !default;
+
+@each $color-name, $color-value in $fg-map {
+  .outline-color-#{$color-name} {
+    outline-color: $color-value !important;
+  }
+}

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

@@ -0,0 +1,16 @@
+.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, 0.75);
+  z-index: 1;
+}

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

@@ -0,0 +1,20 @@
+$color: rgba(255, 255, 255, 0.1) !default;
+$thickness: 2px !default;
+$spacing: 6px;
+
+.Divider--horizontal {
+  margin: $spacing 0;
+
+  &:not(.Divider--hidden) {
+    border-top: $thickness solid $color;
+  }
+}
+
+.Divider--vertical {
+  height: 100%;
+  margin: 0 $spacing;
+
+  &:not(.Divider--hidden) {
+    border-left: $thickness solid $color;
+  }
+}

tgui/packages/tgui/styles/main.scss

@@ -13,6 +13,7 @@
 @include meta.load-css('./atomic/outline.scss');
 @include meta.load-css('./atomic/position.scss');
 @include meta.load-css('./atomic/text.scss');
+@include meta.load-css('./atomic/outline.scss');
 
 // Components
 @include meta.load-css('./components/BlockQuote.scss');