tgui-core 1.8.4 → 2.0.1

package/styles/components/TextArea.scss

@@ -1,29 +1,30 @@
 @use "../base";
-@use "../functions" as *;
 @use "./Input";
 
-$text-color: Input.$text-color !default;
-$background-color: Input.$background-color !default;
-$border-color: Input.$border-color !default;
-$border-radius: Input.$border-radius !default;
+$text-color: 0 !default;
+$background-color: 0 !default;
+$border-color: 0 !default;
+$border-radius: 0 !default;
 
 .TextArea {
-  position: relative;
+  background-color: var(--input-background);
+  border-radius: var(--input-border-radius);
+  border: var(--border-thickness-tiny) solid var(--input-border-color);
+  box-sizing: border-box;
   display: inline-block;
-  border: base.em(1px) solid $border-color;
-  border: base.em(1px) solid rgba($border-color, 0.75);
-  border-radius: $border-radius;
-  background-color: $background-color;
-  margin-right: base.em(2px);
   line-height: base.em(17px);
-  box-sizing: border-box;
+  margin-right: base.em(2px);
+  position: relative;
   width: 100%;
+  &:focus-within {
+    border-color: var(--input-border-color-focus);
+  }
 }
 
 .TextArea--fluid {
   display: block;
-  width: auto;
   height: auto;
+  width: auto;
 }
 
 .TextArea--noborder {
@@ -31,39 +32,34 @@ $border-radius: Input.$border-radius !default;
 }
 
 .TextArea__textarea.TextArea__textarea--scrollable {
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  overflow: hidden auto;
 }
 
 .TextArea__textarea {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  background-color: transparent;
   border: 0;
-  outline: 0;
-  width: 100%;
-  height: 100%;
+  box-sizing: border-box;
+  color: var(--input-color);
+  display: block;
+  font-family: inherit;
   font-size: 1em;
+  height: 100%;
+  inset: 0;
   line-height: base.em(17px);
-  min-height: base.em(17px);
   margin: 0;
-  padding: 0 0.5em;
-  font-family: inherit;
-  background-color: transparent;
-  color: inherit;
-  box-sizing: border-box;
+  min-height: base.em(17px);
+  outline: 0;
+  overflow: hidden;
+  padding: 0 var(--space-m);
+  position: absolute;
+  resize: none;
+  width: 100%;
   // Make sure the div and the textarea wrap words in the same way
   word-wrap: break-word;
-  overflow: hidden;
 
-  &:-ms-input-placeholder {
+  &::placeholder {
     font-style: italic;
-    color: hsl(0, 0%, 46.7%);
-    color: hsla(0, 0%, 100%, 0.45);
+    color: var(--input-color-placeholder);
   }
 }
 
@@ -73,7 +69,7 @@ $border-radius: Input.$border-radius !default;
 }
 
 .TextArea__nowrap {
-  white-space: nowrap;
   overflow-wrap: normal;
   overflow-x: scroll;
+  white-space: nowrap;
 }

package/styles/components/Tooltip.scss

@@ -1,20 +1,17 @@
 @use "../base";
-@use "../functions" as *;
 
-$color: hsl(0, 0%, 100%) !default;
-$background-color: hsl(0, 0%, 0%) !default;
-$border-radius: base.$border-radius !default;
+$color: 0 !default;
+$background-color: 0 !default;
+$border-radius: 0 !default;
 
 .Tooltip {
-  padding: 0.5em 0.75em;
+  backdrop-filter: var(--tooltip-blur);
+  background-color: var(--tooltip-background);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: 0.1em 0.1em 1.25em -0.1em hsla(0, 0%, 0%, 0.5);
+  color: var(--tooltip-color);
+  max-width: base.em(250px);
+  padding: var(--space-m) var(--space-l);
   pointer-events: none;
   text-align: left;
-  transition: opacity 150ms ease-out;
-  background-color: $background-color;
-  color: $color;
-  box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
-  border-radius: $border-radius;
-  max-width: base.em(250px);
-  // Must be over everything
-  z-index: 999;
 }

package/styles/functions.scss

