tgui-core 1.8.4 → 2.0.1

package/styles/colors.scss

@@ -1,6 +1,8 @@
 /**
  * Copyright (c) 2020 Aleksej Komarov
  * SPDX-License-Identifier: MIT
+ *
+ * @deprecated Use css-variables
  */
 
 @use "sass:color";
@@ -8,81 +10,75 @@
 @use "sass:meta";
 
 // Base colors
-$black: hsl(0, 0%, 0%) !default;
-$white: hsl(0, 0%, 100%) !default;
-$red: hsl(0, 72%, 50%) !default;
-$orange: hsl(24, 89%, 54%) !default;
-$yellow: hsl(52, 97%, 52%) !default;
-$olive: hsl(68, 76%, 45%) !default;
-$green: hsl(136, 70%, 41%) !default;
-$teal: hsl(178, 100%, 35%) !default;
-$blue: hsl(208, 65%, 47%) !default;
-$violet: hsl(259, 60%, 50%) !default;
-$purple: hsl(288, 60%, 49%) !default;
-$pink: hsl(326, 71%, 56%) !default;
-$brown: hsl(24, 47%, 45%) !default;
-$grey: hsl(0, 0%, 47%) !default;
-$light-grey: hsl(0, 0%, 67%) !default;
+$black: var(--color-black) !default;
+$white: var(--color-white) !default;
+$red: var(--color-red) !default;
+$orange: var(--color-orange) !default;
+$yellow: var(--color-yellow) !default;
+$olive: var(--color-olive) !default;
+$green: var(--color-green) !default;
+$teal: var(--color-teal) !default;
+$blue: var(--color-blue) !default;
+$violet: var(--color-violet) !default;
+$purple: var(--color-purple) !default;
+$pink: var(--color-pink) !default;
+$brown: var(--color-brown) !default;
+$grey: var(--color-grey) !default;
+$light-grey: var(--color-light-grey) !default;
 
-$primary: hsl(210, 37%, 46%) !default;
-$good: hsl(94, 63%, 41%) !default;
-$average: hsl(33, 89%, 50%) !default;
-$bad: hsl(0, 72%, 50%) !default;
-$label: hsl(210, 18%, 58%) !default;
-
-// Background and foreground color lightness ratios
-$bg-lightness: -15% !default;
-$fg-lightness: 10% !default;
-
-@function bg($color) {
-  @return color.scale($color, $lightness: $bg-lightness);
-}
-
-@function fg($color) {
-  @return color.scale($color, $lightness: $fg-lightness);
-}
+$primary: var(--color-primary) !default;
+$good: var(--color-good) !default;
+$average: var(--color-average) !default;
+$bad: var(--color-bad) !default;
+$label: var(--color-label) !default;
 
 // Mappings of color names
-
+$color-map: ();
 $_gen_map: (
-  "black": $black,
-  "white": $white,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "olive": $olive,
-  "green": $green,
-  "teal": $teal,
-  "blue": $blue,
-  "violet": $violet,
-  "purple": $purple,
-  "pink": $pink,
-  "brown": $brown,
-  "grey": $grey,
-  "light-grey": $light-grey,
-  "good": $good,
-  "average": $average,
-  "bad": $bad,
-  "label": $label,
+  "black": var(--color-black),
+  "white": var(--color-white),
+  "red": var(--color-red),
+  "orange": var(--color-orange),
+  "yellow": var(--color-yellow),
+  "olive": var(--color-olive),
+  "green": var(--color-green),
+  "teal": var(--color-teal),
+  "blue": var(--color-blue),
+  "violet": var(--color-violet),
+  "purple": var(--color-purple),
+  "pink": var(--color-pink),
+  "brown": var(--color-brown),
+  "grey": var(--color-grey),
+  "gray": var(--color-grey),
+  "light-grey": var(--color-light-grey),
+  "light-gray": var(--color-light-grey),
+  "good": var(--color-good),
+  "average": var(--color-average),
+  "bad": var(--color-bad),
+  "label": var(--color-label),
 );
+$low-contrast-color-map: ("yellow", "white");
 
