tgui-core 4.1.4 → 4.2.1

package/assets/bg-syndicate.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 200 289.742" opacity=".33">
+  <path d="m 93.537677,0 c -18.113125,0 -34.220133,3.11164 -48.323484,9.33437 -13.965092,6.22167 -24.612442,15.07114 -31.940651,26.5471 -7.1899398,11.33789 -10.3012266,24.74911 -10.3012266,40.23478 0,10.64662 2.7250026,20.46465 8.1751116,29.45258 5.615277,8.98686 14.038277,17.35204 25.268821,25.09436 11.230544,7.60531 26.507421,15.41835 45.830514,23.43782 19.983748,8.29557 34.848848,15.55471 44.592998,21.77638 9.74414,6.22273 16.7617,12.8585 21.05572,19.90951 4.29404,7.05208 6.44193,15.76408 6.44193,26.13459 0,16.17702 -5.20196,28.48222 -15.60673,36.91682 -10.2396,8.4347 -25.02203,12.6523 -44.345169,12.6523 -14.038171,0 -25.515247,-1.6594 -34.433618,-4.9777 -8.91837,-3.4566 -16.185572,-8.7113 -21.800839,-15.7633 -5.615277,-7.0521 -10.074795,-16.66088 -13.377899,-28.82812 l -24.7731626293945,0 0,56.82632 C 33.856769,286.07601 63.74904,289.74201 89.678383,289.74201 c 16.020027,0 30.719787,-1.3827 44.097337,-4.1479 13.54272,-2.9043 25.1041,-7.4676 34.68309,-13.6893 9.74413,-6.3597 17.34042,-14.5195 22.79052,-24.4748 5.4501,-10.09332 8.17511,-22.39959 8.17511,-36.91682 0,-12.99764 -3.3021,-24.33539 -9.90829,-34.0146 -6.44105,-9.81725 -15.52545,-18.52707 -27.25146,-26.13133 -11.56085,-7.60427 -27.91083,-15.83142 -49.05066,-24.68022 -17.50644,-7.19012 -30.719668,-13.68948 -39.638038,-19.49701 -8.918371,-5.80752 -18.607474,-12.43409 -24.096524,-18.87417 -5.426043,-6.36616 -9.658826,-15.07003 -9.658826,-24.88729 0,-9.26401 2.075414,-17.21345 6.223454,-23.85033 11.098298,-14.39748 41.286638,-1.79507 45.075609,24.34762 4.839392,6.77491 8.84935,16.24729 12.029515,28.4156 l 20.53234,0 0,-55.99967 c -4.47825,-5.92448 -9.95488,-10.63222 -15.90837,-14.37411 1.64055,0.47905 3.19039,1.02376 4.63865,1.64024 6.49861,2.62607 12.16793,7.32747 17.0073,14.10345 4.83939,6.77491 8.84935,16.24567 12.02952,28.41397 0,0 8.48128,-0.12894 8.48978,-0.002 0.41776,6.41494 -1.75339,9.45286 -4.12342,12.56104 -2.4174,3.16978 -5.14486,6.78973 -4.00278,13.0029 1.50786,8.20318 10.18354,10.59642 14.62194,9.31154 -3.31842,-0.49911 -5.31855,-1.74948 -5.31855,-1.74948 0,0 1.87646,0.99868 5.65117,-1.35981 -3.27695,0.95571 -10.70529,-0.79738 -11.80125,-6.76313 -0.95752,-5.20861 0.94654,-7.29514 3.40113,-10.51482 2.45462,-3.21968 5.28426,-6.95831 4.6843,-14.48824 l 0.003,0.002 8.92676,0 0,-55.99967 c -15.07125,-3.87168 -27.65314,-6.36042 -37.74671,-7.46586 -9.95531,-1.10755 -20.18823,-1.65981 -30.696613,-1.65981 z m 70.321603,17.30893 0.23805,40.3049 c 1.31808,1.22666 2.43965,2.27815 3.34081,3.10602 4.83939,6.77491 8.84934,16.24566 12.02951,28.41397 l 20.53234,0 0,-55.99967 c -6.67731,-4.59381 -19.83643,-10.47309 -36.14071,-15.82522 z m -28.12049,5.60551 8.56479,17.71655 c -11.97037,-6.46697 -13.84678,-9.71726 -8.56479,-17.71655 z m 22.79705,0 c 2.7715,7.99929 1.78741,11.24958 -4.49354,17.71655 l 4.49354,-17.71655 z m 15.22195,24.00848 8.56479,17.71655 c -11.97038,-6.46697 -13.84679,-9.71726 -8.56479,-17.71655 z m 22.79704,0 c 2.7715,7.99929 1.78741,11.24958 -4.49354,17.71655 l 4.49354,-17.71655 z m -99.11384,2.20764 8.56479,17.71655 c -11.970382,-6.46697 -13.846782,-9.71726 -8.56479,-17.71655 z m 22.79542,0 c 2.7715,7.99929 1.78741,11.24958 -4.49354,17.71655 l 4.49354,-17.71655 z" />
+</svg>
+<!-- This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. -->
+<!-- http://creativecommons.org/licenses/by-sa/4.0/ -->

