tgui-core 4.0.3 → 4.1.0

package/styles/components/ImageButton.scss

@@ -1,142 +1,78 @@
 @use "../colors";
 
-$bg-map: colors.$color-map !default;
-
-@mixin button-style($color) {
+.ImageButton {
+  overflow: hidden;
+  user-select: none;
+  position: relative;
+  display: inline-flex;
+  text-align: center;
+  margin: 0.25em;
   background-color: hsl(
-    from $color h s calc(l - var(--adjust-color) * 2) /
+    from var(--imagebutton-color) h s calc(l - var(--adjust-color) * 2) /
       var(--imagebutton-transparecy)
   );
   border: var(--border-thickness-tiny) solid
     hsl(
-      from $color h s calc(l + var(--adjust-color)) /
+      from var(--imagebutton-color) h s calc(l + var(--adjust-color)) /
         var(--imagebutton-transparecy)
     );
+  border-radius: var(--border-radius-medium);
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: var(--transition-time-medium);
+  border-width: 0;
 
   &:not(.ImageButton--disabled, .ImageButton--noAction) {
     .ImageButton__container {
       cursor: var(--cursor-pointer);
     }
 
-    &:hover {
-      background-color: hsl(
-        from $color h s calc(l - var(--adjust-color) + var(--adjust-hover)) /
-          var(--imagebutton-transparecy)
-      );
-    }
-
-    &:active {
-      box-shadow: inset var(--shadow-glow-small) hsl(from $color h s l / 0.5);
-      transition-duration: 0s;
-    }
-
-    /* Disable hover/active effects if hovered on buttons container */
-    &:hover,
-    &:active {
-      &:has(.ImageButton__buttons:hover),
-      &:has(.ImageButton__buttons:active) {
+    &:not(
+       /* Prevent hover/active effects if hovered/pressed on buttons container */
+        :has(.ImageButton__buttons:hover),
+        :has(.ImageButton__buttons:active)
+      ) {
+      &:hover {
         background-color: hsl(
-          from $color h s calc(l - var(--adjust-color) * 2) /
+          from var(--imagebutton-color) h s
+            calc(l - var(--adjust-color) + var(--adjust-hover)) /
             var(--imagebutton-transparecy)
         );
-        box-shadow: none;
       }
-    }
-  }
 
-  /* Make non-fluid content opaque */
-  &:not(.ImageButton--fluid) .ImageButton__content {
-    background-color: hsl(from $color h s calc(l - var(--adjust-hover)));
-    border-top: var(--border-thickness-tiny) solid $color;
-  }
-}
-
-@each $color-name, $color-value in $bg-map {
-  .ImageButton__color--#{$color-name} {
-    @each $color in colors.$low-contrast-color-map {
-      @if $color-name == $color {
-        --color-text-fixed-white: var(--color-black);
+      &:active .ImageButton__image {
+        filter: drop-shadow(var(--shadow-glow-small) var(--imagebutton-color));
+        transition-duration: 0s;
       }
     }
-
-    @include button-style($color-value);
-  }
-}
-
-.ImageButton__color--default {
-  @include button-style(hsl(from var(--color-base) h s 30));
-}
-
-.ImageButton__color--primary {
-  @include button-style(hsl(from var(--color-primary) h s 30));
-}
-
-.ImageButton__color--transparent {
-  @include button-style(hsl(from var(--color-base) h s 30));
-
-  background-color: transparent;
-  border-color: transparent !important;
-
-  .ImageButton__content {
-    background-color: transparent !important;
-    color: var(--color-text-translucent);
-    border-color: transparent !important;
   }
 
-  &:hover:not(.ImageButton--disabled) .ImageButton__content {
-    color: var(--color-text);
-  }
-}
-
-.ImageButton--selected {
-  @include button-style(var(--button-background-selected));
-}
-
-.ImageButton--disabled {
-  .ImageButton__container {
-    cursor: var(--cursor-disabled);
-    opacity: 0.5;
-  }
-
-  &.ImageButton--fluid {
-    filter: contrast(75%);
-
-    .ImageButton__buttons {
-      filter: contrast(125%);
-    }
+  /* Make non-fluid content opaque */
+  &:not(.ImageButton--fluid) .ImageButton__content {
+    background-color: hsl(
+      from var(--imagebutton-color) h s calc(l - var(--adjust-hover))
+    );
+    border-top: var(--border-thickness-tiny) solid var(--imagebutton-color);
   }
-}
-
-.ImageButton {
-  overflow: hidden;
-  user-select: none;
-  position: relative;
-  display: inline-flex;
-  text-align: center;
-  margin: 0.25em;
-  border-radius: var(--border-radius-medium);
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: var(--transition-time-medium);
-  border-width: 0;
 
   &__container {
     display: flex;
     flex-direction: column;
-    transition: opacity var(--transition-time-medium);
     border-color: inherit;
+    transition: opacity var(--transition-time-medium);
   }
 
   &__image {
-    position: relative;
-    align-self: center;
     pointer-events: none;
     overflow: hidden;
+    position: relative;
+    align-self: center;
     line-height: 0;
     padding: var(--space-s);
     border: var(--border-thickness-tiny) solid;
     border-bottom: none;
     border-color: inherit;
     border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+    transition: filter var(--transition-time-slow);
 
     &--fallback {
       text-align: center;
@@ -152,18 +88,18 @@ $bg-map: colors.$color-map !default;
   }
 
   &__content {
-    user-select: none;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
+    text-overflow: ellipsis;
     padding: 0.25em 0.33em;
+    color: var(--color-text-fixed-white);
     z-index: 2;
   }
 
   &__buttons {
-    display: flex;
-    position: absolute;
     overflow: hidden;
+    position: absolute;
+    display: flex;
     left: var(--border-thickness-tiny);
     bottom: 1.8em;
     max-width: 100%;
@@ -211,6 +147,7 @@ $bg-map: colors.$color-map !default;
   }
 }
 
+// MARK: Fluid
 .ImageButton--fluid {
   display: flex;
   flex-direction: row;
@@ -289,3 +226,68 @@ $bg-map: colors.$color-map !default;
     }
   }
 }
+
+// MARK: Colors
+@each $color-name, $color-value in colors.$color-map {
+  .ImageButton__color--#{$color-name} {
+    --imagebutton-color: #{$color-value};
+
+    @each $color in colors.$low-contrast-color-map {
+      @if $color-name == $color {
+        --color-text-fixed-white: var(--color-black);
+      }
+    }
+  }
+}
+
+// I hate this
+.ImageButton__color--transparent {
+  --imagebutton-color: var(--color-text-translucent-light);
+  --imagebutton-transparecy: 0.1;
+  background-color: transparent;
+  border-color: transparent !important;
+
+  .ImageButton__content {
+    background-color: transparent !important;
+    color: var(--color-text-translucent-light);
+    border-color: transparent !important;
+  }
+
+  &.ImageButton--disabled {
+    background-color: hsL(from var(--color-red) h s l / 0.15) !important;
+  }
+
+  &.ImageButton--selected {
+    background-color: hsL(from var(--color-good) h s l / 0.15);
+  }
+}
+
+.ImageButton__color--default {
+  --imagebutton-color: hsl(from var(--color-base) h s 30);
+}
+
+.ImageButton__color--primary {
+  --imagebutton-color: hsl(from var(--color-primary) h s l);
+}
+
+.ImageButton--selected {
+  --imagebutton-color: hsl(
+    from var(--button-background-selected) h s calc(l * 1.15)
+  );
+  --color-text-fixed-white: var(--color-white);
+}
+
+.ImageButton--disabled {
+  .ImageButton__container {
+    cursor: var(--cursor-disabled);
+    opacity: 0.5;
+  }
+
+  &.ImageButton--fluid {
+    filter: contrast(75%);
+
+    .ImageButton__buttons {
+      filter: contrast(125%);
+    }
+  }
+}

package/styles/components/Input.scss

@@ -1,5 +1,5 @@
 .Input {
-  font-size: 1rem;
+  font-size: 1em;
   background-color: var(--input-background);
   border-radius: var(--input-border-radius);
   border: var(--border-thickness-tiny) solid var(--input-border-color);
@@ -7,12 +7,15 @@
   font-family: var(--input-font-family);
   padding: var(--space-xxs) var(--space-sm);
   width: var(--input-width);
+
   &:focus {
     outline: none;
   }
+
   &:focus-within {
     border-color: var(--input-border-color-focus);
   }
+
   &::placeholder {
     font-style: italic;
     color: var(--input-color-placeholder);

package/styles/components/Knob.scss

@@ -1,15 +1,6 @@
-@use "../base";
 @use "../colors";
 
 $pi: 3.1416;
-$bg-map: colors.$color-map !default;
-$fg-map: colors.$color-map !default;
-
-$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;
@@ -18,8 +9,7 @@ $inner-padding: 0;
   font-size: 1rem;
   width: 2.6em;
   height: 2.6em;
-  margin: 0 auto;
-  margin-bottom: -0.2em;
+  margin: 0 auto -0.2em;
 
   // Adjusts a baseline in a way, that makes knob middle-aligned
   // when it flows with the text.
@@ -86,7 +76,7 @@ $inner-padding: 0;
 
 .Knob__ringTrack {
   fill: transparent;
-  stroke: hsl(from var(--knob-ring-color) h s l / 0.15);
+  stroke: hsl(from var(--ring-color, var(--knob-ring-color)) h s l / 0.15);
   stroke-width: 8;
   stroke-linecap: round;
   stroke-dasharray: 75 * $pi;
@@ -102,21 +92,15 @@ $inner-padding: 0;
 
 .Knob__ringFill {
   fill: transparent;
-  stroke: var(--knob-ring-color);
+  stroke: var(--ring-color, var(--knob-ring-color));
   stroke-width: 8;
   stroke-linecap: round;
   stroke-dasharray: 100 * $pi;
   transition: stroke var(--transition-time-medium) ease-out;
 }
 
-@each $color-name, $color-value in $fg-map {
+@each $color-name, $color-value in colors.$color-map {
   .Knob--color--#{$color-name} {
-    .Knob__ringFill {
-      stroke: $color-value;
-    }
-
-    .Knob__ringTrack {
-      stroke: hsl(from $color-value h s l / 0.15);
-    }
+    --ring-color: #{$color-value};
   }
 }

package/styles/components/LabeledList.scss

@@ -1,5 +1,3 @@
-@use "../base";
-
 .LabeledList {
   display: table;
   // Compensate for negative margin

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;