tgui-core 4.0.4 → 4.1.0

package/styles/components/NoticeBox.scss

@@ -1,60 +1,54 @@
 @use "../base";
 @use "../colors";
 
-$bg-map: colors.$color-map !default;
-$fg-map: colors.$color-map !default;
-$background-color: 0 !default;
-$color-stripes: 0 !default;
-
 .NoticeBox {
+  --noticebox-background: var(--notice-box-background);
   font-weight: bold;
   font-style: italic;
   padding: var(--space-sm) var(--space-m);
   margin-bottom: var(--space-m);
-  color: var(--notice-box-color);
-  background-color: var(--notice-box-background);
+  background-color: oklch(
+    from var(--noticebox-background) calc(l * 0.825) calc(c * 0.75) h
+  );
   background-image: repeating-linear-gradient(
     -45deg,
-    transparent,
-    transparent base.em(10px),
-    var(--notice-box-stripes) base.em(10px),
-    var(--notice-box-stripes) base.em(20px)
+    transparent 0 base.em(10px),
+    var(--notice-box-stripes) base.em(10px) base.em(20px)
   );
+  color: var(--notice-box-color);
 }
 
 @mixin box-color($color) {
-  background-color: oklch(from $color calc(l - 0.14) calc(c - 0.06) h);
-  color: var(--color-text-fixed-white);
 }
 
-@each $color-name, $color-value in $bg-map {
+@each $color-name, $color-value in colors.$color-map {
   .NoticeBox--color--#{$color-name} {
+    --noticebox-background: #{$color-value};
+
     @each $color in colors.$low-contrast-color-map {
       @if $color-name == $color {
-        --color-text-fixed-white: var(--color-black);
+        --notice-box-color: var(--color-black);
       }
     }
 
     @if $color-name == "black" {
       --notice-box-stripes: hsla(0, 0%, 100%, 0.1);
     }
-
-    @include box-color($color-value);
   }
 }
 
 .NoticeBox--type--info {
-  @include box-color(var(--color-blue));
+  --noticebox-background: var(--color-blue);
 }
 
 .NoticeBox--type--success {
-  @include box-color(var(--color-green));
+  --noticebox-background: var(--color-green);
 }
 
 .NoticeBox--type--warning {
-  @include box-color(var(--color-orange));
+  --noticebox-background: var(--color-orange);
 }
 
 .NoticeBox--type--danger {
-  @include box-color(var(--color-red));
+  --noticebox-background: var(--color-red);
 }

package/styles/components/NumberInput.scss

@@ -1,12 +1,4 @@
-@use "sass:color";
 @use "../base";
-@use "../functions" as *;
-@use "./Input";
-
-$text-color: 0 !default;
-$background-color: 0 !default;
-$border-color: 0 !default;
-$border-radius: 0 !default;
 
 .NumberInput {
   cursor: var(--cursor-n-resize);
@@ -67,7 +59,7 @@ $border-radius: 0 !default;
   height: base.em(17px);
   margin: 0;
   padding: 0 var(--space-m);
-  font-family: Verdana, sans-serif;
+  font-family: var(--font-family);
   background-color: var(--number-input-background);
   color: var(--number-input-color);
 }

package/styles/components/ProgressBar.scss

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

package/styles/components/RestrictedInput.scss

