tgui-core 1.8.4 → 2.0.1

package/styles/components/Input.scss

@@ -1,26 +1,28 @@
 @use "../base";
-@use "../functions" as *;
 
-$text-color: base.$color-fg !default;
-$background-color: hsl(0, 0%, 3.9%) !default;
-$border-color: hsl(212.3, 100%, 76.7%) !default;
-$border-radius: base.$border-radius !default;
-$font-family: Verdana, sans-serif !default;
-$mono-font-family: "Consolas", monospace !default;
+$text-color: 0 !default;
+$background-color: 0 !default;
+$border-color: 0 !default;
+$border-radius: 0 !default;
+$font-family: 0 !default;
+$mono-font-family: 0 !default;
 
 .Input {
+  overflow: visible;
   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;
+  padding: 0 var(--space-sm);
+  margin-right: var(--space-xs);
+  background-color: var(--input-background);
+  color: var(--input-color);
+  border: var(--border-thickness-tiny) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+
+  &:focus-within {
+    border-color: var(--input-border-color-focus);
+  }
 }
 
 .Input--fluid {
@@ -36,10 +38,7 @@ $mono-font-family: "Consolas", monospace !default;
 .Input__input {
   display: block;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   border: 0;
   outline: 0;
   width: 100%;
@@ -47,19 +46,18 @@ $mono-font-family: "Consolas", monospace !default;
   line-height: base.em(17px);
   height: base.em(17px);
   margin: 0;
-  padding: 0 0.5em;
-  font-family: $font-family;
+  padding: 0 var(--space-m);
+  font-family: var(--input-font-family);
   background-color: transparent;
-  color: $text-color;
+  color: var(--input-color);
   color: inherit;
 
-  &:-ms-input-placeholder {
+  &::placeholder {
     font-style: italic;
-    color: hsl(0, 0%, 46.7%);
-    color: hsla(0, 0%, 100%, 0.45);
+    color: var(--input-color-placeholder);
   }
 }
 
 .Input--monospace .Input__input {
-  font-family: $mono-font-family;
+  font-family: var(--input-font-family-mono);
 }

package/styles/components/Knob.scss

@@ -1,24 +1,25 @@
 @use "../base";
 @use "../colors";
-@use "../functions" as *;
 
-$bg-map: colors.$bg-map !default;
-$fg-map: colors.$fg-map !default;
-$ring-color: hsl(212.2, 46.8%, 60.2%) !default;
-$knob-color: hsl(0, 0%, 20%) !default;
-$popup-background-color: hsl(0, 0%, 0%) !default;
-$popup-text-color: hsl(0, 0%, 100%) !default;
+$pi: 3.1416;
+$bg-map: colors.$color-map !default;
+$fg-map: colors.$color-map !default;
 
-$inner-padding: 0.1em;
+$ring-color: 0 !default;
+$knob-color: 0 !default;
+$popup-background-color: 0 !default;
+$popup-text-color: 0 !default;
+$inner-padding: 0;
 
 .Knob {
+  user-select: none;
+  cursor: var(--cursor-n-resize);
   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.
@@ -31,27 +32,21 @@ $inner-padding: 0.1em;
 
 .Knob__circle {
   position: absolute;
-  top: $inner-padding;
-  bottom: $inner-padding;
-  left: $inner-padding;
-  right: $inner-padding;
+  inset: var(--knob-inner-padding);
   margin: 0.3em;
-  background-color: $knob-color;
+  background-color: var(--knob-color);
   background-image: linear-gradient(
     to bottom,
-    rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0) 100%
+    hsl(from var(--knob-color) h s calc(l + 15)) 0%,
+    var(--knob-color) 100%
   );
-  border-radius: 50%;
-  box-shadow: 0 0.05em 0.5em 0 rgba(0, 0, 0, 0.5);
+  border-radius: var(--border-radius-circular);
+  box-shadow: var(--shadow-glow-medium) hsl(from var(--knob-color) h s l / 0.25);
 }
 
 .Knob__cursorBox {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 
 .Knob__cursor {
@@ -60,41 +55,38 @@ $inner-padding: 0.1em;
   margin: 0 auto;
   width: 0.2em;
   height: 0.8em;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: hsl(from var(--knob-color) h s 85);
 }
 
 .Knob__popupValue {
+  white-space: nowrap;
   position: absolute;
-  top: -2rem;
-  right: 50%;
+  top: 0;
+  left: 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;
+  padding: var(--space-s) var(--space-m);
+  background-color: var(--knob-popup-background);
+  color: var(--knob-popup-color);
+  border-radius: var(--knob-popup-border-radius);
+  transform: translateY(-100%) translateX(-50%);
+  backdrop-filter: var(--knob-popup-blur);
 }
 
 .Knob__ring {
+  overflow: visible;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: $inner-padding;
+  inset: 0;
+  padding: var(--knob-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: hsl(from var(--knob-ring-color) h s l / 0.15);
   stroke-width: 8;
   stroke-linecap: round;
   stroke-dasharray: 75 * $pi;
@@ -110,11 +102,11 @@ $pi: 3.1416;
 
 .Knob__ringFill {
   fill: transparent;
-  stroke: $ring-color;
+  stroke: var(--knob-ring-color);
   stroke-width: 8;
   stroke-linecap: round;
   stroke-dasharray: 100 * $pi;
-  transition: stroke 50ms ease-out;
+  transition: stroke var(--transition-time-medium) ease-out;
 }
 
 @each $color-name, $color-value in $fg-map {
@@ -122,5 +114,9 @@ $pi: 3.1416;
     .Knob__ringFill {
       stroke: $color-value;
     }
+
+    .Knob__ringTrack {
+      stroke: hsl(from $color-value h s l / 0.15);
+    }
   }
 }

package/styles/components/LabeledList.scss

@@ -2,14 +2,11 @@
 
 .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;
+  margin: calc(-1 * var(--space-s)) calc(-1 * var(--space-m)) 0;
   padding: 0;
 }
 
@@ -24,7 +21,7 @@
 .LabeledList__cell {
   display: table-cell;
   margin: 0;
-  padding: 0.25em 0.5em;
+  padding: var(--space-s) var(--space-m);
   border: 0;
   text-align: left;
 }
@@ -39,6 +36,11 @@
   width: 0.1%;
   white-space: nowrap;
   text-align: right;
-  padding-top: base.em(1px);
+  padding-top: var(--space-xxs);
   padding-bottom: 0;
 }
+
+.LabeledList__breakContents {
+  word-break: break-all;
+  word-wrap: break-word;
+}

package/styles/components/MenuBar.scss

@@ -1,56 +1,52 @@
-@use "sass:color";
 @use "../base";
 
-$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-family: var(--menu-bar-font-family);
   font-size: base.em(12px);
   line-height: base.em(17px);
 }
 
 .MenuBar__hover {
   &:hover {
-    background-color: color.adjust($background-color, $lightness: 30%);
+    background-color: hsl(from var(--menu-bar-background) h s calc(l + 20));
     transition: background-color 0ms;
   }
 }
 
 .MenuBar__MenuBarButton {
-  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
+  padding: var(--space-s) var(--space-m);
 }
 
 .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);