@@ -1,12 +1,6 @@
-@use "sass:color";
-@use "sass:map";
 @use "sass:math";
-@use "sass:meta";
 
-//  Type-casting
-// --------------------------------------------------------
-
-// Get a unit-less numeric value
+/* Type-casting: Get a unit-less numeric value */
 @function num($value) {
   @if meta.type-of($value) != number {
     @error 'Could not convert `#{$value}` - must be `type-of number`';
@@ -17,58 +11,3 @@
   }
   @return math.div($value, $value * 0 + 1);
 }
-
-//  Color
-// --------------------------------------------------------
-
-// Increases perceptual color lightness.
-@function lighten($color, $percent) {
-  $scaled: hsl(
-    color.channel($color, "hue", $space: hsl),
-    color.channel($color, "saturation", $space: hsl),
-    color.channel($color, "lightness", $space: hsl) * (1 + num($percent))
-  );
-  $mixed: color.mix(hsl(0, 0%, 100%), $color, 100% * num($percent));
-  @return color.mix($scaled, $mixed, 75%);
-}
-
-// Returns the NTSC luminance of `$color` as a float (between 0 and 1).
-// 1 is pure white, 0 is pure black.
-@function luminance($color) {
-  $colors: (
-    "red": color.channel($color, "red", $space: rgb),
-    "green": color.channel($color, "green", $space: rgb),
-    "blue": color.channel($color, "blue", $space: rgb),
-  );
-
-  @each $name, $value in $colors {
-    $adjusted: 0;
-    $value: math.div($value, 255);
-    @if $value < 0.03928 {
-      $value: math.div($value, 12.92);
-    } @else {
-      $value: math.div($value + 0.055, 1.055);
-      $value: math.pow($value, 2.4);
-    }
-
-    $colors: map.merge(
-      $colors,
-      (
-        $name: $value,
-      )
-    );
-  }
-
-  @return (map.get($colors, "red") * 0.2126) +
-    (map.get($colors, "green") * 0.7152) + (map.get($colors, "blue") * 0.0722);
-}
-
-// Blends an RGBA color with a static background color based on its
-// alpha channel. Returns an RGB color, which is compatible with IE8.
-@function fake-alpha($color-rgba, $color-background) {
-  @return color.mix(
-    color.change($color-rgba, $alpha: 1),
-    $color-background,
-    color.alpha($color-rgba) * 100%
-  );
-}

package/styles/main.scss

@@ -1,5 +1,9 @@
 @use "sass:meta";
-@use "base";
+
+// CSS Variables
+@use "./vars-colors";
+@use "./vars-values";
+@use "./vars-components";
 
 // Core styles
 @include meta.load-css("./reset.scss");
@@ -13,6 +17,7 @@
 @include meta.load-css("./components/Divider.scss");
 @include meta.load-css("./components/Dropdown.scss");
 @include meta.load-css("./components/Flex.scss");
+@include meta.load-css("./components/Floating.scss");
 @include meta.load-css("./components/Icon.scss");
 @include meta.load-css("./components/ImageButton.scss");
 @include meta.load-css("./components/Input.scss");

package/styles/reset.scss

@@ -1,21 +1,21 @@
-@use "base";
-
 html,
 body {
   box-sizing: border-box;
   height: 100%;
   margin: 0;
-  font-size: base.$font-size;
+  font-size: var(--font-size, 12px);
+  color: var(--color-text, hsl(0, 0%, 100%));
+  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-base);
 }
 
 html {
+  cursor: var(--cursor-default, default); // Reset the cursor.
   overflow: hidden;
-  cursor: default; // Reset the cursor.
 }
 
 body {
   overflow: auto;
-  font-family: Verdana, Geneva, sans-serif;
+  font-family: var(--font-family, Verdana, Geneva, sans-serif);
 }
 
 *,
@@ -32,27 +32,23 @@ h5,
 h6 {
   display: block;
   margin: 0;
-  padding: 6px 0;
-  padding: 0.5rem 0;
+  padding: var(--space-m, 6px) 0;
+  padding: var(--space-m, 0.5rem) 0;
 }
 
 h1 {
-  font-size: 18px;
   font-size: 1.5rem;
 }
 
 h2 {
-  font-size: 16px;
   font-size: 1.333rem;
 }
 
 h3 {
-  font-size: 14px;
   font-size: 1.167rem;
 }
 
 h4 {
-  font-size: 12px;
   font-size: 1rem;
 }
 