package/assets/bg-synthsunset-c-grid-size.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="em4uO9hb2pv1" viewBox="86.2 82.558 400 450" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="350px" height="400" xmlns="http://www.w3.org/2000/svg">
+  <style>
+#em4uO9hb2pv4_to {animation: em4uO9hb2pv4_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv4_to__to { 0% {transform: translate(263.949556px,388px)} 100% {transform: translate(263.949556px,395.410979px)}} #em4uO9hb2pv5_to {animation: em4uO9hb2pv5_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv5_to__to { 0% {transform: translate(263.949556px,437.451142px)} 100% {transform: translate(263.949556px,477.856037px)}} #em4uO9hb2pv6_to {animation: em4uO9hb2pv6_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv6_to__to { 0% {transform: translate(263.949556px,477.451141px)} 100% {transform: translate(263.949556px,507px)}} #em4uO9hb2pv7_to {animation: em4uO9hb2pv7_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv7_to__to { 0% {transform: translate(257.595104px,408px)} 100% {transform: translate(257.595104px,437.856038px)}} #em4uO9hb2pv8_to {animation: em4uO9hb2pv8_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv8_to__to { 0% {transform: translate(258px,395.410979px)} 100% {transform: translate(258px,408px)}}
+</style>
+  <defs>
+    <linearGradient id="em4uO9hb2pv2-fill" x1="257.848986" y1="84.30193" x2="256.478025" y2="378.040783" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1, 0, 0, 1, 32.317979, 15.69849)">
+      <stop id="em4uO9hb2pv2-fill-0" offset="0" stop-color="#e72696"/>
+      <stop id="em4uO9hb2pv2-fill-1" offset="1" stop-color="#facf31"/>
+    </linearGradient>
+  </defs>
+  <path d="M 449.76 259.593 C 449.76 260.889 449.745 262.181 449.714 263.47 L 130.62 263.47 C 130.589 262.181 130.574 260.889 130.574 259.593 C 130.574 257.386 130.619 255.189 130.708 253.003 L 449.626 253.003 C 449.715 255.189 449.76 257.386 449.76 259.593 Z M 434.441 327.907 L 145.893 327.907 C 143.917 323.74 142.115 319.473 140.498 315.117 L 439.836 315.117 C 438.219 319.473 436.417 323.74 434.441 327.907 Z M 133.453 289.922 L 446.881 289.922 C 446.151 293.719 445.286 297.468 444.291 301.164 L 136.043 301.164 C 135.048 297.468 134.183 293.719 133.453 289.922 Z M 131.064 272.19 L 449.27 272.19 C 449.095 274.432 448.873 276.661 448.607 278.876 L 131.727 278.876 C 131.461 276.661 131.239 274.432 131.064 272.19 Z M 290.167 100 C 373.937 100 442.632 164.541 449.239 246.609 L 131.095 246.609 C 137.702 164.541 206.397 100 290.167 100 Z M 414.785 359.303 L 165.549 359.303 C 161.689 354.485 158.102 349.438 154.813 344.186 L 425.521 344.186 C 422.232 349.438 418.645 354.485 414.785 359.303 Z M 375.047 394.767 L 205.287 394.767 C 197.384 389.794 189.949 384.148 183.06 377.908 L 397.274 377.908 C 390.385 384.148 382.95 389.794 375.047 394.767 Z" fill="url(#em4uO9hb2pv2-fill)"/>
+  <line x1="86.2" y1="414.95" x2="486.2" y2="414.039" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="309.179" y1="473.781" x2="430.178" y2="473.506" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.173648, 0.984808, -0.984808, 0.173648, 771.932387, 27.334005)">
+    <title>vert line 7</title>
+  </line>
+  <line x1="151.183" y1="475.044" x2="269.858" y2="474.604" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.173648, 0.984808, -0.984808, -0.173648, 714.68734, 349.954016)">
+    <title>vert line 3</title>
+  </line>
+  <line x1="270.444" y1="473.493" x2="388.993" y2="473.225" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.087156, 0.996195, -0.996195, 0.087156, 772.539295, 103.639124)">
+    <title>vert line 6</title>
+  </line>
+  <line x1="109.269" y1="473.663" x2="231.239" y2="473.385" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.258819, 0.965926, -0.965926, -0.258819, 671.708034, 431.628247)">
+    <title>vert line 2</title>
+  </line>
+  <line x1="65.708" y1="473.725" x2="192.541" y2="473.436" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.34202, 0.939693, -0.939693, -0.34202, 618.307795, 514.217141)">
+    <title>vert line 1</title>
+  </line>
+  <line x1="230.594" y1="473.242" x2="349.497" y2="472.971" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0, 1, -1, 0, 763.152008, 183.061005)">
+    <title>vert line 5</title>
+  </line>
+  <line x1="344.963" y1="473.597" x2="468.706" y2="473.315" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.258819, 0.965926, -0.965926, 0.258819, 758.861416, -42.055348)">
+    <title>vert line 8</title>
+  </line>
+  <line x1="381.132" y1="473.023" x2="507.578" y2="473.402" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.34202, 0.939693, -0.939693, 0.34202, 737.051091, -106.192735)">
+    <title>vert line 9</title>
+  </line>
+  <line x1="191.046" y1="473.586" x2="309.687" y2="473.316" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.087156, 0.996195, -0.996195, -0.087156, 743.836818, 265.301309)">
+    <title>vert line 4</title>
+  </line>
+  <path d="" fill="none" stroke="#3f5787" stroke-width="0.8"/>
+  <line x1="86.2" y1="424.911" x2="486.2" y2="424" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="86.2" y1="440.911" x2="486.2" y2="440" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="86.2" y1="464.91" x2="486.2" y2="464" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="86.2" y1="498.552" x2="486.2" y2="497.64" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="422.842" y1="456.21" x2="516.415" y2="455.998" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.422618, 0.906308, -0.906308, 0.422618, 684.525663, -162.281795)"/>
+  <line x1="60.198" y1="450.808" x2="141.309" y2="450.623" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.422618, 0.906308, -0.906308, -0.422618, 551.820776, 549.882271)"/>
+  <line x1="83.53" y1="533.614" x2="489.497" y2="532.688" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+</svg>