+  background-color: var(--menu-bar-background);
+  padding: var(--space-sm);
+  box-shadow: 4px 6px 5px -2px hsla(0, 0%, 0%, 0.5);
+  z-index: 5;
 }
 
 .MenuBar__MenuItem {
-  z-index: $dropdown-z-index;
-  transition: background-color 100ms ease-out;
-  background-color: $background-color;
+  transition: background-color var(--menu-bar-transition) ease-out;
+  background-color: var(--menu-bar-background);
   white-space: nowrap;
-  padding: 0.3rem 2rem 0.3rem 3rem;
+  padding: var(--space-sm) var(--space-xl) var(--space-sm)
+    calc(var(--space-xxl) + 1rem);
 }
 
 .MenuBar__MenuItemToggle {
-  padding: 0.3rem 2rem 0.3rem 0;
+  padding: var(--space-sm) var(--space-xl) var(--space-sm) 0;
 }
 
 .MenuBar__MenuItemToggle__check {
   display: inline-block;
   vertical-align: middle;
-  min-width: 3rem;
-  padding-left: 0.3rem;
+  text-align: center;
+  min-width: 2.5rem;
+  padding-left: var(--space-sm);
 }
 
 .MenuBar__over {
@@ -66,6 +62,6 @@ $dropdown-z-index: 5;
 
 .MenuBar__Separator {
   display: block;
-  margin: 0.3rem 0.3rem 0.3rem 2.3rem;
-  border-top: 1px solid $separator-color;
+  margin: var(--space-sm);
+  border-top: var(--border-thickness-tiny) solid var(--color-border);
 }

package/styles/components/Modal.scss

@@ -1,9 +1,10 @@
-@use "../base";
-
-$background-color: base.$color-bg !default;
-
 .Modal {
-  background-color: $background-color;
-  max-width: calc(100% - 1rem);
-  padding: 1rem;
+  background-color: var(--modal-background);
+  padding: var(--modal-padding);
+
+  &__dimmer .Dimmer__inner {
+    // 1rem for window padding, 1rem like modal margin
+    max-width: calc(100vw - var(--space-xxl));
+    max-height: calc(100vh - var(--space-xxl));
+  }
 }

package/styles/components/NoticeBox.scss

@@ -1,60 +1,56 @@
-@use "sass:color";
 @use "../base";
 @use "../colors";
-@use "../functions" as *;
 
-// NoticeBox
-$background-color: hsl(36.9, 37.9%, 57.1%) !default;
-$color-stripes: rgba(0, 0, 0, 0.1) !default;
-$color-border: hsl(0, 0%, 15.3%) !default;
-$bg-map: colors.$bg-map !default;
+$bg-map: colors.$color-map !default;
+$fg-map: colors.$color-map !default;
+$background-color: 0 !default;
+$color-stripes: 0 !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;
+  padding: var(--space-sm) var(--space-m);
+  margin-bottom: var(--space-m);
+  color: var(--notice-box-color);
+  background-color: var(--notice-box-background);
   background-image: repeating-linear-gradient(
     -45deg,
     transparent,
     transparent base.em(10px),
-    $color-stripes base.em(10px),
-    $color-stripes base.em(20px)
+    var(--notice-box-stripes) base.em(10px),
+    var(--notice-box-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%);
+  background-color: hsl(from $color h calc(s - 15) calc(l - 15));
+  color: var(--color-text-fixed-white);
 }
 
 @each $color-name, $color-value in $bg-map {
   .NoticeBox--color--#{$color-name} {
+    @each $color in colors.$low-contrast-color-map {
+      @if $color-name == $color {
+        --color-text-fixed-white: var(--color-black);
+      }
+    }
+
     @include box-color($color-value);
   }
 }
 
 .NoticeBox--type--info {
-  @include box-color(colors.$blue);
+  @include box-color(var(--color-blue));
 }
 
 .NoticeBox--type--success {
-  @include box-color(colors.$green);
+  @include box-color(var(--color-green));
 }
 
 .NoticeBox--type--warning {
-  @include box-color(colors.$orange);
+  @include box-color(var(--color-orange));
 }
 
 .NoticeBox--type--danger {
-  @include box-color(colors.$red);
+  @include box-color(var(--color-red));
 }

