tgui-core 1.8.4 → 2.0.1

package/styles/components/RoundGauge.scss

@@ -1,9 +1,29 @@
-@use "../base";
 @use "../colors";
-@use "../functions" as *;
 
-$fg-map: colors.$fg-map !default;
-$ring-color: hsl(212.2, 46.8%, 60.2%) !default;
+$pi: 3.1416;
+$fg-map: colors.$color-map !default;
+$ring-color: 0 !default;
+
+@keyframes RoundGauge__alertAnim {
+  0% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}
+
+@keyframes RoundGauge__needleAlertAnim {
+  0% {
+    transform: rotate(var(--round-gauge-needle-alert-rotation));
+  }
+  50% {
+    transform: rotate(calc(-1 * var(--round-gauge-needle-alert-rotation)));
+  }
+}
 
 .RoundGauge {
   font-size: 1rem;
@@ -11,13 +31,16 @@ $ring-color: hsl(212.2, 46.8%, 60.2%) !default;
   height: 1.3em;
   margin: 0 auto;
   margin-bottom: 0.2em;
-}
 
-$pi: 3.1416;
+  &__wrapper {
+    display: inline-block;
+    text-align: center;
+  }
+}
 
 .RoundGauge__ringTrack {
   fill: transparent;
-  stroke: rgba(255, 255, 255, 0.1);
+  stroke: hsla(0, 0%, 100%, 0.1);
   stroke-width: 10;
   stroke-dasharray: 50 * $pi;
   stroke-dashoffset: 50 * $pi;
@@ -25,20 +48,20 @@ $pi: 3.1416;
 
 .RoundGauge__ringFill {
   fill: transparent;
-  stroke: $ring-color;
+  stroke: var(--round-gauge-ring-color);
   stroke-width: 10;
   stroke-dasharray: 100 * $pi;
-  transition: stroke 50ms ease-out;
+  transition: stroke var(--round-gauge-transition) ease-out;
 }
 
 .RoundGauge__needle,
 .RoundGauge__ringFill {
-  transition: transform 50ms ease-in-out;
+  transition: transform var(--round-gauge-transition) ease-in-out;
 }
 
 .RoundGauge__needleLine,
 .RoundGauge__needleMiddle {
-  fill: colors.$bad;
+  fill: var(--color-red);
 }
 
 .RoundGauge__alert {
@@ -46,7 +69,17 @@ $pi: 3.1416;
   clip-rule: evenodd;
   stroke-linejoin: round;
   stroke-miterlimit: 2;
-  fill: rgba(255, 255, 255, 0.1);
+  fill: hsla(0, 0%, 100%, 0.1);
+  transform: scale(0.9);
+  transform-origin: top;
+
+  &.active {
+    ~ .RoundGauge__needle .RoundGauge__needleLine {
+      transform-origin: bottom;
+      animation: RoundGauge__needleAlertAnim
+        var(--round-gauge-needle-alert-animation) infinite;
+    }
+  }
 }
 
 .RoundGauge__alert.max {
@@ -62,22 +95,9 @@ $pi: 3.1416;
 @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
+      var(--round-gauge-alert-animation)
       cubic-bezier(0.34, 1.56, 0.64, 1)
       infinite;
   }
 }
-
-@keyframes RoundGauge__alertAnim {
-  0% {
-    opacity: 0.1;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.1;
-  }
-}

package/styles/components/Section.scss

@@ -3,16 +3,17 @@
 @use "../colors";
 @use "../functions";
 