package/assets/bg-synthsunset-c-grid.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg id="em4uO9hb2pv1" viewBox="86.2 82.558 400 450" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="350px" height="400" xmlns="http://www.w3.org/2000/svg">
+  <style>
+#em4uO9hb2pv4_to {animation: em4uO9hb2pv4_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv4_to__to { 0% {transform: translate(263.949556px,388px)} 100% {transform: translate(263.949556px,395.410979px)}} #em4uO9hb2pv5_to {animation: em4uO9hb2pv5_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv5_to__to { 0% {transform: translate(263.949556px,437.451142px)} 100% {transform: translate(263.949556px,477.856037px)}} #em4uO9hb2pv6_to {animation: em4uO9hb2pv6_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv6_to__to { 0% {transform: translate(263.949556px,477.451141px)} 100% {transform: translate(263.949556px,507px)}} #em4uO9hb2pv7_to {animation: em4uO9hb2pv7_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv7_to__to { 0% {transform: translate(257.595104px,408px)} 100% {transform: translate(257.595104px,437.856038px)}} #em4uO9hb2pv8_to {animation: em4uO9hb2pv8_to__to 1000ms linear infinite normal forwards}@keyframes em4uO9hb2pv8_to__to { 0% {transform: translate(258px,395.410979px)} 100% {transform: translate(258px,408px)}}
+</style>
+  <defs>
+    <linearGradient id="em4uO9hb2pv2-fill" x1="257.848986" y1="84.30193" x2="256.478025" y2="378.040783" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1, 0, 0, 1, 28.351456, -1.743511)">
+      <stop id="em4uO9hb2pv2-fill-0" offset="0" stop-color="#e72696"/>
+      <stop id="em4uO9hb2pv2-fill-1" offset="1" stop-color="#facf31"/>
+    </linearGradient>
+  </defs>
+  <path d="M 445.793 242.151 C 445.793 243.447 445.778 244.739 445.747 246.028 L 126.653 246.028 C 126.622 244.739 126.607 243.447 126.607 242.151 C 126.607 239.944 126.652 237.747 126.741 235.561 L 445.659 235.561 C 445.748 237.747 445.793 239.944 445.793 242.151 Z M 430.474 310.465 L 141.926 310.465 C 139.95 306.298 138.148 302.031 136.531 297.675 L 435.869 297.675 C 434.252 302.031 432.45 306.298 430.474 310.465 Z M 129.486 272.48 L 442.914 272.48 C 442.184 276.277 441.319 280.026 440.324 283.722 L 132.076 283.722 C 131.081 280.026 130.216 276.277 129.486 272.48 Z M 127.097 254.748 L 445.303 254.748 C 445.128 256.99 444.906 259.219 444.64 261.434 L 127.76 261.434 C 127.494 259.219 127.272 256.99 127.097 254.748 Z M 286.2 82.558 C 369.97 82.558 438.665 147.099 445.272 229.167 L 127.128 229.167 C 133.735 147.099 202.43 82.558 286.2 82.558 Z M 410.818 341.861 L 161.582 341.861 C 157.722 337.043 154.135 331.996 150.846 326.744 L 421.554 326.744 C 418.265 331.996 414.678 337.043 410.818 341.861 Z M 371.08 377.325 L 201.32 377.325 C 193.417 372.352 185.982 366.706 179.093 360.466 L 393.307 360.466 C 386.418 366.706 378.983 372.352 371.08 377.325 Z" fill="url(#em4uO9hb2pv2-fill)"/>
+  <line x1="86.2" y1="414.95" x2="486.2" y2="414.039" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="309.179" y1="473.781" x2="430.178" y2="473.506" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.173648, 0.984808, -0.984808, 0.173648, 771.932387, 27.334005)">
+    <title>vert line 7</title>
+  </line>
+  <line x1="151.183" y1="475.044" x2="269.858" y2="474.604" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.173648, 0.984808, -0.984808, -0.173648, 714.68734, 349.954016)">
+    <title>vert line 3</title>
+  </line>
+  <line x1="270.444" y1="473.493" x2="388.993" y2="473.225" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.087156, 0.996195, -0.996195, 0.087156, 772.539295, 103.639124)">
+    <title>vert line 6</title>
+  </line>
+  <line x1="109.269" y1="473.663" x2="231.239" y2="473.385" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.258819, 0.965926, -0.965926, -0.258819, 671.708034, 431.628247)">
+    <title>vert line 2</title>
+  </line>
+  <line x1="65.708" y1="473.725" x2="192.541" y2="473.436" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.34202, 0.939693, -0.939693, -0.34202, 618.307795, 514.217141)">
+    <title>vert line 1</title>
+  </line>
+  <line x1="230.594" y1="473.242" x2="349.497" y2="472.971" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0, 1, -1, 0, 763.152008, 183.061005)">
+    <title>vert line 5</title>
+  </line>
+  <line x1="344.963" y1="473.597" x2="468.706" y2="473.315" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.258819, 0.965926, -0.965926, 0.258819, 758.861416, -42.055348)">
+    <title>vert line 8</title>
+  </line>
+  <line x1="381.132" y1="473.023" x2="507.578" y2="473.402" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.34202, 0.939693, -0.939693, 0.34202, 737.051091, -106.192735)">
+    <title>vert line 9</title>
+  </line>
+  <line x1="191.046" y1="473.586" x2="309.687" y2="473.316" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.087156, 0.996195, -0.996195, -0.087156, 743.836818, 265.301309)">
+    <title>vert line 4</title>
+  </line>
+  <path d="" fill="none" stroke="#3f5787" stroke-width="0.8"/>
+  <line x1="86.2" y1="424.911" x2="486.2" y2="424" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="86.2" y1="440.911" x2="486.2" y2="440" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="86.2" y1="464.91" x2="486.2" y2="464" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="86.2" y1="498.552" x2="486.2" y2="497.64" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+  <line x1="422.842" y1="456.21" x2="516.415" y2="455.998" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(0.422618, 0.906308, -0.906308, 0.422618, 684.525663, -162.281795)"/>
+  <line x1="60.198" y1="450.808" x2="141.309" y2="450.623" fill="none" stroke="#5edba5" stroke-width="3" style="" transform="matrix(-0.422618, 0.906308, -0.906308, -0.422618, 551.820776, 549.882271)"/>
+  <line x1="83.53" y1="533.614" x2="489.497" y2="532.688" fill="none" stroke="#5edba5" stroke-width="3" style=""/>
+</svg>