package/styles/components/NumberInput.scss

@@ -3,25 +3,29 @@
 @use "../functions" as *;
 @use "./Input";
 
-$text-color: Input.$text-color !default;
-$background-color: Input.$background-color !default;
-$border-color: Input.$border-color !default;
-$border-radius: Input.$border-radius !default;
+$text-color: 0 !default;
+$background-color: 0 !default;
+$border-color: 0 !default;
+$border-radius: 0 !default;
 
 .NumberInput {
+  cursor: var(--cursor-n-resize);
+  overflow: visible;
   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;
+  line-height: base.em(17px);
+  padding: 0 var(--space-sm);
+  margin-right: var(--space-xs);
+  background-color: var(--number-input-background);
+  color: var(--number-input-border-color-active);
+  border: var(--border-thickness-tiny) solid var(--number-input-border-color);
+  border-radius: var(--number-input-border-radius);
+  transition: border-color var(--number-input-transition);
+
+  &:active {
+    border-color: var(--number-input-border-color-active);
+  }
 }
 
 .NumberInput--fluid {
@@ -29,14 +33,14 @@ $border-radius: Input.$border-radius !default;
 }
 
 .NumberInput__content {
-  margin-left: 0.5em;
+  margin-left: var(--space-m);
 }
 
 .NumberInput__barContainer {
   position: absolute;
-  top: base.em(2px);
-  bottom: base.em(2px);
-  left: base.em(2px);
+  top: var(--space-xs);
+  bottom: var(--space-xs);
+  left: var(--space-xs);
 }
 
 .NumberInput__bar {
@@ -45,17 +49,16 @@ $border-radius: Input.$border-radius !default;
   left: 0;
   width: base.em(3px);
   box-sizing: border-box;
-  border-bottom: base.em(1px) solid $border-color;
-  background-color: $border-color;
+  border-bottom: var(--border-thickness-tiny) solid
+    var(--number-input-border-color-active);
+  background-color: var(--number-input-border-color-active);
 }
 
 .NumberInput__input {
   display: block;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  text-align: right;
+  inset: 0;
   border: 0;
   outline: 0;
   width: 100%;
@@ -63,9 +66,8 @@ $border-radius: Input.$border-radius !default;
   line-height: base.em(17px);
   height: base.em(17px);
   margin: 0;
-  padding: 0 0.5em;
+  padding: 0 var(--space-m);
   font-family: Verdana, sans-serif;
-  background-color: $background-color;
-  color: $text-color;
-  text-align: right;
+  background-color: var(--number-input-background);
+  color: var(--number-input-color);
 }