package/styles/vars-colors.scss

@@ -0,0 +1,108 @@
+/**
+ * TGUI
+ * Main Colors
+ *
+ * This file contains all the main colors that are
+ * used elsewhere and are mixed/modified to
+ * suit the needs of the components/ui's.
+ *
+ * The main goal is to standardize colors.
+ * When adding new independent colors, you should add them here.
+ *
+ * Overwriting these variables will have an extreme impact
+ * on the global appearance of the entire TGUI, as they are used everywhere.
+ * For finer customization of components, use vars-components.scss
+ *
+ * Made with love by Aylong (https://github.com/AyIong)
+ */
+
+:root {
+  /* Background colors */
+  --color-base: hsl(0, 0%, 15%);
+  --color-section: hsla(0, 0%, 0%, 0.33);
+  --color-secondary: hsl(
+    from var(--color-base) var(--secondary-hue) var(--secondary-saturation)
+      calc(l + var(--secondary-lightness-adjustment))
+  );
+  --secondary-hue: h;
+  --secondary-saturation: s;
+  --secondary-lightness-adjustment: 7.5;
+  --base-gradient-spread: 2;
+  --color-base-start: hsl(
+    from var(--color-base) h s calc(l + var(--base-gradient-spread))
+  );
+  --color-base-end: hsl(
+    from var(--color-base) h s calc(l - var(--base-gradient-spread))
+  );
+
+  /* Scrollbar */
+  --color-scrollbar-base: var(--color-section);
+  --color-scrollbar-thumb: hsl(from var(--color-base) h s calc(l + 9.25));
+
+  /* Candystripe */
+  --candystripe-odd: hsla(0, 0%, 0%, 0.25);
+  --candystripe-even: transparent;
+
+  /* Base colors */
+  --color-red: hsl(0, 70%, 50%);
+  --color-orange: hsl(25, 90%, 50%);
+  --color-yellow: hsl(50, 97.5%, 50%);
+  --color-olive: hsl(70, 75%, 45%);
+  --color-green: hsl(140, 70%, 40%);
+  --color-teal: hsl(180, 100%, 35%);
+  --color-blue: hsl(210, 65%, 47.5%);
+  --color-violet: hsl(260, 60%, 50%);
+  --color-purple: hsl(290, 60%, 50%);
+  --color-pink: hsl(325, 70%, 50%);
+  --color-brown: hsl(25, 47.5%, 45%);
+
+  /* Grayscale colors */
+  --color-black: hsl(0, 0%, 0%);
+  --color-white: hsl(0, 0%, 100%);
+  --color-grey: hsl(0, 0%, 50%);
+  --color-light-grey: hsl(0, 0%, 66.6%);
+  --color-gray: var(--color-grey);
+  --color-light-gray: var(--color-light-grey);
+
+  /* Action colors */
+  --color-action: hsl(0, 0%, 50%);
+  --color-hover: hsl(from var(--color-action) h s l / 0.25);
+  --color-active: hsl(from var(--color-action) h s l / 0.3);
+  --color-selected: hsl(from var(--color-action) h s l / 0.4);
+
+  /* Semantic colors */
+  --primary-hue: 210;
+  --primary-saturation: 37.5%;
+  --primary-lightness: 45%;
+  /* prettier-ignore */
+  --color-primary: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
+  --color-good: hsl(95, 62.5%, 40%);
+  --color-average: hsl(32.5, 90%, 50%);
+  --color-bad: hsl(0, 72.5%, 50%);
+  --color-label: hsl(from var(--color-primary) h 17.5 57.5);
+
+  /* Text colors */
+  --color-text: var(--color-white);
+  --color-text-translucent: hsl(from var(--color-text) h s l / 0.5);
+  --color-text-translucent-light: hsl(from var(--color-text) h s l / 0.75);
+  --color-text-fixed-white: var(--color-white);
+  --color-text-fixed-black: var(--color-black);
+
+  /* Link colors */
+  --color-hyperlink: hsl(220, 100%, 70%);
+  --color-hyperlink-visited: hsl(260, 100%, 70%);
+  --color-hyperlink-new: hsl(0, 100%, 70%);
+  --color-hyperlink-new-visited: hsl(15, 100%, 70%);
+
+  /* Border */
+  --color-border: hsla(0, 0%, 100%, 0.1);
+  --color-border-dark: hsla(0, 0%, 0%, 0.33);
+  --border-primary-saturation: 100;
+  --border-primary-lightness: 75;
+  --border-primary-alpha: 0.75;
+  --color-border-primary: hsl(
+    from var(--color-primary) h var(--border-primary-saturation)
+      var(--border-primary-lightness) / var(--border-primary-alpha)
+  );
+  --color-border-secondary: hsl(from var(--color-border-primary) h s l / 1);
+}

