tgui-core 5.10.0 → 5.11.0

package/dist/components/Dropdown.d.ts

@@ -32,6 +32,10 @@ type Props = {
     iconRotation: number;
     /** Whether or not the icon should spin */
     iconSpin: boolean;
+    /** Whether we want to make the search input styled like a regular dropdown button. */
+    styledInput: boolean;
+    /** Maximum number of items to display before having to scroll */
+    maxItems: number;
     /** Width of the dropdown menu in box units. Default: 15 */
     menuWidth: string | number;
     /** Whether or not the arrow on the right hand side of the dropdown button is visible */

package/dist/components/Dropdown.js

@@ -1 +1 @@
-import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as s}from"react";import{Button as c}from"./Button.js";import{Floating as d}from"./Floating.js";import{Icon as a}from"./Icon.js";import{Input as p}from"./Input.js";function m(o){return"string"==typeof o?o:o.value}function u(u){let{autoScroll:w=!0,buttons:_,className:f,color:h="default",disabled:D,displayText:y,icon:g,iconRotation:v,iconSpin:N,iconOnly:C,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:I=[],over:S,placeholder:T="Select...",searchInput:B,selected:A,fluid:E,width:K=15}=u,[L,O]=s(!1),[$,F]=s(""),M=i(null),U=I.findIndex(o=>m(o)===A)||0;function W(o){let n=o;n=o<U?o<2?0:o-2:o>I.length-3?I.length-1:o-2;let e=M.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function q(o){let n;if(I.length<1||D)return;let e=I.length-1;n=U<0?"next"===o?e:0:"next"===o?U===e?0:U+1:0===U?e:U-1,L&&w&&W(n),k?.(m(I[n]))}let z=$?I.filter(o=>("string"==typeof o?o:o.displayText||m(o)).toString().toLowerCase().includes($.toLowerCase())):I,G=S?"top":"bottom";return C&&(G=`${G}-start`),e("div",{className:r(["Dropdown",E&&"Dropdown--fluid"]),children:[n(d,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:M,children:0===z.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):z.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",A===e&&"selected"]),onClick:()=>{k?.(e),F("")},onKeyDown:o=>{o.key===t.Enter&&(k?.(e),F(""))},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:D,onMounted:()=>{L&&w&&-1!==U&&W(U)},onOpenChange:O,placement:G,children:B?n(p,{className:r(["Dropdown__input",f]),placeholder:y?.toString()||T,disabled:D,value:$,alwaysUpdate:!0,onChange:F}):e("div",{className:r(["Dropdown__control",`Button--color--${h}`,D&&"Button--disabled",C&&"Dropdown__control--icon-only",f]),onClick:o=>{(!D||L)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||D||j?.(o)},style:{width:l(K)},children:[g&&n(a,{className:"Dropdown__icon",name:g,rotation:v,spin:N}),!C&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:y||A&&m(A)||T}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",S&&"over",L&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(c,{className:"Dropdown__button",disabled:D,icon:"chevron-left",onClick:()=>{q("previous")}}),n(c,{className:"Dropdown__button",disabled:D,icon:"chevron-right",onClick:()=>{q("next")}})]})]})}export{u as Dropdown};
+import{Fragment as e,jsx as n,jsxs as o}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as d}from"react";import{Button as c}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";import{Input as u}from"./Input.js";let p=null;function m(e){return"string"==typeof e?e:e.value}function w(w){let{autoScroll:_=!0,buttons:h,className:f,color:y="default",disabled:D,displayText:v,icon:N,iconRotation:g,iconSpin:b,iconOnly:C,styledInput:x,maxItems:j,menuWidth:k,noChevron:S,onClick:B,onSelected:E,options:F=[],over:I,placeholder:M="Select...",searchInput:T,selected:K,fluid:O,width:$=15}=w,[A,L]=d(!1),[P,z]=d(""),U=i(null),V=i(!1),W=i(!1),q=i(null),G=F.findIndex(e=>m(e)===K)||0;function H(e){let n=e;n=e<G?e<2?0:e-2:e>F.length-3?F.length-1:e-2;let o=U.current,t=o?.children[n];o&&t&&(o.scrollTop=t.offsetTop)}function J(e){let n;if(F.length<1||D)return;let o=F.length-1;n=G<0?"next"===e?o:0:"next"===e?G===o?0:G+1:0===G?o:G-1,A&&_&&H(n),E?.(m(F[n]))}let Q=P?F.filter(e=>("string"==typeof e?e:e.displayText||m(e)).toString().toLowerCase().includes(P.toLowerCase())):F,R=I?"top":"bottom";C&&(R=`${R}-start`);let X=j?{"--dropdown-menu-max-height":l(Math.max(Math.min(j,25),3)*function(){if(null!==p)return p;let e=parseFloat(getComputedStyle(document.body).getPropertyValue("--font-size")),n=document.createElement("div");n.className="Dropdown__menu--entry",n.textContent="test",document.body.appendChild(n);let o=parseFloat(getComputedStyle(n).height);return document.body.removeChild(n),p=Number.isNaN(o)||0===o||Number.isNaN(e)||0===e?1.7:o/e}())}:void 0;return o("div",{className:r(["Dropdown",O&&"Dropdown--fluid",T&&x&&`Button--color--${y}`]),children:[n(s,{ref:q,allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:U,style:X,children:0===Q.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):Q.map(e=>{let o=m(e);return n("div",{className:r(["Dropdown__menu--entry",K===o&&"selected"]),onClick:()=>{V.current=!0,E?.(o),z("")},onKeyDown:e=>{e.key===t.Enter&&(V.current=!0,E?.(o),z(""))},children:"string"==typeof e?e:e.displayText},o)})}),contentAutoWidth:!k,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:k?l(k):void 0},disabled:D,onMounted:()=>{A&&_&&-1!==G&&H(G)},onOpenChange:L,placement:R,children:T?o("div",{className:"Dropdown__input-wrapper",style:{width:l($)},children:[n(u,{className:r(["Dropdown__input",x&&"Dropdown__input--styled",f]),placeholder:v?.toString()||M,disabled:D,value:P,alwaysUpdate:!0,onKeyDown:e=>{" "===e.key&&e.stopPropagation()},onEnter:()=>{W.current=!0,q.current?.close()},onChange:z,onBlur:function(e){e&&W.current&&!V.current&&Q.length>0&&(V.current=!0,E?.(m(Q[0]))),V.current=!1,W.current=!1,z("")},fluid:!0}),!S&&n("div",{className:"Dropdown__input-chevron",children:n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",A&&"open"]),name:"chevron-down"})})]}):o("div",{className:r(["Dropdown__control",`Button--color--${y}`,D&&"Button--disabled",C&&"Dropdown__control--icon-only",f]),onClick:e=>{(!D||A)&&B?.(e)},onKeyDown:e=>{e.key!==t.Enter||D||B?.(e)},style:{width:l($)},children:[N&&n(a,{className:"Dropdown__icon",name:N,rotation:g,spin:b}),!C&&o(e,{children:[n("span",{className:"Dropdown__selected-text",children:v||K&&m(K)||M}),!S&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",I&&"over",A&&"open"]),name:"chevron-down"})]})]})}),h&&o(e,{children:[n(c,{className:"Dropdown__button",disabled:D,icon:"chevron-left",onClick:()=>{J("previous")}}),n(c,{className:"Dropdown__button",disabled:D,icon:"chevron-right",onClick:()=>{J("next")}})]})]})}new MutationObserver(()=>{p=null}).observe(document.documentElement,{attributes:!0,attributeFilter:["style"]});export{w as Dropdown};

package/dist/components/Floating.d.ts

@@ -1,7 +1,18 @@
 import { type BooleanLike } from '../common/react.ts';
 import { type Placement } from '@floating-ui/react';
 import { type CSSProperties, type ReactNode } from 'react';
-type Props = {
+export type FloatingHandle = {
+    /** Imperatively close the floating element. */
+    close: () => void;
+};
+/**
+ * ## Floating
+ *
+ *  Floating lets you position elements so that they don't go out of the bounds of the window.
+ *
+ * - [Documentation](https://floating-ui.com/docs/react) for more information.
+ */
+export declare const Floating: import("react").ForwardRefExoticComponent<{
     /** Interacting with this element will open the floating element. */
     children: ReactNode;
     /** The content to display like floating. */
@@ -75,13 +86,4 @@ type Props = {
      * Called when mounted
      */
     onMounted: () => void;
-}>;
-/**
- * ## Floating
- *
- *  Floating lets you position elements so that they don't go out of the bounds of the window.
- *
- * - [Documentation](https://floating-ui.com/docs/react) for more information.
- */
-export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+}> & import("react").RefAttributes<FloatingHandle>>;

package/dist/components/Floating.js

@@ -1 +1 @@
-import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as r,autoUpdate as i,flip as a,offset as l,safePolygon as s,shift as c,size as d,useClick as m,useDismiss as p,useFloating as g,useHover as f,useInteractions as h,useTransitionStatus as u}from"@floating-ui/react";import{cloneElement as C,isValidElement as v,useEffect as w,useState as F}from"react";function b(b){let x,{allowedOutsideClasses:y,animationDuration:O,children:R,closeAfterInteract:j,content:k,contentAutoWidth:z,contentClasses:E,contentOffset:M=6,contentStyles:P,disabled:S,hoverDelay:q,hoverOpen:I,hoverSafePolygon:N,handleOpen:$,onMounted:A,placement:B,preventPortal:D,stopChildPropagation:G,onOpenChange:H}=b,[J,K]=F(!1),{refs:L,floatingStyles:Q,context:T}=g({middleware:[l(M),a({padding:6}),c(),z&&d({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){K(e),H?.(e)},open:J,placement:B||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==A&&A(),i(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!1}))}),{isMounted:U,status:V}=u(T,{duration:O||200}),W=p(T,{ancestorScroll:!0,outsidePress:e=>!y||e.target instanceof Element&&!e.target.closest(y)}),X=m(T,{enabled:!S}),Y=f(T,{enabled:!S,restMs:q||200,handleClose:N?s({requireIntent:!1}):null}),Z=void 0!==$,{getReferenceProps:_,getFloatingProps:ee}=h(Z?[]:[W,I?Y:X]),et=_({ref:L.setReference,...G&&{onClick:e=>e.stopPropagation()}}),en=ee({onClick:()=>{j&&T.onOpenChange(!1)},ref:L.setFloating});w(()=>{Z&&T.onOpenChange($)},[$]),x=v(R)?C(R,et):t("div",{...et,children:R});let eo=t("div",{className:o(["Floating",!O&&"Floating--animated",E]),"data-position":T.placement,"data-transition":V,style:{...Q,...P},...en,children:k});return n(e,{children:[x,U&&!!k&&(D?eo:t(r,{id:"tgui-root",children:eo}))]})}export{b as Floating};
+import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as a,autoUpdate as i,flip as r,offset as l,safePolygon as s,shift as c,size as d,useClick as m,useDismiss as p,useFloating as g,useHover as f,useInteractions as h,useTransitionStatus as u}from"@floating-ui/react";import{cloneElement as C,forwardRef as F,isValidElement as v,useEffect as w,useImperativeHandle as O,useState as b}from"react";let x=F(function(F,x){let y,{allowedOutsideClasses:R,animationDuration:j,children:k,closeAfterInteract:z,content:E,contentAutoWidth:M,contentClasses:P,contentOffset:S=6,contentStyles:q,disabled:I,hoverDelay:N,hoverOpen:$,hoverSafePolygon:_,handleOpen:A,onMounted:B,placement:D,preventPortal:G,stopChildPropagation:H,onOpenChange:J}=F,[K,L]=b(!1),{refs:Q,floatingStyles:T,context:U}=g({middleware:[l(S),r({padding:6}),c(),M&&d({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){L(e),J?.(e)},open:K,placement:D||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==B&&B(),i(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!1}))});O(x,()=>({close:()=>U.onOpenChange(!1)}));let{isMounted:V,status:W}=u(U,{duration:j||200}),X=p(U,{ancestorScroll:!0,outsidePress:e=>!R||e.target instanceof Element&&!e.target.closest(R)}),Y=m(U,{enabled:!I}),Z=f(U,{enabled:!I,restMs:N||200,handleClose:_?s({requireIntent:!1}):null}),ee=void 0!==A,{getReferenceProps:et,getFloatingProps:en}=h(ee?[]:[X,$?Z:Y]),eo=et({ref:Q.setReference,...H&&{onClick:e=>e.stopPropagation()}}),ea=en({onClick:()=>{z&&U.onOpenChange(!1)},ref:Q.setFloating});w(()=>{ee&&U.onOpenChange(A)},[A]),y=v(k)?C(k,eo):t("div",{...eo,children:k});let ei=t("div",{className:o(["Floating",!j&&"Floating--animated",P]),"data-position":U.placement,"data-transition":W,style:{...T,...q},...ea,children:E});return n(e,{children:[y,V&&!!E&&(G?ei:t(a,{id:"tgui-root",children:ei}))]})});export{x as Floating};

package/package.json

@@ -71,5 +71,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.10.0"
+  "version": "5.11.0"
 }

package/styles/base.scss

@@ -1,29 +1,112 @@
 /**
- * @deprecated Use css-variables
+ * TGUI
+ * Base 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)
  */
 
-@use "sass:color";
-@use "sass:math";
+:root {
+  /* Font */
+  --font-size: 12px;
+  --font-family: Verdana, Geneva, sans-serif;
+  --font-family-mono: Consolas, monospace;
 
-$color-fg: hsl(0, 0%, 100%) !default;
-$color-bg: var(--color-base) !default;
-$color-bg-section: var(--color-section) !default;
-$color-bg-grad-spread: var(--base-gradient-spread) !default;
-$color-bg-start: var(--color-base-start) !default;
-$color-bg-end: var(--color-base-end) !default;
+  /* 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);
 
-$cursor-default: var(--cursor-default) !default;
-$cursor-hover: var(--cursor-pointer) !default;
-$cursor-disabled: var(--cursor-default) !default;
+  /* 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;
 
-$unit: 12px;
-$font-size: 1 * $unit !default;
-$border-radius: 0.16em !default;
+  /* 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);
 
-@function em($px) {
-  @return 1em * math.div($px, $unit);
-}
+  /* 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 when hovered */
+  --adjust-hover: 10;
+  /* Color lightness multiplier when active (clicked) */
+  --adjust-active: 7.5;
 
-@function rem($px) {
-  @return 1rem * math.div($px, $unit);
+  /* Cursors */
+  --cursor-default: default;
+  --cursor-pointer: pointer;
+  --cursor-grab: grab;
+  --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;
 }

package/styles/colors.scss

@@ -1,40 +1,122 @@
 /**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
+ * TGUI
+ * Main Colors
  *
- * @deprecated Use css-variables
+ * 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
  */
 
 @use "sass:color";
 @use "sass:map";
 @use "sass:meta";
 
-// Base colors
-$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;
+: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%);
+
+  /* Additional colors */
+  --color-gold: hsl(40, 90%, 50%);
+
+  /* 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%;
+  --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);
 
-$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;
+  /* 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);
+}
 
 // Mappings of color names
 $color-map: ();
-
 $_gen_map: (
   /* Base colors */ "red": var(--color-red),
   "orange": var(--color-orange),
@@ -72,18 +154,3 @@ $color-map-keys: map.keys($_gen_map) !default;
     )
   );
 }
-
-/**
- * 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/Button.scss

@@ -1,4 +1,3 @@
-@use "../base";
 @use "../colors";
 
 @mixin button-color() {

package/styles/components/Dialog.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .Dialog {
   position: fixed;
@@ -13,7 +13,7 @@
   display: flex;
   flex-direction: column;
   font-family: var(--font-family-mono);
-  font-size: base.em(14px);
+  font-size: fn.em(14px);
   background-color: var(--color-base);
 }
 

package/styles/components/Dropdown.scss

@@ -1,4 +1,5 @@
 @use "../base";
+@use "../functions" as fn;
 @use "./Button" as button;
 
 .Dropdown {
@@ -30,14 +31,25 @@
     overflow: hidden;
     flex: 1;
     font-family: var(--font-family);
-    font-size: base.em(12px);
-    line-height: base.em(16px);
-    height: base.em(22px);
+    font-size: fn.em(12px);
+    line-height: fn.em(16px);
+    height: fn.em(22px);
     border-radius: var(--button-border-radius);
+    @include button.button-color();
   }
 
-  &__control {
-    @include button.button-color();
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+    flex: 1;
+  }
+
+  &__input-chevron {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
   }
 
   &__selected-text {
@@ -57,7 +69,7 @@
     align-content: center;
     text-align: center;
     height: 100%;
-    width: base.em(22px);
+    width: fn.em(22px);
     transition: transform var(--dropdown-transition);
 
     &--arrow {
@@ -77,7 +89,7 @@
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--color-scrollbar-thumb) transparent;
-    max-height: base.em(200px);
+    max-height: var(--dropdown-menu-max-height);
     padding: var(--space-sm);
 
     &--wrapper {
@@ -95,8 +107,8 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       font-family: var(--font-family);
-      font-size: base.em(12px);
-      line-height: base.em(16px);
+      font-size: fn.em(12px);
+      line-height: var(--dropdown-entry-line-height);
       padding: var(--space-xs) var(--space-m);
       border-radius: var(--dropdown-entry-border-radius);
       transition: background-color var(--dropdown-entry-transition);
@@ -129,3 +141,16 @@
   justify-content: center;
   max-width: 2rem;
 }
+
+.Dropdown__input--styled {
+  --input-background: var(--button-background);
+  --input-border-color: var(--color-border-dark);
+  --input-border-color-focus: var(--color-border-dark);
+  --input-border-disabled: var(--color-border-dark);
+  --input-color: var(--button-color);
+  --input-color-placeholder: var(--button-color);
+
+  &.Input::placeholder {
+    font-style: normal;
+  }
+}

package/styles/components/MenuBar.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .MenuBar {
   display: flex;
@@ -6,8 +6,8 @@
 
 .MenuBar__font {
   font-family: var(--menu-bar-font-family);
-  font-size: base.em(12px);
-  line-height: base.em(17px);
+  font-size: fn.em(12px);
+  line-height: fn.em(17px);
 
   &.MenuBar__disabled {
     color: hsl(from currentColor h s l / 0.2);
@@ -75,7 +75,7 @@
 .MenuBar__MenuBarButton-text {
   text-overflow: clip;
   white-space: nowrap;
-  height: base.em(17px);
+  height: fn.em(17px);
 }
 
 .MenuBar__Separator {

package/styles/components/NoticeBox.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 @use "../colors";
 
 .NoticeBox {
@@ -12,8 +12,8 @@
   );
   background-image: repeating-linear-gradient(
     -45deg,
-    transparent 0 base.em(10px),
-    var(--notice-box-stripes) base.em(10px) base.em(20px)
+    transparent 0 fn.em(10px),
+    var(--notice-box-stripes) fn.em(10px) fn.em(20px)
   );
   color: var(--notice-box-color);
 }

package/styles/components/NumberInput.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .NumberInput {
   cursor: var(--cursor-n-resize);
@@ -6,7 +6,7 @@
   position: relative;
   display: inline-block;
   text-align: right;
-  line-height: base.em(17px);
+  line-height: fn.em(17px);
   padding: 0 var(--space-sm);
   margin-right: var(--space-xs);
   background-color: var(--number-input-background);
@@ -39,7 +39,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  width: base.em(3px);
+  width: fn.em(3px);
   box-sizing: border-box;
   border-bottom: var(--border-thickness-tiny) solid
     var(--number-input-border-color-active);
@@ -54,9 +54,9 @@
   border: 0;
   outline: 0;
   width: 100%;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  height: base.em(17px);
+  font-size: fn.em(12px);
+  line-height: fn.em(17px);
+  height: fn.em(17px);
   margin: 0;
   padding: 0 var(--space-m);
   font-family: var(--font-family);

package/styles/components/ProgressBar.scss

@@ -1,4 +1,3 @@
-@use "../base";
 @use "../colors";
 
 .ProgressBar {

package/styles/components/Section.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .Section {
   position: relative;
@@ -21,7 +21,7 @@
 }
 
 .Section__titleText {
-  font-size: base.em(14px);
+  font-size: fn.em(14px);
   font-weight: bold;
   color: var(--section-title-color);
 }
@@ -107,12 +107,12 @@
 
 // Level 2 section title
 .Section .Section .Section__titleText {
-  font-size: base.em(13px);
+  font-size: fn.em(13px);
 }
 
 // Level 3 section title
 .Section .Section .Section .Section__titleText {
-  font-size: base.em(12px);
+  font-size: fn.em(12px);
 }
 
 .Section--flex {

package/styles/components/Slider.scss

@@ -1,5 +1,3 @@
-@use "../base";
-
 .Slider {
   cursor: e-resize;
   user-select: none;

package/styles/components/Tooltip.scss

@@ -1,4 +1,4 @@
-@use "../base";
+@use "../functions" as fn;
 
 .Tooltip {
   backdrop-filter: var(--tooltip-blur);
@@ -6,7 +6,7 @@
   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);
+  max-width: fn.em(250px);
   padding: var(--space-m) var(--space-l);
   pointer-events: none;
   text-align: left;

package/styles/functions.scss

@@ -12,12 +12,32 @@
   @return math.div($value, $value * 0 + 1);
 }
 
-// Increases perceptual color lightness.
+/* Darken color, to make it more readable if used as a background */
+@function bg($color) {
+  @return hsl(from $color h s calc(l - var(--adjust-color)));
+}
+
+/* Lighten color, to make it more readable if used as a text */
+@function fg($color) {
+  @return hsl(from $color h s calc(l + var(--adjust-color)));
+}
+
+/* Increases perceptual color lightness. */
 @function lighten($color, $amount) {
   @return color.adjust($color, $lightness: $amount * 1%, $space: hsl);
 }
 
-// Decreases perceptual color lightness.
+/* Decreases perceptual color lightness. */
 @function darken($color, $amount) {
   @return color.adjust($color, $lightness: -$amount * 1%, $space: hsl);
 }
+
+/* Converts px to em. Relies on the font-size variable. */
+@function em($px) {
+  @return calc($px / var(--font-size) * 1em);
+}
+
+/* Converts px to rem. Relies on the font-size variable. */
+@function rem($px) {
+  @return calc($px / var(--font-size) * 1rem);
+}

package/styles/main.scss

@@ -1,8 +1,8 @@
 @use "sass:meta";
 
 // CSS Variables
-@use "./vars-colors";
-@use "./vars-values";
+@use "./base";
+@use "./colors";
 @use "./vars-components";
 
 // Core styles

package/styles/vars-components.scss

@@ -18,6 +18,8 @@
  *
  * Made with love by Aylong (https://github.com/AyIong)
  */
+@use "./base";
+@use "./functions" as fn;
 
 :root {
   /* BlockQuote */
@@ -54,6 +56,8 @@
   --divider-border: var(--border-thickness-small) solid var(--divider-color);
 
   /* Dropdown */
+  --dropdown-menu-max-height: #{fn.em(200px)};
+  --dropdown-entry-line-height: #{fn.em(16px)};
   --dropdown-transition: var(--transition-time-medium);
   --dropdown-menu-color: var(--color-text);
   --dropdown-menu-background: hsl(

package/styles/vars-colors.scss

@@ -1,114 +0,0 @@
-/**
- * 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%);
-
-  /* Additional colors */
-  --color-gold: hsl(40, 90%, 50%);
-
-  /* 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%;
-  --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-values.scss

@@ -1,111 +0,0 @@
-/**
- * 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-grab: grab;
-  --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;
-}