tgui-core 1.8.4 → 2.0.1

package/styles/components/Dropdown.scss

@@ -2,66 +2,118 @@
 
 .Dropdown {
   display: flex;
-  align-items: flex-start;
-}
+  align-items: stretch;
+  gap: var(--space-s);
+  margin-right: var(--space-xs);
+  margin-bottom: var(--space-xs);
 
-.Dropdown__control {
-  flex: 1;
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  overflow: hidden;
-  user-select: none;
-  width: base.em(100px);
-}
+  &:last-child {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
 
-.Dropdown__arrow-button {
-  float: right;
-  padding-left: 0.35em;
-  width: 1.2em;
-  border-left: base.em(1px) solid rgba(0, 0, 0, 0.25);
-}
+  // Override Button styles
+  .Button {
+    margin: 0;
+    align-content: center;
+  }
 
-.Dropdown__menu {
-  overflow-y: auto;
-  align-items: center;
-  max-height: base.em(200px);
-  border-radius: 0 0 base.em(2px) base.em(2px);
-  color: hsl(0, 0%, 100%);
-  background-color: hsl(0, 0%, 0%);
-  background-color: hsla(0, 0%, 0%, 0.75);
-}
+  &__control {
+    display: flex;
+    overflow: hidden;
+    flex: 1;
+    font-family: var(--font-family);
+    font-size: base.em(12px);
+    line-height: base.em(16px);
+    height: base.em(22px);
+    border-radius: var(--button-border-radius);
+  }
 
-.Dropdown__menu-scroll {
-  overflow-y: scroll;
-}
+  &__selected-text {
+    flex: 1;
+    display: inline-block;
+    align-content: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    height: 100%;
+    padding: var(--space-s) var(--space-m);
+    border-right: var(--border-thickness-tiny) solid var(--color-border-dark);
+  }
 
-.Dropdown__menuentry {
-  padding: base.em(2px) base.em(4px);
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  transition: background-color 100ms ease-out;
+  &__icon {
+    display: inline-block;
+    align-content: center;
+    text-align: center;
+    height: 100%;
+    width: base.em(22px);
+    transition: transform var(--dropdown-transition);
 
-  &.selected {
-    background-color: rgba(255, 255, 255, 0.5) !important;
-    transition: background-color 0ms;
-  }
+    &--arrow {
+      &.open:not(.over),
+      &.over:not(.open) {
+        transform: rotate(180deg);
+      }
+    }
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-    transition: background-color 0ms;
+    // Move text closer to icon
+    ~ .Dropdown__selected-text {
+      padding-left: 0;
+    }
   }
-}
 
-.Dropdown__over {
-  top: auto;
-  bottom: 100%;
+  &__menu {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-scrollbar-thumb) transparent;
+    max-height: base.em(200px);
+    padding: var(--space-sm);
+
+    &--wrapper {
+      overflow: hidden;
+      background-color: var(--dropdown-menu-background);
+      color: var(--dropdown-menu-color);
+      border: var(--dropdown-menu-border);
+      border-radius: var(--dropdown-menu-border-radius);
+      backdrop-filter: var(--dropdown-menu-blur);
+    }
+
+    &--entry {
+      user-select: none;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-family: var(--font-family);
+      font-size: base.em(12px);
+      line-height: base.em(16px);
+      padding: var(--space-xs) var(--space-m);
+      border-radius: var(--dropdown-entry-border-radius);
+      transition: background-color var(--dropdown-entry-transition);
+
+      &.selected {
+        background-color: var(--dropdown-entry-background-selected) !important;
+        transition-duration: 0s;
+      }
+
+      &:not(.selected) {
+        cursor: var(--cursor-pointer);
+
+        &:hover {
+          background-color: var(--dropdown-entry-background-hover);
+          transition-duration: 0s;
+        }
+
+        &:active {
+          background-color: var(--dropdown-entry-background-active);
+          transition-duration: 0s;
+        }
+      }
+    }
+  }
 }
 