package/styles/vars-components.scss

@@ -0,0 +1,162 @@
+/**
+ * TGUI
+ * Components Variables
+ *
+ * This file contains all variables used in components,
+ * or almost all...
+ *
+ * If you make a new component, or edit an existing one
+ * and you need a new color for it, it is highly advisable to
+ * add a new variable for the component, and only then use the color.
+ *
+ * That's allows downstreams/other codebases to customize each component as needed,
+ * creating their own unique (almost) TGUI designs with ease (almost).
+ *
+ * Don't add new base colors here, that files only for mixing and modifying
+ * variables from vars-colors.scss and vars-values.scss,
+ * for their further use in components.
+ *
+ * Made with love by Aylong (https://github.com/AyIong)
+ */
+
+:root {
+  /* BlockQuote */
+  --blockquote-color: hsl(
+    from var(--color-label) h s calc(l + var(--adjust-color))
+  );
+  --blockquote-border: var(--border-thickness-small) solid;
+
+  /* Button */
+  --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-border-radius: var(--border-radius-tiny);
+  --button-transition: var(--transition-time-medium);
+  --button-transition-timing: ease;
+
+  /* Dialog */
+  --dialog-background: hsl(from var(--color-section) h s l / 0.5);
+
+  /* Dimmer */
+  --dimmer-background-opacity: 0.75;
+  --dimmer-background: hsl(
+    from var(--color-base) h s 5 / var(--dimmer-background-opacity)
+  );
+
+  /* Divider */
+  --divider-color: var(--color-border);
+  --divider-border: var(--border-thickness-small) solid var(--divider-color);
+
+  /* Dropdown */
+  --dropdown-transition: var(--transition-time-medium);
+  --dropdown-menu-color: var(--color-text);
+  --dropdown-menu-background: hsl(
+    from var(--color-base) h s calc(l - 5.5) / 0.85
+  );
+  --dropdown-menu-border: var(--border-thickness-tiny) solid var(--color-border);
+  --dropdown-menu-border-radius: var(--border-radius-large);
+  --dropdown-menu-blur: var(--blur-medium);
+  --dropdown-entry-background-hover: var(--color-hover);
+  --dropdown-entry-background-active: var(--color-active);
+  --dropdown-entry-background-selected: var(--color-selected);
+  --dropdown-entry-border-radius: var(--border-radius-small);
+  --dropdown-entry-transition: var(--transition-time-fast);
+
+  /* Floating */
+  --floating-transition-time: var(--transition-time-medium);
+  --floating-transition-timing: ease;
+
+  /* Tabs */
+  --tab-background: transparent;
+  --tab-background-hover: hsl(from var(--color-hover) h s calc(l * 0.75));
+  --tab-background-selected: hsl(from var(--color-selected) h s calc(l * 0.75));
+  --tab-color: var(--color-text-translucent);
+  --tab-color-selected: hsl(from var(--color-primary) h s 90);
+  --tab-border-radius: var(--border-radius-small);
+  --tab-indicator-size: var(--border-thickness-small);
+  --tab-transition: var(--transition-time-medium);
+  --tabs-container-background: var(--color-section);
+
+  /* Input */
+  --input-background-lightness: 5;
+  --input-background: hsl(
+    from var(--color-base) h s var(--input-background-lightness)
+  );
+  --input-color: var(--color-text);
+  --input-color-placeholder: var(--color-text-translucent);
+  --input-border-color: var(--color-border-primary);
+  --input-border-color-focus: var(--color-border-secondary);
+  --input-border-radius: var(--border-radius-tiny);
+  --input-transition: var(--transition-time-medium);
+  --input-font-family: var(--font-family);
+  --input-font-family-mono: var(--font-family-mono);
+
+  /* Knob */
+  --knob-color: hsl(from var(--color-base) h 5 20);
+  --knob-ring-color: var(--input-border-color);
+  --knob-popup-background: var(--tooltip-background);
+  --knob-popup-color: var(--tooltip-color);
+  --knob-popup-border-radius: var(--tooltip-border-radius);
+  --knob-popup-blur: var(--tooltip-blur);
+  --knob-inner-padding: var(--space-xs);
+
+  /* Menu Bar */
+  --menu-bar-background: var(--color-base);
+  --menu-bar-font-family: var(--font-family);
+  --menu-bar-transition: var(--transition-time-medium);
+
+  /* Modal */
+  --modal-background: var(--color-base);
+  --modal-padding: var(--space-xl);
+
+  /* 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);
+
+  /* Number Input */
+  --number-input-background: var(--input-background);
+  --number-input-color: var(--input-color);
+  --number-input-border-color: var(--input-border-color);
+  --number-input-border-color-active: var(--input-border-color-focus);
+  --number-input-border-radius: var(--input-border-radius);
+  --number-input-transition: var(--input-transition);
+
+  /* Progress Bar */
+  --progress-bar-fill: var(--color-primary);
+  --progress-bar-background: transparent;
+  --progress-bar-border-radius: var(--border-radius-tiny);
+  --progress-bar-transition: var(--transition-time-slowest);
+
+  /* Round Gauge */
+  --round-gauge-ring-color: var(--input-border-color);
+  --round-gauge-transition: var(--transition-time-medium);
+  --round-gauge-alert-animation: var(--transition-time-slowest);
+  --round-gauge-needle-alert-animation: var(--transition-time-fast);
+  --round-gauge-needle-alert-rotation: 2.5deg;
+
+  /* Section - Why not? */
+  --section-title-color: var(--color-text);
+  --section-background: var(--color-section);
+  --section-separator-color: var(--color-primary);
+  --section-separator-thickness: var(--border-thickness-small);
+
+  /* Slider */
+  --slider-cursor-color: var(--color-text);
+  --slider-popup-background: var(--tooltip-background);
+  --slider-popup-color: var(--tooltip-color);
+  --slider-popup-border-radius: var(--tooltip-border-radius);
+  --slider-popup-blur: var(--tooltip-blur);
+
+  /* Tooltip */
+  --tooltip-color: var(--color-text);
+  --tooltip-background-lightness: 5;
+  --tooltip-background: hsl(
+    from var(--color-base) h s var(--tooltip-background-lightness) / 0.85
+  );
+  --tooltip-border-radius: var(--border-radius-medium);
+  --tooltip-blur: var(--blur-medium);
+}

