tgui-core 4.0.3 → 4.1.0

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/functions.scss

@@ -11,3 +11,13 @@
   }
   @return math.div($value, $value * 0 + 1);
 }
+
+// Increases perceptual color lightness.
+@function lighten($color, $amount) {
+  @return color.adjust($color, $lightness: $amount * 1%, $space: hsl);
+}
+
+// Decreases perceptual color lightness.
+@function darken($color, $amount) {
+  @return color.adjust($color, $lightness: -$amount * 1%, $space: hsl);
+}

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/reset.scss

@@ -15,6 +15,7 @@ html {
 
 body {
   overflow: auto;
+  position: relative;
   font-family: var(--font-family, Verdana, Geneva, sans-serif);
 }
 

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);