tgui-core 4.0.3 → 4.1.0

package/styles/atomic/fit-text.scss

@@ -0,0 +1,15 @@
+$mqIterations: 19;
+@mixin fontResize($iterations) {
+  $i: 1;
+  @while $i <= $iterations {
+    $minWidth: 100px * $i;
+    @media all and (min-width: $minWidth) {
+      .fit-text {
+        font-size: 0.1em * $i;
+      }
+    }
+    $i: $i + 1;
+  }
+}
+
+@include fontResize($mqIterations);

package/styles/atomic/links.scss

@@ -0,0 +1,21 @@
+a {
+  cursor: var(--cursor-pointer);
+  color: var(--color-hyperlink);
+  transition: color var(--transition-time-medium);
+
+  &:hover,
+  &:active {
+    color: hsl(from var(--color-hyperlink) h s calc(l + var(--adjust-hover)));
+  }
+
+  &:visited {
+    color: var(--color-hyperlink-visited);
+
+    &:hover,
+    &:active {
+      color: hsl(
+        from var(--color-hyperlink-visited) h s calc(l + var(--adjust-hover))
+      );
+    }
+  }
+}

package/styles/atomic/outline.scss

@@ -0,0 +1,43 @@
+@use "../colors.scss";
+
+.outline-dotted {
+  outline-style: dotted !important;
+}
+
+.outline-dashed {
+  outline-style: dashed !important;
+}
+
+.outline-solid {
+  outline-style: solid !important;
+}
+
+.outline-double {
+  outline-style: double !important;
+}
+
+.outline-groove {
+  outline-style: groove !important;
+}
+
+.outline-ridge {
+  outline-style: ridge !important;
+}
+
+.outline-inset {
+  outline-style: inset !important;
+}
+
+.outline-outset {
+  outline-style: outset !important;
+}
+
+$map-keys: colors.$color-map !default;
+
+@each $color-name, $color-value in $map-keys {
+  .outline-color-#{$color-name} {
+    outline: var(--border-thickness-small)
+      solid
+      hsl(from $color-value h s calc(l + var(--adjust-color))) !important;
+  }
+}

package/styles/atomic/text.scss

@@ -0,0 +1,39 @@
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-baseline {
+  text-align: baseline;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-pre {
+  white-space: pre;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-underline {
+  text-decoration: underline;
+}

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,74 +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 {
-  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);
-  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;
@@ -18,6 +19,11 @@
     align-content: center;
   }
 
+  &--fluid {
+    flex: 1;
+    width: 100%;
+  }
+
   &__control {
     display: flex;
     overflow: hidden;
@@ -27,12 +33,14 @@
     line-height: base.em(16px);
     height: base.em(22px);
     border-radius: var(--button-border-radius);
+    @include button.button-color();
   }
 
   &__selected-text {
     flex: 1;
     display: inline-block;
     align-content: center;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     height: 100%;