package/assets/bg-wizard.svg

@@ -0,0 +1,3 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="meteor" class="svg-inline--fa fa-meteor fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity=".33"><path fill="currentColor" d="M511.328,20.8027c-11.60759,38.70264-34.30724,111.70173-61.30311,187.70077,6.99893,2.09372,13.4042,4,18.60653,5.59368a16.06158,16.06158,0,0,1,9.49854,22.906c-22.106,42.29635-82.69047,152.795-142.47819,214.40356-.99984,1.09373-1.99969,2.5-2.99954,3.49995A194.83046,194.83046,0,1,1,57.085,179.41009c.99985-1,2.40588-2,3.49947-3,61.59994-59.90549,171.97367-120.40473,214.37343-142.4982a16.058,16.058,0,0,1,22.90274,9.49988c1.59351,5.09368,3.49947,11.5936,5.5929,18.59351C379.34818,35.00565,452.43074,12.30281,491.12794.70921A16.18325,16.18325,0,0,1,511.328,20.8027ZM319.951,320.00207A127.98041,127.98041,0,1,0,191.97061,448.00046,127.97573,127.97573,0,0,0,319.951,320.00207Zm-127.98041-31.9996a31.9951,31.9951,0,1,1-31.9951-31.9996A31.959,31.959,0,0,1,191.97061,288.00247Zm31.9951,79.999a15.99755,15.99755,0,1,1-15.99755-15.9998A16.04975,16.04975,0,0,1,223.96571,368.00147Z"></path></svg>
+<!-- This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. -->
+<!-- http://creativecommons.org/licenses/by-sa/4.0/ -->