-.Dropdown__selected-text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: base.em(17px);
-  width: calc(100% - 1.2em);
+.Dropdown__control--icon-only {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  max-width: 2rem;
 }

package/styles/components/Flex.scss

@@ -1,5 +1,4 @@
 .Flex {
-  display: -ms-flexbox;
   display: flex;
 }
 

package/styles/components/Floating.scss

@@ -0,0 +1,60 @@
+.Floating {
+  z-index: 5;
+
+  &--animated {
+    &[data-transition="open"] {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    &[data-transition="close"],
+    &[data-transition="initial"] {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    &[data-transition="open"],
+    &[data-transition="close"] {
+      transition-duration: var(--floating-transition-time);
+      transition-timing-function: var(--floating-transition-timing);
+      transition-property: opacity, transform;
+    }
+  }
+
+  // MARK: Transform origin handling
+  &[data-position="top"] {
+    transform-origin: bottom;
+  }
+
+  &[data-position="top-start"],
+  &[data-position="right-end"] {
+    transform-origin: bottom left;
+  }
+
+  &[data-position="top-end"],
+  &[data-position="left-end"] {
+    transform-origin: bottom right;
+  }
+
+  &[data-position="bottom"] {
+    transform-origin: top;
+  }
+
+  &[data-position="bottom-start"],
+  &[data-position="right-start"] {
+    transform-origin: top left;
+  }
+
+  &[data-position="bottom-end"],
+  &[data-position="left-start"] {
+    transform-origin: top right;
+  }
+
+  &[data-position="right"] {
+    transform-origin: left;
+  }
+
+  &[data-position="left"] {
+    transform-origin: right;
+  }
+}

package/styles/components/ImageButton.scss

@@ -1,159 +1,127 @@
-/**
- * @file
- * @copyright 2024 Aylong (https://github.com/AyIong)
- * @license MIT
- */
-
-@use "../base";
 @use "../colors";
-@use "../functions" as *;
-
-$color-default: colors.bg(base.$color-bg-section) !default;
-$color-disabled: hsl(0, 54.7%, 25.1%) !default;
-$color-selected: colors.bg(colors.$green) !default;
-$color-divider: rgba(255, 255, 255, 0.1) !default;
-$divider-thickness: base.em(2px) !default;
-$bg-map: colors.$bg-map !default;
-
-@mixin button-style(
-  $color,
-  $border-color: rgba(lighten($color, 50%), 0.2),
-  $border-width: 1px 0 0 0,
-  $opacity: 0.2,
-  $hoverable: true,
-  $transition-duration: 0.2s
-) {
-  $luminance: luminance($color);
-  $text-color: if($luminance > 0.3, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
-
-  background-color: rgba($color, $opacity);
-  color: $text-color;
-  border: solid $border-color;
-  border-width: $border-width;
-  transition:
-    background-color $transition-duration,
-    border-color $transition-duration;
-
-  @if $hoverable {
+
+$bg-map: colors.$color-map !default;
+
+@mixin button-style($color) {
+  background-color: hsl(
+    from $color h s calc(l - var(--adjust-color) * 2) / 0.2
+  );
+  border: 1px solid hsl(from $color h s calc(l + var(--adjust-color) * 2) / 0.2);
+
+  &:not(.ImageButton--disabled) {
     &:hover {
-      background-color: rgba(lighten($color, 66%), $opacity);
+      background-color: hsl(
+        from $color h s calc(l - var(--adjust-color) + var(--adjust-hover)) /
+          0.2
+      );
     }
-  }
-}
 
-@each $color-name, $color-value in $bg-map {
-  .ImageButton--color__#{$color-name} {
-    @include button-style($color-value, $border-width: 1px);
-  }
+    &:active {
+      box-shadow: inset var(--shadow-glow-small) hsl(from $color h s l / 0.5);
+      transition-duration: 0s;
+    }
 
-  .ImageButton--contentColor__#{$color-name} {
-    @include button-style(
-      $color-value,
-      $border-color: lighten($color-value, 25%),
-      $opacity: 1,
-      $hoverable: false
-    );
+    /* Disable hover/active effects if hovered on buttons container */
+    &:hover,
+    &:active {
+      &:has(.ImageButton__buttons:hover),
+      &:has(.ImageButton__buttons:active) {
+        background-color: hsl(
+          from $color h s calc(l - var(--adjust-color) * 2) / 0.2
+        );
+        box-shadow: none;
+      }
+    }
   }
 
-  .ImageButton--buttonsContainerColor__#{$color-name} {
-    @include button-style(
-      $color-value,
-      $border-width: 1px 1px 1px 0,
-      $opacity: 0.33,
-      $hoverable: false,
-      $transition-duration: 0
-    );
+  /* 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;
   }
 }
 
-.ImageButton--color__default {
-  @include button-style(lighten($color-default, 85%), $border-width: 1px);
+@each $color-name, $color-value in $bg-map {
+  .ImageButton__color--#{$color-name} {
+    @include button-style($color-value);
+  }
 }
 
-.ImageButton--disabled {
-  background-color: rgba($color-disabled, 0.25) !important;
-  border-color: rgba($color-disabled, 0.25) !important;
+.ImageButton__color--default {
+  @include button-style(hsl(from var(--color-base) h s 30));
 }
 
 .ImageButton--selected {
-  @include button-style(
-    $color-selected,
-    $border-color: rgba($color-selected, 0.25),
-    $border-width: 1px
-  );
+  @include button-style(var(--button-background-selected));
 }
 
-.ImageButton--contentColor__default {
-  @include button-style(
-    lighten($color-default, 80%),
-    $border-color: lighten($color-default, 100%),
-    $opacity: 1,
-    $hoverable: false
-  );
-}
-
-.ImageButton--contentDisabled {
-  background-color: $color-disabled !important;
-  border-top: 1px solid lighten($color-disabled, 25%) !important;
-}
+.ImageButton--disabled {
+  .ImageButton__container {
+    cursor: var(--cursor-disabled);
+    opacity: 0.5;
+  }
 
-.ImageButton--contentSelected {
-  @include button-style(
-    $color-selected,
-    $border-color: lighten($color-selected, 25%),
-    $opacity: 1,
-    $hoverable: false
-  );
-}
+  &.ImageButton--fluid {
+    filter: contrast(75%);
 
-.ImageButton--buttonsContainerColor__default {
-  @include button-style(
-    lighten($color-default, 85%),
-    $border-width: 1px 1px 1px 0,
-    $hoverable: false,
-    $transition-duration: 0
-  );
+    .ImageButton__buttons {
+      filter: contrast(125%);
+    }
+  }
 }
 
 .ImageButton {
-  /* Better replace via inline-flex after Byond 516 will be stable */
-  display: inline-table;
+  overflow: hidden;
+  user-select: none;
   position: relative;
+  display: inline-flex;
   text-align: center;
   margin: 0.25em;
-  user-select: none;
-  -ms-user-select: none;
-
-  .noAction {
-    pointer-events: none;
-  }
+  border-radius: var(--border-radius-medium);
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: var(--transition-time-medium);
+  border-width: 0;
 
-  .container {
+  &__container {
+    cursor: var(--cursor-pointer);
     display: flex;
     flex-direction: column;
-    border-radius: 0.33em;
+    transition: opacity var(--transition-time-medium);
+    border-color: inherit;
   }
 
-  .image {
+  &__image {
     position: relative;
     align-self: center;
     pointer-events: none;
     overflow: hidden;
     line-height: 0;
-    padding: 0.25em;
-    border-radius: 0.33em;
+    padding: var(--space-s);
+    border: 1px solid;
+    border-bottom: 0;
+    border-color: inherit;
+    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+  }
+
+  &__content {
+    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0.25em 0.33em;
+    z-index: 2;
   }
 
-  .buttonsContainer {
+  &__buttons {
     display: flex;
     position: absolute;
     overflow: hidden;
-    left: 1px;
+    left: 0;
     bottom: 1.8em;
     max-width: 100%;
     z-index: 1;
 
-    &.buttonsAltContainer {
+    &--alt {
       overflow: visible;
       flex-direction: column;
       pointer-events: none;
@@ -161,120 +129,96 @@ $bg-map: colors.$bg-map !default;
       bottom: inherit !important;
       /** Text outline. Sort of. */
       text-shadow:
-        0px 0px 4px base.$color-bg,
-        0px 0px 4px base.$color-bg,
-        0px 0px 4px base.$color-bg,
-        0px 0px 4px base.$color-bg;
-    }
-
-    &.buttonsEmpty {
-      bottom: 1px;
+        0px 1px 2px var(--color-base),
+        -1px 0px 2px var(--color-base),
+        1px 0px 2px var(--color-base),
+        0px -1px 2px var(--color-base);
     }
 
     & > * {
       /* I know !important is bad, but here's no other way */
       margin: 0 !important;
-      padding: 0 0.2em !important;
+      padding: 0 !important;
       border-radius: 0 !important;
     }
   }
-
-  .content {
-    -ms-user-select: none;
-    user-select: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding: 0.25em 0.33em;
-    margin: -1px;
-    border-radius: 0 0 0.33em 0.33em;
-    z-index: 2;
-  }
 }
 
 .ImageButton--fluid {
   display: flex;
   flex-direction: row;
-  position: relative;
-  text-align: center;
   margin: 0 0 0.33em 0;
-  user-select: none;
-  -ms-user-select: none;
+  border-width: var(--border-thickness-tiny);
 
   &:last-child {
     margin-bottom: 0;
   }
 
-  .info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-  }
+  .ImageButton {
+    &__container {
+      flex-direction: row;
+      flex: 1;
+    }
 
-  .title {
-    font-weight: bold;
-    padding: 0.5em;
+    &__image {
+      padding: 0;
+      border: 0;
+    }
 
-    &.divider {
+    &__content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      white-space: normal;
+      padding: 0;
       margin: 0 0.5em;
-      border-bottom: $divider-thickness solid $color-divider;
-    }
-  }
+      color: var(--color-text);
 
-  .contentFluid {
-    padding: 0.5em;
-    color: white;
-  }
+      &--title {
+        font-weight: bold;
+        padding: 0.5em;
+      }
 
-  .container {
-    flex-direction: row;
-    flex: 1;
+      &--divider {
+        border-bottom: var(--border-thickness-small) solid var(--color-border);
+      }
 
-    &.hasButtons {
-      border-radius: 0.33em 0 0 0.33em;
-      border-width: 1px 0 1px 1px;
+      &--text {
+        padding: 0.5em;
+      }
     }
-  }
 
-  .image {
-    padding: 0;
-  }
-
-  .buttonsContainer {
-    position: relative;
-    left: inherit;
-    bottom: inherit;
-    border-radius: 0 0.33em 0.33em 0;
-
-    &.buttonsEmpty {
+    &__buttons {
+      position: relative;
+      left: inherit;
       bottom: inherit;
-    }
+      background-color: inherit;
 
-    &.buttonsAltContainer {
-      overflow: hidden;
-      pointer-events: auto;
-      top: inherit;
-      text-shadow: none;
+      &--alt {
+        pointer-events: all;
+        top: inherit;
+        text-shadow: none;
 
-      & > * {
-        border-top: 1px solid rgba(255, 255, 255, 0.075);
+        & > * {
+          border-top: 1px solid hsla(0, 0%, 100%, 0.075);
 
-        &:first-child {
-          border-top: 0;
+          &:first-child {
+            border-top: 0;
+          }
         }
       }
-    }
 
-    & > * {
-      display: inline-flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      white-space: pre-wrap;
-      line-height: base.em(14px);
-      height: 100%;
-      border-left: 1px solid rgba(255, 255, 255, 0.075);
+      & > * {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        white-space: pre-wrap;
+        line-height: 1.15em;
+        height: 100%;
+        border-left: var(--border-thickness-tiny) solid var(--color-border);
+      }
     }
   }
 }