tgui-core 4.0.4 → 4.1.1

package/styles/atomic.scss

@@ -0,0 +1,11 @@
+@use "sass:meta";
+
+// Loads in all atomic styles
+@include meta.load-css("./atomic/candystripe.scss");
+@include meta.load-css("./atomic/centered-image.scss");
+@include meta.load-css("./atomic/color.scss");
+@include meta.load-css("./atomic/debug-layout.scss");
+@include meta.load-css("./atomic/fit-text.scss");
+@include meta.load-css("./atomic/links.scss");
+@include meta.load-css("./atomic/outline.scss");
+@include meta.load-css("./atomic/text.scss");

package/styles/components/BlockQuote.scss

@@ -1,5 +1,3 @@
-$color-default: 0 !default;
-
 .BlockQuote {
   color: var(--blockquote-color);
   border-left: var(--blockquote-border);

package/styles/components/Button.scss

@@ -1,60 +1,69 @@
 @use "../base";
 @use "../colors";
 
-$bg-map: colors.$color-map !default;
-$fg-map: colors.$color-map !default;
+@mixin button-color() {
+  --button-background: hsl(from var(--color) h s calc(l - var(--adjust-color)));
+  cursor: var(--cursor-pointer);
+  background-color: var(--button-background);
+  color: var(--button-color);
+  transition-property: background-color, color, opacity;
+  transition-duration: var(--button-transition);
+  transition-timing-function: var(--button-transition-timing);
+  // Disable selection in buttons
+  user-select: none;
 
-$color-default: 0 !default;
-$color-selected: 0 !default;
-$color-caution: 0 !default;
-$color-danger: 0 !default;
-$color-transparent-text: 0 !default;
-$border-radius: 0 !default;
+  &:hover {
+    background-color: hsl(
+      from var(--button-background) h s calc(l + var(--adjust-hover))
+    );
+    color: var(--button-color);
+  }
 
-@mixin button-color($color, $text-color: var(--color-text-fixed-white)) {
-  cursor: var(--cursor-pointer);
-  background-color: hsl(from $color h s calc(l - var(--adjust-color)));
-  color: $text-color;
-
-  &:not(.Button--disabled) {
-    &:hover {
-      background-color: hsl(
-        from $color h s
-          calc(calc(l - var(--adjust-color)) + var(--adjust-hover))
-      );
-      color: $text-color;
-    }
+  &:active {
+    background-color: hsl(
+      from var(--button-background) h s calc(l - var(--adjust-active))
+    );
+    color: var(--button-color);
+    transition: none;
+  }
+}
 
-    &:active {
-      background-color: hsl(
-        from $color h s
-          calc(calc(l - var(--adjust-color)) - var(--adjust-active))
-      );
-      color: $text-color;
-    }
+@mixin button-color-transparent() {
+  --button-background: hsl(from var(--button-color) h s l / 0.1);
+  --button-color: var(--button-color-transparent);
+  background-color: transparent;
+
+  &:hover {
+    --button-color: hsl(from var(--button-color-transparent) h s l / 1);
+  }
+
+  &:active {
+    opacity: 0.75;
+  }
+
+  &.Button--selected {
+    --button-color: hsl(from var(--color) h s calc(l + var(--adjust-color)));
+  }
+
+  &.Button--disabled {
+    --button-background: hsl(from var(--button-color) h s l / 0.2);
+    --button-color: var(--color-bad);
+    opacity: 1;
+    color: var(--button-color) !important;
   }
 }
 
 .Button {
-  cursor: var(--cursor-pointer);
   position: relative;
   display: inline-block;
   white-space: nowrap;
-  line-height: 1.667em;
+  line-height: var(--button-height);
   padding: 0 var(--space-m);
   margin-right: var(--space-xs);
   margin-bottom: var(--space-xs);
-  outline: 0;
   border-radius: var(--button-border-radius);
-  transition-property: background-color, color, opacity;
-  transition-duration: var(--button-transition);
-  transition-timing-function: var(--button-transition-timing);
-  // Disable selection in buttons
-  user-select: none;
-
-  &:active {
-    transition: none;
-  }
+  outline: none;
+  @include button-color();
 
   &:last-child {
     margin-right: 0;
@@ -76,7 +85,7 @@ $border-radius: 0 !default;
     text-align: center;
   }
 
-  &:has(.Button--icon) {
+  &.Button--hasIcon {
     padding-left: 0;
 
     .Button--icon {
@@ -84,7 +93,7 @@ $border-radius: 0 !default;
     }
   }
 
-  &--icon-right:has(.Button--icon) {
+  &--icon-right.Button--hasIcon {
     padding-left: var(--space-m);
     padding-right: var(--space-s);
 
@@ -93,7 +102,7 @@ $border-radius: 0 !default;
     }
   }
 
-  &--empty:has(.Button--icon) {
+  &--empty.Button--hasIcon {
     padding: 0;
   }
 
@@ -101,7 +110,7 @@ $border-radius: 0 !default;
     padding: 0 var(--space-s);
     line-height: 1.333em;
 
-    &:has(.Button--icon) .Button--icon {
+    &.Button--hasIcon .Button--icon {
       margin: 0 var(--space-xxs);
     }
   }
@@ -118,75 +127,64 @@ $border-radius: 0 !default;
 
   &--ellipsis {
     display: block;
-    text-overflow: ellipsis;
     overflow: hidden;
+    text-overflow: ellipsis;
     margin-right: calc(-1 * var(--space-s));
   }
 
   // We don't need additional margin if button inside stack
+  .Stack > &,
   .Stack__item > & {
     margin: 0;
   }
 }
 
-@each $color-name, $color-value in $bg-map {
+@each $color-name, $color-value in colors.$color-map {
   .Button--color--#{$color-name} {
+    --color: #{$color-value};
+    --button-color: var(--color-white);
+
     @each $color in colors.$low-contrast-color-map {
       @if $color-name == $color {
-        --color-text-fixed-white: var(--color-black);
+        --button-color: var(--color-black);
       }
     }
-
-    @include button-color($color-value);
   }
 }
 
-/* Do not move it down, cause it will override selected by specificity */
-.Button--color--transparent {
-  cursor: var(--cursor-pointer);
-  color: var(--button-color-transparent);
-
-  &:not(.Button--disabled) {
-    &:hover {
-      background-color: var(--color-hover);
-      color: hsl(from var(--button-color-transparent) h s l / 1);
-    }
-
-    &:active {
-      background-color: var(--color-active);
-      color: hsl(from var(--button-color-transparent) h s l / 1);
-    }
-  }
-
-  &.Button--disabled {
-    --button-color-transparent: var(--color-text-translucent-light);
-    background-color: hsl(from var(--color-bad) h s l / 0.33) !important;
-  }
+.Button--selected {
+  --color: var(--button-background-selected);
 }
 
-.Button--color--default {
-  @include button-color(var(--button-background-default), var(--button-color));
+.Button--disabled {
+  cursor: var(--cursor-disabled) !important;
+  background-color: var(
+    --button-background-disabled,
+    var(--button-background)
+  ) !important;
+  opacity: var(--button-disabled-opacity);
 }
 
-.Button--color--caution {
-  @include button-color(var(--button-background-caution));
-}
+.Button--color-- {
+  &default {
+    --color: var(--button-background-default);
+  }
 
-.Button--color--danger {
-  @include button-color(var(--button-background-danger));
-}
+  &caution {
+    --color: var(--button-background-caution);
+  }
 
-.Button--selected {
-  @include button-color(var(--button-background-selected));
-}
+  &danger {
+    --color: var(--button-background-danger);
+  }
 
-.Button--disabled {
-  cursor: var(--cursor-disabled) !important;
-  opacity: 0.5;
+  &transparent {
+    @include button-color-transparent();
+  }
 }
 
 .Button--flex {
-  display: inline-flex; //Inline even for fluid
+  display: inline-flex; // Inline even for fluid
   flex-direction: column;
 }
 

package/styles/components/Dimmer.scss

@@ -1,5 +1,3 @@
-$background-dimness: 0 !default;
-
 .Dimmer {
   display: flex;
   justify-content: center;

package/styles/components/Divider.scss

@@ -1,8 +1,3 @@
-@use "../base";
-
-$thickness: 0 !default;
-$spacing: 0 !default;
-
 .Divider--horizontal {
   margin: var(--space-m) 0;
 

package/styles/components/Dropdown.scss

@@ -1,4 +1,5 @@
 @use "../base";
+@use "./Button" as button;
 
 .Dropdown {
   display: flex;
@@ -32,6 +33,7 @@
     line-height: base.em(16px);
     height: base.em(22px);
     border-radius: var(--button-border-radius);
+    @include button.button-color();
   }
 
   &__selected-text {

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

@@ -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