package/package.json

@@ -26,6 +26,9 @@
     "./*": {
       "import": "./dist/common/*.js"
     },
+    "./assets/*": {
+      "import": "./assets/*"
+    },
     "./components": {
       "import": "./dist/components/index.js"
     },
@@ -34,12 +37,10 @@
     },
     "./styles/*": {
       "default": "./styles/*"
-    },
-    "./styles/components/*": {
-      "default": "./styles/components/*"
     }
   },
   "files": [
+    "assets",
     "dist",
     "styles"
   ],
@@ -68,5 +69,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "4.1.4"
+  "version": "4.2.1"
 }

package/styles/all-themes.scss

@@ -0,0 +1,22 @@
+@use "sass:meta";
+
+// Loads in all themes
+@include meta.load-css("./themes/abductor.scss");
+@include meta.load-css("./themes/admin.scss");
+@include meta.load-css("./themes/cardtable.scss");
+@include meta.load-css("./themes/hackerman.scss");
+@include meta.load-css("./themes/malfunction.scss");
+@include meta.load-css("./themes/neutral.scss");
+@include meta.load-css("./themes/ntos.scss");
+@include meta.load-css("./themes/ntOS95.scss");
+@include meta.load-css("./themes/ntos_cat.scss");
+@include meta.load-css("./themes/ntos_darkmode.scss");
+@include meta.load-css("./themes/ntos_lightmode.scss");
+@include meta.load-css("./themes/ntos_spooky.scss");
+@include meta.load-css("./themes/ntos_synth.scss");
+@include meta.load-css("./themes/ntos_terminal.scss");
+@include meta.load-css("./themes/paper.scss");
+@include meta.load-css("./themes/retro.scss");
+@include meta.load-css("./themes/spookyconsole.scss");
+@include meta.load-css("./themes/syndicate.scss");
+@include meta.load-css("./themes/wizard.scss");