-// Foreground color names for which to generate a color map
-$fg-map-keys: map.keys($_gen_map) !default;
-// Background color names for which to generate a color map
-$bg-map-keys: map.keys($_gen_map) !default;
-
-$fg-map: ();
-@each $color-name in $fg-map-keys {
+// Color names for which to generate a color map
+$color-map-keys: map.keys($_gen_map) !default;
+@each $color-name in $color-map-keys {
   // prettier-ignore
-  $fg-map: map.merge($fg-map, (
-    $color-name: fg(map.get($_gen_map, $color-name)),
+  $color-map: map.merge($color-map, (
+    $color-name: map.get($_gen_map, $color-name),
   ));
 }
 
-$bg-map: ();
-@each $color-name in $bg-map-keys {
-  // prettier-ignore
-  $bg-map: map.merge($bg-map, (
-    $color-name: bg(map.get($_gen_map, $color-name)),
-  ));
+/**
+ * Background and foreground color lightness ratios
+ * @deprecated
+ */
+$bg-lightness: -15% !default;
+$fg-lightness: 10% !default;
+
+@function bg($color) {
+  @return hsl(from $color h s calc(l - var(--adjust-color)));
+}
+
+@function fg($color) {
+  @return hsl(from $color h s calc(l + var(--adjust-color)));
 }

package/styles/components/BlockQuote.scss

@@ -1,13 +1,10 @@
-@use "../base";
-@use "../colors";
-
-$color-default: colors.fg(colors.$label) !default;
+$color-default: 0 !default;
 
 .BlockQuote {
-  color: $color-default;
-  border-left: base.em(2px) solid $color-default;
-  padding-left: 0.5em;
-  margin-bottom: 0.5em;
+  color: var(--blockquote-color);
+  border-left: var(--blockquote-border);
+  padding-left: var(--space-m);
+  margin-bottom: var(--space-m);
 
   &:last-child {
     margin-bottom: 0;

package/styles/components/Button.scss

@@ -1,144 +1,178 @@
 @use "../base";
 @use "../colors";
-@use "../functions" as *;
-
-$color-default: colors.bg(colors.$primary) !default;
-$color-disabled: hsl(0, 0%, 60%) !default;
-$color-selected: colors.bg(colors.$green) !default;
-$color-caution: colors.bg(colors.$yellow) !default;
-$color-danger: colors.bg(colors.$red) !default;
-$color-transparent-text: rgba(255, 255, 255, 0.5) !default;
-$border-radius: base.$border-radius !default;
-$bg-map: colors.$bg-map !default;
-
-@mixin button-color($color) {
-  // Adapt text color to background luminance to ensure high contast
-  $luminance: luminance($color);
-  $text-color: if($luminance > 0.4, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
-
-  transition:
-    color 50ms,
-    background-color 50ms;
-  background-color: $color;
-  color: $text-color;
 
-  &:focus {
-    transition:
-      color 100ms,
-      background-color 100ms;
-  }
+$bg-map: colors.$color-map !default;
+$fg-map: colors.$color-map !default;
+
+$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: lighten($color, 30%);
-    color: $text-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 $color h s
+          calc(calc(l - var(--adjust-color)) - var(--adjust-active))
+      );
+      color: $text-color;
+    }
   }
 }
 
 .Button {
+  cursor: var(--cursor-pointer);
   position: relative;
   display: inline-block;
-  line-height: 1.667em;
-  padding: 0 0.5em;
-  margin-right: base.em(2px);
   white-space: nowrap;
+  line-height: 1.667em;
+  padding: 0 var(--space-m);
+  margin-right: var(--space-xs);
+  margin-bottom: var(--space-xs);
   outline: 0;
-  border-radius: $border-radius;
-  margin-bottom: base.em(2px);
+  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;
-  -ms-user-select: none;
+
+  &:active {
+    transition: none;
+  }
 
   &:last-child {
     margin-right: 0;
     margin-bottom: 0;
   }
 
-  .fa,
-  .fas,
-  .far {
-    margin-left: -0.25em;
-    margin-right: -0.25em;
+  &__content {
+    display: block;
+    align-self: stretch;
+
+    &--ellipsis {
+      display: flex; // Inline flex will broke ellipsis, don't change it.
+      align-items: center;
+    }
+  }
+
+  i {
     min-width: 1.333em;
     text-align: center;
+    vertical-align: middle;
   }
-}
 
-.Button--dropdown {
-  line-height: base.em(16px);
-  height: base.em(22px);
-  padding: 0.2rem 0.5rem;
-}
+  &:has(i) {
+    padding-left: 0;
 
-.Button--hasContent {
-  // Add a margin to the icon to keep it separate from the text
-  .fa,
-  .fas,
-  .far {
-    margin-right: 0.25em;
+    i {
+      margin: 0 var(--space-s);
+    }
   }
-}
 
-.Button--hasContent.Button--iconPosition--right {
-  .fa,
-  .fas,
-  .far {
-    margin-right: 0px;
-    margin-left: 3px;
+  &--icon-right:has(i) {
+    padding-left: var(--space-m);
+    padding-right: var(--space-s);
+
+    i {
+      margin: 0 0 0 var(--space-s);
+    }
   }
-}
 
-.Button--ellipsis {
-  display: block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  margin-right: -0.33em;
-}
+  &--empty:has(i) {
+    padding: 0;
+  }
 
-.Button--fluid {
-  display: block;
-  margin-left: 0;
-  margin-right: 0;
-}
+  &--compact {
+    padding: 0 var(--space-s);
+    line-height: 1.333em;
 
-.Button--circular {
-  border-radius: 50%;
-}
+    &:has(i) i {
+      margin: 0 var(--space-xxs);
+    }
+  }
 
-.Button--compact {
-  padding: 0 0.25em;
-  line-height: 1.333em;
+  &--circular {
+    border-radius: var(--border-radius-circular);
+  }
+
+  &--fluid {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &--ellipsis {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-right: calc(-1 * var(--space-s));
+  }
 }
 
 @each $color-name, $color-value in $bg-map {
   .Button--color--#{$color-name} {
+    @each $color in colors.$low-contrast-color-map {
+      @if $color-name == $color {
+        --color-text-fixed-white: var(--color-black);
+      }
+    }
+
     @include button-color($color-value);
   }
 }
 
+/* Do not move it down, cause it will override selected by specificity */
+.Button--color--transparent {
+  color: var(--button-color-transparent);
+
+  &:not(.Button--disabled) {
+    &:hover {
+      background-color: var(--color-hover);
+      color: var(--color-text);
+    }
+
+    &:active {
+      background-color: var(--color-active);
+      color: var(--color-text);
+    }
+  }
+}
+
 .Button--color--default {
-  @include button-color($color-default);
+  @include button-color(var(--button-background-default), var(--button-color));
 }
 
 .Button--color--caution {
-  @include button-color($color-caution);
+  @include button-color(var(--button-background-caution));
 }
 
 .Button--color--danger {
-  @include button-color($color-danger);
+  @include button-color(var(--button-background-danger));
 }
 
-.Button--color--transparent {
-  @include button-color(base.$color-bg);
-  background-color: rgba(base.$color-bg, 0);
-  color: $color-transparent-text;
+.Button--selected {
+  @include button-color(var(--button-background-selected));
 }
 
 .Button--disabled {
-  background-color: $color-disabled !important;
-}
-
-.Button--selected {
-  @include button-color($color-selected);
+  cursor: var(--cursor-disabled);
+  opacity: 0.5;
 }
 
 .Button--flex {
@@ -161,13 +195,3 @@ $bg-map: colors.$bg-map !default;
 .Button--verticalAlignContent--bottom {
   justify-content: flex-end;
 }
-
-.Button__content {
-  display: block;
-  align-self: stretch;
-
-  &--ellipsis {
-    display: flex; // Inline flex will broke ellipsis, don't change it.
-    align-items: center;
-  }
-}

package/styles/components/Dialog.scss

@@ -1,47 +1,41 @@
 @use "../base";
 
-$background-color: base.$color-bg !default;
-
 .Dialog {
   position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--dialog-background);
 }
 
 .Dialog__content {
-  background-color: $background-color;
-  font-family: Consolas, monospace;
-  font-size: base.em(14px);
   display: flex;
   flex-direction: column;
+  font-family: var(--font-family-mono);
+  font-size: base.em(14px);
+  background-color: var(--color-base);
 }
 
 .Dialog__header {
+  user-select: none;
   display: flex;
   height: 2em;
   line-height: 1.928em;
-  background-color: rgba(0, 0, 0, 0.5);
-  user-select: none;
-  -ms-user-select: none;
+  background-color: var(--dialog-background);
 }
 
 .Dialog__title {
+  flex-grow: 1;
   display: inline;
   font-style: italic;
-  margin-left: 1rem;
-  margin-right: 2rem;
-  flex-grow: 1;
+  margin-left: var(--space-xl);
+  margin-right: var(--space-xxl);
   opacity: 0.33;
 }
 
 .Dialog__body {
-  margin: 2rem 1rem 2rem 1rem;
+  margin: var(--space-xxl) var(--space-xl);
   flex-grow: 1;
 }
 
@@ -49,12 +43,12 @@ $background-color: base.$color-bg !default;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.25);
+  padding: var(--space-xl);
+  background-color: hsl(from var(--dialog-background) h s l / 0.25);
 }
 
 .Dialog__button {
-  margin: 0 1rem 0 1rem;
+  margin: 0 var(--space-xl);
   height: 2rem;
   min-width: 6rem;
   text-align: center;
@@ -64,13 +58,13 @@ $background-color: base.$color-bg !default;
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding-left: 3rem;
   justify-content: flex-end;
-  margin-right: 1rem;
+  padding-left: var(--space-xxl);
+  margin-right: var(--space-xl);
 }
 
 .SaveAsDialog__input {
-  margin-left: 1rem;
+  margin-left: var(--space-xl);
   width: 80%;
 }
 
@@ -79,27 +73,26 @@ $background-color: base.$color-bg !default;
 }
 
 .Dialog__FileList {
+  overflow: auto scroll;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   flex-grow: 1;
   align-content: flex-start;
   max-height: 20rem;
-  overflow: auto;
-  overflow-y: scroll;
 }
 
 .Dialog__FileEntry {
   text-align: center;
-  margin: 1rem;
+  margin: var(--space-xl);
 }
 
 .Dialog__FileIcon {
-  display: inline-block;
-  margin: 0 0 1rem 0;
+  cursor: default;
   position: relative;
+  display: inline-block;
+  text-align: center;
   width: 6vh;
   height: auto;
-  text-align: center;
-  cursor: default;
+  margin: 0 0 var(--space-xl) 0;
 }

package/styles/components/Dimmer.scss

@@ -1,19 +1,14 @@
-$background-dimness: 0.75 !default;
+$background-dimness: 0 !default;
 
 .Dimmer {
-  // Align everything in the middle.
-  // A fat middle finger for anything less than IE11.
   display: flex;
   justify-content: center;
   align-items: center;
   // Fill positioned parent
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   // Dim everything around it
-  background-color: rgba(0, 0, 0, $background-dimness);
+  background-color: var(--dimmer-background);
   // Should be enough to cover everything except tooltips
   z-index: 100;
 }

package/styles/components/Divider.scss

@@ -1,22 +1,21 @@
 @use "../base";
 
-$color: rgba(255, 255, 255, 0.1) !default;
-$thickness: base.em(2px) !default;
-$spacing: 0.5em;
+$thickness: 0 !default;
+$spacing: 0 !default;
 
 .Divider--horizontal {
-  margin: $spacing 0;
+  margin: var(--space-m) 0;
 
   &:not(.Divider--hidden) {
-    border-top: $thickness solid $color;
+    border-top: var(--divider-border);
   }
 }
 
 .Divider--vertical {
   height: 100%;
-  margin: 0 $spacing;
+  margin: 0 var(--space-m);
 
   &:not(.Divider--hidden) {
-    border-left: $thickness solid $color;
+    border-left: var(--divider-border);
   }
 }