-$title-text-color: base.$color-fg !default;
-$background-color: base.$color-bg-section !default;
-$separator-color: colors.$primary !default;
+$title-text-color: 0 !default;
+$background-color: 0 !default;
+$separator-color: 0 !default;
 
 .Section {
   position: relative;
-  margin-bottom: 0.5em;
-  background-color: functions.fake-alpha($background-color, base.$color-bg);
-  background-color: $background-color;
+  margin-bottom: var(--space-m);
+  background-color: var(--section-background);
   box-sizing: border-box;
+  /* Make base transparent, cause it uses section background color */
+  scrollbar-color: var(--color-scrollbar-thumb) transparent;
 
   &:last-child {
     margin-bottom: 0;
@@ -21,21 +22,22 @@ $separator-color: colors.$primary !default;
 
 .Section__title {
   position: relative;
-  padding: 0.5em;
-  border-bottom: base.em(2px) solid $separator-color;
+  padding: var(--space-m);
+  border-bottom: var(--section-separator-thickness) solid
+    var(--section-separator-color);
 }
 
 .Section__titleText {
   font-size: base.em(14px);
   font-weight: bold;
-  color: $title-text-color;
+  color: var(--section-title-color);
 }
 
 .Section__buttons {
   position: absolute;
   display: inline-block;
-  right: 0.5em;
-  margin-top: base.em(-1px);
+  right: var(--space-m);
+  margin-top: calc(-1 * var(--space-xxs));
 }
 
 .Section__rest {
@@ -43,7 +45,7 @@ $separator-color: colors.$primary !default;
 }
 
 .Section__content {
-  padding: 0.66em 0.5em;
+  padding: var(--space-ml) var(--space-m);
 }
 
 .Section--fitted > .Section__rest > .Section__content {
@@ -66,23 +68,7 @@ $separator-color: colors.$primary !default;
 
 .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;
-  }
+  inset: 0;
 }
 
 .Section--scrollable {
@@ -118,12 +104,11 @@ $separator-color: colors.$primary !default;
 // Nested sections
 .Section .Section {
   background-color: transparent;
-  margin-left: -0.5em;
-  margin-right: -0.5em;
+  margin: 0 calc(-1 * var(--space-m)); // Compensate for padding: 0.5em;
 
   // Remove extra space above the first nested section
   &:first-child {
-    margin-top: -0.5em;
+    margin-top: calc(-1 * var(--space-m));
   }
 }
 

package/styles/components/Slider.scss

@@ -1,49 +1,52 @@
 @use "../base";
 
-$cursor-color: base.$color-fg !default;
-$popup-background-color: hsl(0, 0%, 0%) !default;
-$popup-text-color: hsl(0, 0%, 100%) !default;
+$cursor-color: 0 !default;
+$popup-background-color: 0 !default;
+$popup-text-color: 0 !default;
 
 .Slider {
   cursor: e-resize;
+  user-select: none;
 }
 
 .Slider__cursorOffset {
   position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
+  inset: 0;
   transition: none !important;
 }
 
 .Slider__cursor {
   position: absolute;
   top: 0;
-  right: base.em(-1px);
+  right: calc(-1 * var(--space-xxs));
   bottom: 0;
   width: 0;
-  border-left: base.em(2px) solid $cursor-color;
+  border-left: var(--border-thickness-small) solid var(--slider-cursor-color);
 }
 
 .Slider__pointer {
   position: absolute;
-  right: base.em(-5px);
-  bottom: base.em(-4px);
+  right: 0;
+  bottom: 0;
   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;
+  border-bottom: base.em(5px) solid var(--slider-cursor-color);
+  transform: translate(50%, calc(100% - var(--border-thickness-tiny)));
 }
 
 .Slider__popupValue {
+  user-select: none;
+  white-space: nowrap;
   position: absolute;
   right: 0;
   top: -2rem;
   font-size: 1rem;
-  padding: 0.25rem 0.5rem;
-  color: $popup-text-color;
-  background-color: $popup-background-color;
+  padding: var(--space-s) var(--space-m);
+  background-color: var(--slider-popup-background);
+  color: var(--slider-popup-color);
+  border-radius: var(--slider-popup-border-radius);
   transform: translateX(50%);
-  white-space: nowrap;
+  backdrop-filter: var(--slider-popup-blur);
 }

package/styles/components/Stack.scss

@@ -1,59 +1,19 @@
-/**
- * Copyright (c) 2021 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
+.Stack {
+  gap: 0.5em;
 
-@use "../base";
-@use "./Divider";
-
-$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;
+  &--fill {
+    height: 100%;
   }
 }
 
-.Stack--zebra > .Stack__item:nth-child(even) {
-  background-color: $zebra-background-color;
+.Stack--zebra > .Stack__item:nth-child(odd) {
+  background-color: var(--candystripe-odd);
 }
 
 .Stack--horizontal > .Stack__divider:not(.Stack__divider--hidden) {
-  border-left: Divider.$thickness solid Divider.$color;
+  border-left: var(--divider-border);
 }
 
 .Stack--vertical > .Stack__divider:not(.Stack__divider--hidden) {
-  border-top: Divider.$thickness solid Divider.$color;
+  border-top: var(--divider-border);
 }

package/styles/components/Table.scss

@@ -16,7 +16,7 @@
 
 .Table__cell {
   display: table-cell;
-  padding: 0 0.25em;
+  padding: 0 var(--space-s);
 
   &:first-child {
     padding-left: 0;
@@ -30,7 +30,7 @@
 .Table__row--header .Table__cell,
 .Table__cell--header {
   font-weight: bold;
-  padding-bottom: 0.5em;
+  padding-bottom: var(--space-m);
 }
 
 .Table__cell--collapsing {

package/styles/components/Tabs.scss

@@ -1,52 +1,72 @@
-@use "sass:color";
-@use "sass:math";
-@use "../base";
 @use "../colors";
 
-$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;
+$fg-map: colors.$color-map !default;
+
+$color-default: 0 !default;
+$text-color: 0 !default;
+$text-color-selected: 0 !default;
+$tab-color: 0 !default;
+$tab-color-hovered: 0 !default;
+$tab-color-selected: 0 !default;
+$transition-duration: 0 !default;
+$border-radius: 0 !default;
+
+@mixin indicator($position) {
+  position: relative;
+  padding-#{$position}: var(--tab-indicator-size);
+
+  &:before {
+    content: "";
+    position: absolute;
+    #{$position}: 0;
+    background-color: currentColor;
+    transition: transform var(--tab-transition);
+  }
+
+  @if $position == bottom or $position == top {
+    &:before {
+      width: 100%;
+      height: var(--tab-indicator-size);
+      transform: scaleX(0);
+    }
+
+    &--selected:before {
+      transform: scaleX(0.99999) !important;
+    }
+  }
+
+  @if $position == left or $position == right {
+    &:before {
+      width: var(--tab-indicator-size);
+      height: 100%;
+      transform: scaleY(0);
+    }
+
+    &--selected:before {
+      transform: scaleY(0.99999) !important;
+    }
+  }
+}
 
 .Tabs {
   display: flex;
   align-items: stretch;
   overflow: hidden;
-  background-color: base.$color-bg-section;
+  background-color: var(--tabs-container-background);
 }
 
 .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;
+  padding: var(--space-s) 0 var(--space-s) var(--space-s);
 }
 
 .Tabs--horizontal {
-  margin-bottom: 0.5em;
-  padding: 0.25em 0.25em 0 0.25em;
+  margin-bottom: var(--space-m);
+  padding: var(--space-s) var(--space-s) 0;
 
   &:last-child {
     margin-bottom: 0;
@@ -62,78 +82,84 @@ $fg-map: colors.$fg-map !default;
 }
 
 .Tab {
+  user-select: none;
+  cursor: var(--cursor-pointer);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: $tab-color;
-  color: $text-color;
+  background-color: var(--tab-background);
+  color: var(--tab-color);
   min-height: 2.25em;
   min-width: 4em;
-}
+  transition-property: background-color, color;
+  transition-duration: var(--tab-transition);
 
-.Tab:not(.Tab--selected):hover {
-  background-color: $tab-color-hovered;
-}
+  &:not(.Tab--selected) {
+    &:hover {
+      background-color: var(--tab-background-hover);
+    }
 
-.Tab--selected {
-  background-color: $tab-color-selected;
-  color: $text-color-selected;
+    &:active {
+      color: var(--tab-color-selected);
+    }
+  }
+
+  &--selected {
+    cursor: var(--cursor-default);
+    background-color: var(--tab-background-selected);
+    color: var(--tab-color-selected);
+  }
 }
 
-.Tab__text {
+.Tab .Tab__text {
   flex-grow: 1;
-  margin: 0 0.5em;
+  margin: 0 var(--space-m);
 }
 
 .Tab__left {
   min-width: 1.5em;
   text-align: center;
-  margin-left: 0.25em;
+  margin-left: var(--space-s);
 }
 
 .Tab__right {
   min-width: 1.5em;
   text-align: center;
-  margin-right: 0.25em;
+  margin-right: var(--space-s);
 }
 
 .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;
+    border-top-left-radius: var(--tab-border-radius);
+    border-top-right-radius: var(--tab-border-radius);
+    @include indicator(bottom);
   }
 }
 
 .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;
+    border-top-left-radius: var(--tab-border-radius);
+    border-bottom-left-radius: var(--tab-border-radius);
+    @include indicator(right);
   }
 }
 
 @each $color-name, $color-value in $fg-map {
   .Tab--selected.Tab--color--#{$color-name} {
-    color: color.scale($color-value, $lightness: 25%);
+    color: hsl(from $color-value h s calc(l + 17.5));
   }
+}
 
-  .Tabs--horizontal .Tab--selected.Tab--color--#{$color-name} {
-    border-bottom-color: $color-value;
-  }
+// Interoperability with sections
+.Section .Tabs {
+  background-color: transparent;
+}
+
+.Section:not(.Section--fitted) .Tabs {
+  margin: 0 calc(-1 * var(--space-m)) var(--space-m);
 
-  .Tabs--vertical .Tab--selected.Tab--color--#{$color-name} {
-    border-right-color: $color-value;
+  &:first-child {
+    margin-top: calc(-1 * var(--space-m));
   }
 }