package/styles/themes/abductor.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-abductor:root {
+  // Base
+  --color-base: hsl(227, 29%, 23%);
+  --color-primary: hsl(340, 65%, 45%);
+  --color-secondary: hsl(340, 65%, 37.5%);
+  --color-border-primary: hsla(227.5, 30%, 40%, 0.75);
+  --base-gradient-spread: 6;
+
+  // Components
+  --button-background-selected: hsl(227, 37%, 45%);
+  --button-background-caution: hsl(30, 88%, 39%);
+  --button-background-danger: hsl(62, 100%, 30%);
+  --notice-box-background: hsl(340, 67%, 41%);
+  --notice-box-color: var(--color-text-fixed-white);
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --tooltip-background-lightness: 25;
+
+  .Layout__content {
+    background-image: none;
+  }
+}

package/styles/themes/admin.scss

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-admin:root {
+  // Base
+  --color-base: hsl(205, 17%, 20%);
+  --primary-hue: 200;
+  --secondary-saturation: 0;
+  --secondary-lightness-adjustment: 1.75;
+  --base-gradient-spread: 6;
+  --candystripe-odd: hsla(200, 70%, 15%, 0.25);
+  --candystripe-even: hsla(210, 70%, 45%, 0.25);
+
+  .Layout__content {
+    background-image: url("@assets/bg-admin.svg");
+  }
+}

package/styles/themes/cardtable.scss

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-cardtable:root {
+  // Base
+  --color-base: hsl(145, 73%, 25%);
+  --color-primary: hsl(from var(--color-base) h s calc(l + 5));
+  --color-border-primary: hsla(0, 0%, 100%, 0.75);
+  --secondary-hue: 17.5;
+  --secondary-lightness-adjustment: -10;
+  --base-gradient-spread: 0;
+
+  // Components
+  --button-background-selected: hsl(0, 90.3%, 32.35%);
+  --button-background-caution: hsl(29.5, 90.95%, 39.02%);
+  --button-background-danger: hsl(61.15, 100%, 30.78%);
+  --button-border-radius: 0;
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --tab-background-selected: var(--color-base);
+
+  .Button {
+    border: var(--border-thickness-small) solid hsl(0, 0%, 100%);
+  }
+}

package/styles/themes/hackerman.scss

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-hackerman:root {
+  // Base
+  --color-base: hsl(120, 20%, 8.8%);
+  --color-primary: hsl(120, 100%, 50%);
+  --color-secondary: hsl(120, 28%, 18.5%);
+  --base-gradient-spread: 0;
+  --candystripe-odd: hsla(120, 100%, 20%, 0.5);
+
+  // Components
+  --button-background-selected: var(--color-primary);
+  --tab-background-selected: hsla(120, 100%, 50%, 0.25);
+  --tab-color: hsl(0, 0%, 90%);
+  --tab-color-selected: var(--color-primary);
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .Button {
+    font-family: var(--font-family-mono);
+    border-width: var(--border-thickness-small);
+    border-style: outset;
+    border-color: hsl(120, 100%, 33.33%);
+    outline: var(--border-thickness-tiny) solid rgb(0, 122, 0);
+
+    &--color--default {
+      color: var(--color-text-fixed-black);
+    }
+  }
+}

package/styles/themes/malfunction.scss

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-malfunction:root {
+  // Base
+  --color-base: hsl(205, 42.5%, 20%);
+  --color-primary: hsl(0, 100%, 30%);
+  --color-border-primary: hsl(from var(--color-primary) h s l / 0.75);
+  --secondary-saturation: 55;
+  --secondary-lightness-adjustment: 3;
+  --base-gradient-spread: 6;
+
+  // Components
+  --button-background-selected: hsl(205, 60%, 30%);
+  --button-background-caution: hsl(30, 70%, 40%);
+  --button-background-danger: hsl(62.5, 100%, 30%);
+  --notice-box-background: hsl(205, 55%, 22.5%);
+  --notice-box-color: var(--color-text-fixed-white);
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --tooltip-background-lightness: 25;
+
+  .Layout__content {
+    background-image: none;
+  }
+}