@@ -1,9 +1,11 @@
 .RestrictedInput {
   border-color: var(--restricted-input-border-color);
   text-align: right;
+
   &:focus-within {
     border-color: var(--restricted-input-border-color-focus);
   }
+
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -13,6 +15,7 @@
 
 .RestrictedInput--invalid {
   border-color: var(--restricted-input-border-color-invalid);
+
   &:focus-within {
     border-color: var(--restricted-input-border-color-invalid);
   }

package/styles/components/RoundGauge.scss

@@ -1,19 +1,15 @@
 @use "../colors";
 
 $pi: 3.1416;
-$fg-map: colors.$color-map !default;
-$ring-color: 0 !default;
 
 @keyframes RoundGauge__alertAnim {
-  0% {
+  0%,
+  100% {
     opacity: 0.1;
   }
   50% {
     opacity: 1;
   }
-  100% {
-    opacity: 0.1;
-  }
 }
 
 @keyframes RoundGauge__needleAlertAnim {
@@ -74,6 +70,9 @@ $ring-color: 0 !default;
   transform-origin: top;
 
   &.active {
+    animation: RoundGauge__alertAnim var(--round-gauge-alert-animation)
+      cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+
     ~ .RoundGauge__needle .RoundGauge__needleLine {
       transform-origin: bottom;
       animation: RoundGauge__needleAlertAnim
@@ -83,21 +82,17 @@ $ring-color: 0 !default;
 }
 
 .RoundGauge__alert.max {
-  fill: colors.$bad;
+  fill: var(--color-bad);
 }
 
-@each $color-name, $color-value in $fg-map {
+@each $color-name, $color-value in colors.$color-map {
   .RoundGauge--color--#{$color-name}.RoundGauge__ringFill {
     stroke: $color-value;
   }
 }
 
-@each $color-name, $color-value in $fg-map {
+@each $color-name, $color-value in colors.$color-map {
   .RoundGauge__alert--#{$color-name} {
     fill: $color-value;
-    animation: RoundGauge__alertAnim
-      var(--round-gauge-alert-animation)
-      cubic-bezier(0.34, 1.56, 0.64, 1)
-      infinite;
   }
 }

package/styles/components/Section.scss

@@ -1,11 +1,4 @@
-@use "sass:color";
 @use "../base";
-@use "../colors";
-@use "../functions";
-
-$title-text-color: 0 !default;
-$background-color: 0 !default;
-$separator-color: 0 !default;
 
 .Section {
   position: relative;

package/styles/components/Slider.scss

@@ -1,52 +1,59 @@
 @use "../base";
 
-$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;
-  inset: 0;
-  transition: none !important;
-}
+  &--editing {
+    .Slider__cursor:before {
+      display: none;
+    }
+  }
 
-.Slider__cursor {
-  position: absolute;
-  top: 0;
-  right: calc(-1 * var(--space-xxs));
-  bottom: 0;
-  width: 0;
-  border-left: var(--border-thickness-small) solid var(--slider-cursor-color);
-}
+  &__cursor {
+    position: absolute;
+    inset: 0 calc(-1 * var(--space-xxs));
+    left: unset;
+    border-left: var(--border-thickness-small) solid var(--slider-cursor-color);
+    border-radius: var(--border-radius-circular);
 
-.Slider__pointer {
-  position: absolute;
-  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 var(--slider-cursor-color);
-  transform: translate(50%, calc(100% - var(--border-thickness-tiny)));
-}
+    &Offset {
+      position: absolute;
+      inset: 0;
+      transition: none !important;
+    }
 
-.Slider__popupValue {
-  user-select: none;
-  white-space: nowrap;
-  position: absolute;
-  right: 0;
-  top: -2rem;
-  font-size: 1rem;
-  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%);
-  backdrop-filter: var(--slider-popup-blur);
+    &:before {
+      content: "";
+      aspect-ratio: 1 / 1;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      border-left: inherit;
+      transform: scale(4) translateY(50%) rotate(45deg);
+      transform-origin: center;
+      mask-image: linear-gradient(135deg, black 50%, transparent 50%);
+    }
+  }
+
+  &__popupValue {
+    user-select: none;
+    white-space: nowrap;
+    position: absolute;
+    top: -2em;
+    right: 0;
+    font-size: 1em;
+    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%);
+    backdrop-filter: var(--slider-popup-blur);
+  }
+
+  .NumberInput__input {
+    inset: 2px;
+    width: auto;
+    height: auto;
+  }
 }

package/styles/components/Tabs.scss

@@ -1,16 +1,5 @@
 @use "../colors";
 
-$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);
@@ -145,7 +134,7 @@ $border-radius: 0 !default;
   }
 }
 
-@each $color-name, $color-value in $fg-map {
+@each $color-name, $color-value in colors.$color-map {
   .Tab--selected.Tab--color--#{$color-name} {
     color: hsl(from $color-value h s calc(l + 17.5));
   }

package/styles/components/TextArea.scss

@@ -1,3 +1,6 @@
 .TextArea {
   resize: none;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--color-scrollbar-thumb) transparent;
 }

package/styles/components/Tooltip.scss

@@ -1,9 +1,5 @@
 @use "../base";
 
-$color: 0 !default;
-$background-color: 0 !default;
-$border-radius: 0 !default;
-
 .Tooltip {
   backdrop-filter: var(--tooltip-blur);
   background-color: var(--tooltip-background);

package/styles/main.scss

@@ -9,7 +9,6 @@
 @include meta.load-css("./reset.scss");
 
 // Components
-
 @include meta.load-css("./components/BlockQuote.scss");
 @include meta.load-css("./components/Button.scss");
 @include meta.load-css("./components/ColorBox.scss");

package/styles/vars-components.scss

@@ -27,12 +27,15 @@
   --blockquote-border: var(--border-thickness-small) solid;
 
   /* Button */
+  --button-height: 1.667em;
   --button-color: var(--color-white);
   --button-color-transparent: var(--color-text-translucent);
   --button-background-default: var(--color-primary);
   --button-background-selected: var(--color-green);
   --button-background-caution: var(--color-yellow);
   --button-background-danger: var(--color-red);
+  --button-background-disabled: var(--undefined); // Used for theming
+  --button-disabled-opacity: 0.5;
   --button-border-radius: var(--border-radius-tiny);
   --button-transition: var(--transition-time-medium);
   --button-transition-timing: ease;
@@ -119,8 +122,8 @@
 
   /* Notice Box */
   --notice-box-stripes: hsla(0, 0%, 0%, 0.1);
-  --notice-box-background: hsl(37.5, 40%, 57.5%);
-  --notice-box-color: var(--color-text-fixed-black);
+  --notice-box-background: hsl(37.5, 55%, 57.5%);
+  --notice-box-color: var(--color-text-fixed-white);
 
   /* Number Input */
   --number-input-background: var(--input-background);