package/styles/components/ProgressBar.scss

@@ -1,35 +1,35 @@
 @use "../base";
 @use "../colors";
-@use "../functions" 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;
+$bg-map: colors.$color-map !default;
+$fg-map: colors.$color-map !default;
+$color-default-fill: 0 !default;
+$background-color: 0 !default;
+$border-radius: 0 !default;
 
 .ProgressBar {
   display: inline-block;
   position: relative;
   width: 100%;
-  padding: 0 0.5em;
-  border-width: base.em(1px) !important;
+  padding: 0 var(--space-m);
+  border-width: var(--border-thickness-tiny) !important;
   border-style: solid !important;
-  border-radius: $border-radius;
-  background-color: $background-color;
-  transition: border-color 900ms ease-out;
+  border-radius: var(--progress-bar-border-radius);
+  background-color: var(--progress-bar-background);
+  transition: border-color var(--progress-bar-transition) ease-out;
 }
 
 .ProgressBar__fill {
   position: absolute;
-  top: -0.5px;
-  left: 0px;
-  bottom: -0.5px;
+  top: 0;
+  bottom: 0;
+  left: 0;
 }
 
 .ProgressBar__fill--animated {
   transition:
-    background-color 900ms ease-out,
-    width 900ms ease-out;
+    background-color var(--progress-bar-transition) ease-out,
+    width var(--progress-bar-transition) ease-out;
 }
 
 .ProgressBar__content {
@@ -37,22 +37,30 @@ $bg-map: colors.$bg-map !default;
   line-height: base.em(17px);
   width: 100%;
   text-align: right;
+  user-select: none;
 }
 
 .ProgressBar--color--default {
-  border: base.em(1px) solid $color-default-fill;
+  border: var(--border-thickness-tiny) solid
+    hsl(from var(--progress-bar-fill) h s calc(l - var(--adjust-color)));
 
   .ProgressBar__fill {
-    background-color: $color-default-fill;
+    background-color: hsl(
+      from var(--progress-bar-fill) h s calc(l - var(--adjust-color))
+    );
   }
 }
 
 @each $color-name, $color-value in $bg-map {
   .ProgressBar--color--#{$color-name} {
-    border-color: $color-value !important;
+    border-color: hsl(
+      from $color-value h s calc(l - var(--adjust-color))
+    ) !important;
 
     .ProgressBar__fill {
-      background-color: $color-value;
+      background-color: hsl(
+        from $color-value h s calc(l - var(--adjust-color))
+      );
     }
   }
 }