package/styles/themes/neutral.scss

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-neutral:root {
+  // Base
+  --color-base: hsl(42, 100%, 30%);
+  --color-primary: hsl(42, 100%, 40%);
+  --color-action: hsl(42, 75%, 60%);
+  --base-gradient-spread: 6;
+
+  // Components
+  --button-color-transparent: var(--color-action);
+  --tooltip-background-lightness: 33;
+
+  .Layout__content {
+    background-image: url("@assets/bg-neutral.svg");
+  }
+}

package/styles/themes/ntOS95.scss

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-ntOS95 {
+  &:root {
+    --95-outline: hsl(0, 0%, 85%);
+    --95-background: hsl(0, 0%, 75%);
+
+    // Base
+    --color-base: hsl(180, 100%, 25.3%);
+    --color-section: var(--95-background);
+    --color-primary: hsl(240, 100%, 25.1%);
+    --color-secondary: var(--color-primary);
+    --color-label: var(--color-black);
+    --color-scrollbar-thumb: hsl(from var(--color-section) h s calc(l - 25));
+    --color-border-primary: hsl(from var(--color-black) h s l / 0.5);
+    --color-text: var(--color-black);
+    --base-gradient-spread: 0;
+    --border-radius-unit: 0;
+    --transition-time-unit: 0;
+    --font-family: "MS Sans Serif";
+
+    // Components
+    --button-background-default: hsl(52.3, 40.3%, 84.9%);
+    --button-background-disabled: var(--95-background);
+    --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+    --tooltip-background: var(--95-background);
+    --input-background: var(--color-white);
+    --input-color: var(--color-black);
+    --tab-indicator-size: 0;
+    --tab-color: var(--color-black);
+    --tab-color-selected: var(--color-black);
+    --tab-background-hover: var(--95-background);
+    --tab-background-selected: var(--95-background);
+    --tab-border-radius: 0.33em;
+  }
+
+  body {
+    overflow: auto;
+  }
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .NtosWindow__header {
+    background-color: var(--color-gray);
+  }
+
+  .Button {
+    background-color: var(--95-background);
+    color: var(--color-black);
+
+    &:hover {
+      background-color: var(--color-secondary);
+      transition: background-color 0.1s;
+    }
+
+    &:active,
+    &.Button--selected {
+      outline-style: inset;
+    }
+
+    &--color--transparent:hover {
+      color: var(--color-white);
+    }
+  }
+
+  .ProgressBar,
+  .TitleBar__close,
+  .TitleBar__title {
+    color: var(--color-white);
+  }
+
+  .Input,
+  .TextArea {
+    outline: var(--border-thickness-small) inset var(--95-outline);
+  }
+
+  .Box,
+  .Button,
+  .Section,
+  .Tooltip {
+    outline: var(--border-thickness-small) outset var(--95-outline);
+  }
+
+  .Tab {
+    border: var(--border-thickness-small) outset var(--95-outline);
+
+    &--selected .Tab__text {
+      outline: var(--border-thickness-tiny) dotted;
+    }
+  }
+
+  .Tabs--vertical {
+    border-right: var(--border-thickness-small) solid var(--95-outline);
+
+    .Tab {
+      border-right: 0;
+
+      &--selected {
+        border-style: inset;
+      }
+    }
+  }
+
+  .Tabs--horizontal {
+    border-bottom: var(--border-thickness-small) solid var(--95-outline);
+
+    .Tab {
+      border-bottom: 0;
+
+      &:not(.Tab--selected) {
+        min-height: 2em;
+        height: 2em;
+        align-self: end;
+      }
+    }
+  }
+
+  .Table__cell {
+    display: table-cell;
+    padding: 0 var(--space-s);
+    background-color: var(--95-background);
+  }
+}

package/styles/themes/ntos.scss

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-ntos:root {
+  --nanotrasen-color: hsl(212.5, 30%, 35%);
+
+  // Base
+  --color-base: hsl(from var(--nanotrasen-color) h s calc(l - 17.5));
+  --color-primary: var(--nanotrasen-color);
+  --secondary-lightness-adjustment: 6.33;
+
+  // Components
+  --button-color-transparent: hsl(from var(--color-primary) h s 75 / 0.75);
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+  --tooltip-background-lightness: 25;
+}