package/styles/vars-values.scss

@@ -0,0 +1,110 @@
+/**
+ * TGUI
+ * Values Variables
+ *
+ * This file contains all values, like spacings, sizes, etc.
+ * You won't find any colors here, just numbers and letters.
+ *
+ * Made with love by Aylong (https://github.com/AyIong)
+ */
+:root {
+  /* Font */
+  --font-size: 12px;
+  --font-family: Verdana, Geneva, sans-serif;
+  --font-family-mono: Consolas, monospace;
+
+  /* Border thickness */
+  --border-thickness-unit: 0.5em;
+  /* 1px | 0.085em */
+  --border-thickness-tiny: calc(var(--border-thickness-unit) * 0.5 * 0.34);
+  /* 2px | 0.17em */
+  --border-thickness-small: calc(var(--border-thickness-unit) * 0.34);
+  /* 3px | 0.25em */
+  --border-thickness-medium: calc(var(--border-thickness-unit) * 0.5);
+  /* 4px | 0.33em */
+  --border-thickness-large: calc(var(--border-thickness-unit) * 0.66);
+  /* 6px | 0.5em */
+  --border-thickness-larger: var(--border-thickness-unit);
+
+  /* Border radius */
+  --border-radius-unit: 1rem;
+  /* 2px | 0.17rem */
+  --border-radius-tiny: calc(var(--border-radius-unit) * 0.25 * 0.68);
+  /* 3px | 0.25rem */
+  --border-radius-small: calc(var(--border-radius-unit) * 0.25);
+  /* 4px | 0.33rem */
+  --border-radius-medium: calc(var(--border-radius-unit) * 0.33);
+  /* 6px | 0.5rem */
+  --border-radius-large: calc(var(--border-radius-unit) * 0.5);
+  /* 10px | 0.75rem */
+  --border-radius-larger: calc(var(--border-radius-unit) * 0.75);
+  /* 12px | 1rem*/
+  --border-radius-huge: var(--border-radius-unit);
+  /* 24px | 2rem*/
+  --border-radius-giant: calc(var(--border-radius-unit) * 2);
+  /* Maximum border radius. Makes perfect circles */
+  --border-radius-circular: 99999px;
+
+  /* Spacing */
+  --space-unit: 1em;
+  /* 1px | 0.085em */
+  --space-xxs: calc(var(--space-unit) * 0.25 * 0.34);
+  /* 2px | 0.17em */
+  --space-xs: calc(var(--space-unit) * 0.25 * 0.68);
+  /* 3px | 0.25em */
+  --space-s: calc(var(--space-unit) * 0.25);
+  /* 4px | 0.33em */
+  --space-sm: calc(var(--space-unit) * 0.33);
+  /* 6px | 0.5em */
+  --space-m: calc(var(--space-unit) * 0.5);
+  /* 8px | 0.66em */
+  --space-ml: calc(var(--space-unit) * 0.66);
+  /* 10px | 0.75em */
+  --space-l: calc(var(--space-unit) * 0.75);
+  /* 12px | 1em*/
+  --space-xl: var(--space-unit);
+  /* 24px | 2em*/
+  --space-xxl: calc(var(--space-unit) * 2);
+
+  /* Transition */
+  --transition-time-unit: 1s;
+  /* 0.1s | 100ms */
+  --transition-time-fast: calc(var(--transition-time-unit) * 0.1);
+  /* 0.2s | 200ms */
+  --transition-time-medium: calc(var(--transition-time-unit) * 0.2);
+  /* 0.5s | 500ms */
+  --transition-time-slow: calc(var(--transition-time-unit) * 0.5);
+  /* 1s | 1000ms */
+  --transition-time-slowest: var(--transition-time-unit);
+
+  /* Shadows */
+  --shadow-unit: 1rem;
+  /* 0 0 0.5rem */
+  --shadow-glow-small: 0 0 calc(var(--shadow-unit) * 0.5);
+  /* 0 0 1rem */
+  --shadow-glow-medium: 0 0 var(--shadow-unit);
+  /* 0 0 2rem */
+  --shadow-glow-large: 0 0 calc(var(--shadow-unit) * 2);
+
+  /* Blur */
+  --blur-small: blur(6px);
+  --blur-medium: blur(12px);
+  --blur-large: blur(24px);
+
+  /* Adjustments */
+  /* Color lightness multiplier. + for FG - for BG */
+  --adjust-color: 5;
+  /* Color lightness multiplier wneh hovered */
+  --adjust-hover: 10;
+  /* Color lightness multiplier when active (clicked) */
+  --adjust-active: 7.5;
+
+  /* Cursors */
+  --cursor-default: default;
+  --cursor-pointer: pointer;
+  --cursor-disabled: var(--cursor-default);
+  --cursor-n-resize: n-resize;
+  --cursor-s-resize: s-resize;
+  --cursor-se-resize: se-resize;
+  --cursor-e-resize: e-resize;
+}