package/styles/themes/ntos_cat.scss

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-ntos_cat {
+  &:root {
+    --color-kitty: hsl(300, 100%, 85%);
+    --color-cuttie: hsl(5, 100%, 75%);
+
+    // Base
+    --color-base: hsl(35, 100%, 50%);
+    --color-primary: var(--color-kitty);
+    --color-secondary: var(--color-cuttie);
+    --color-section: hsl(from var(--color-base) h s calc(l - 42.5) / 0.33);
+    --color-text: hsl(from var(--color-kitty) h s calc(l + 10));
+    --color-text-translucent: hsl(from var(--color-kitty) h s l / 0.75);
+    --color-label: hsl(
+      from var(--color-kitty) calc(h + 40) calc(s - 50) calc(l - 20)
+    );
+    --color-good: var(--color-kitty);
+    --color-action: var(--color-kitty);
+    --base-gradient-spread: 12;
+
+    // Components
+    --button-background-default: hsl(from var(--color-kitty) h s 66);
+    --button-background-selected: hsl(227.5, 37.5%, 45%);
+    --button-background-caution: hsl(30, 87.5%, 340%);
+    --button-background-disabled: hsl(0, 0%, 100%);
+    --input-background: hsl(0, 0%, 100%);
+    --input-color: hsl(from var(--color-kitty) h s calc(l - 10));
+    --tooltip-background-lightness: 50;
+
+    .Layout__content {
+      background-image: url("@assets/bg-cat.svg");
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
+  }
+
+  .Section {
+    outline: var(--border-thickness-small) solid var(--color-cuttie);
+  }
+
+  :where(.Button) {
+    background-color: hsl(0, 0%, 100%);
+    color: var(--color-cuttie);
+  }
+
+  .Button--disabled {
+    color: var(--color-cuttie) !important;
+  }
+
+  .NtosWindow__header {
+    background-color: hsl(248, 17%, 27%);
+  }
+}

package/styles/themes/ntos_darkmode.scss

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-ntos_darkmode:root {
+  --color-nanotrasen: hsl(0, 0%, 25%);
+
+  // Base
+  --color-base: hsl(from var(--color-nanotrasen) h s calc(l - 15));
+  --secondary-lightness-adjustment: 3;
+  --color-primary: var(--color-nanotrasen);
+  --border-primary-saturation: 0;
+
+  // Components
+  --progress-bar-background: hsla(0, 0%, 0%, 0.5);
+}

package/styles/themes/ntos_lightmode.scss

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+.theme-ntos_lightmode:root {
+  --color-nanotrasen: var(--color-white);
+
+  // Base
+  --primary-lightness: 100%;
+  --color-base: var(--color-nanotrasen);
+  --secondary-lightness-adjustment: -50;
+  --color-section: hsla(0, 0%, 50%, 0.33);
+  --color-text: var(--color-black);
+  --color-label: hsl(
+    var(--primary-hue) calc(var(--primary-saturation) - 20%) 40%
+  );
+  --border-primary-lightness: 35;
+  --tooltip-background-lightness: 90;
+
+  // Components
+  --button-color: var(--color-black);
+  --input-background-lightness: 90;
+  --tab-color-selected: hsl(from var(--color-primary) h s 10);
+}

package/styles/themes/ntos_spooky.scss

@@ -0,0 +1,22 @@
+.theme-ntos_spooky:root {
+  // Base
+  --color-base: hsl(0, 100%, 12.5%);
+  --color-primary: hsl(345, 95%, 30%);
+  --color-good: hsl(0, 82%, 52%);
+  --color-bad: hsl(340, 91%, 32%);
+  --base-gradient-spread: 12;
+  --secondary-lightness-adjustment: 9;
+
+  // Components
+  --button-background-selected: var(--color-good);
+  --button-background-caution: hsl(240, 80%, 35%);
+  --button-background-danger: hsl(282, 61%, 30%);
+  --dimmer-background-opacity: 0.45;
+  --notice-box-background: hsl(0, 90%, 23%);
+  --notice-box-color: var(--color-fixed-white);
+  --progress-bar-background: hsla(0, 97%, 7%, 0.5);
+
+  .Layout__content {
+    background-image: url("@assets/bg-spookycomp-compressed.svg");
+  }
+}