tgui-core 1.0.0

package/styles/themes/paper.scss

@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2020 Paul Bruner
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #ffffff,
+  $bg-lightness: 25%,
+  $fg-lightness: -10%,
+  // Commenting out color maps will adjust all colors based on the lightness
+  // settings above, but will add extra 10KB to the theme.
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-fg: #000000,
+  $color-bg: #dfdfdf,
+  $color-bg-grad-spread: 0%
+);
+
+$font-size: 24px;
+
+// A fat warning to anyone who wants to use this: this only half works.
+// It was made almost purely for the nuke ui, and requires a good amount of manual hacks to get it working as intended.
+.theme-paper {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css('../components/Tabs.scss');
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.1))
+  );
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #e8e4c9,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00,
+      'color-transparent-text': rgba(0, 0, 0, 0.5)
+    )
+  );
+
+  // Layouts
+  @include meta.load-css(
+    '../layouts/Layout.scss',
+    $with: ('scrollbar-color-multiplier': -1)
+  );
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: (
+      'text-color': rgba(0, 0, 0, 0.75),
+      'background-color': base.$color-bg,
+      'shadow-color-core': rgba(0, 0, 0, 0.25)
+    )
+  );
+
+  .PaperInput {
+    position: relative;
+    display: inline-block;
+    width: 120px;
+    border: none;
+    background: transparent;
+    border-bottom: 1px solid #000;
+    outline: none;
+    background-color: rgba(255, 255, 62, 0.8);
+    padding: 0 4px;
+    margin-right: 2px;
+    line-height: 17px;
+    overflow: visible;
+  }
+
+  .PaperInput__baseline {
+    display: inline-block;
+    color: transparent;
+  }
+
+  .PaperInput__input {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: 0;
+    outline: 0;
+    width: 100%;
+    font-size: 12px;
+    line-height: 17px;
+    height: 17px;
+    margin: 0;
+    padding: 0 6px;
+    font-family: Verdana, sans-serif;
+    background-color: transparent;
+    color: #fff;
+    color: inherit;
+
+    &:-ms-input-placeholder {
+      font-style: italic;
+      color: #777;
+      color: rgba(255, 255, 255, 0.45);
+    }
+  }
+
+  .Layout__content {
+    background-image: none;
+  }
+
+  .Window {
+    background-image: none;
+    color: base.$color-fg;
+  }
+
+  .paper-text {
+    input:disabled {
+      position: relative;
+      display: inline-block;
+      border: none;
+      background: transparent;
+      border-bottom: 1px solid #000;
+      outline: none;
+      background-color: rgba(255, 255, 62, 0.8);
+      padding: 0 4px;
+      margin-right: 2px;
+      line-height: 17px;
+      overflow: visible;
+    }
+
+    input {
+      position: relative;
+      display: inline-block;
+      border: none;
+      background: transparent;
+      border-bottom: 1px solid #000;
+      outline: none;
+      background-color: rgba(255, 255, 62, 0.8);
+      padding: 0 4px;
+      margin-right: 2px;
+      line-height: 17px;
+      overflow: visible;
+    }
+  }
+
+  .Section__title {
+    border-bottom: none;
+  }
+
+  .paper-field {
+    position: relative;
+    display: inline-block;
+
+    border: none;
+    background: transparent;
+    border-bottom: 1px solid #000;
+    outline: none;
+    background-color: rgba(255, 255, 62, 0.8);
+    padding: 0 4px;
+    margin-right: 2px;
+    line-height: 17px;
+    overflow: visible;
+
+    input:disabled {
+      position: relative;
+      display: inline-block;
+
+      border: none;
+      background: transparent;
+      border-bottom: 1px solid #000;
+      outline: none;
+      background-color: rgba(255, 255, 62, 0.8);
+      padding: 0 4px;
+      margin-right: 2px;
+      line-height: 17px;
+      overflow: visible;
+    }
+  }
+}

package/styles/themes/retro.scss

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #000000,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #e8e4c9,
+  $color-bg-grad-spread: 0%,
+  $border-radius: 0
+);
+
+// A fat warning to anyone who wants to use this: this only half works.
+// It was made almost purely for the nuke ui, and requires a good amount of manual hacks to get it working as intended.
+.theme-retro {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #e8e4c9,
+      'color-disabled': #505046,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #585337)
+  );
+
+  .Button {
+    font-family: monospace;
+    color: #161613;
+    border: base.em(2px) outset #e8e4c9;
+    outline: base.em(1px) solid #161613;
+  }
+
+  .Button--disabled {
+    color: #c5c5c2;
+    font-family: monospace;
+    &:hover {
+      color: #ffffff;
+    }
+    &:focus {
+      color: #ffffff;
+    }
+  }
+
+  .Layout__content {
+    background-image: none;
+  }
+}

package/styles/themes/spookyconsole.scss

@@ -0,0 +1,73 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../colors.scss' with (
+  $primary: #3f021a,
+  $good: #010005,
+  $bad: #970934,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #240101,
+  $color-bg-grad-spread: 12%
+);
+
+$updated-bg-map: colors.$bg-map !default;
+
+$updated-bg-map: map.set($updated-bg-map, 'good', colors.$good);
+$updated-bg-map: map.set($updated-bg-map, 'bad', colors.$bad);
+
+.theme-spookyconsole {
+  // Atomic classes
+  @include meta.load-css(
+    '../atomic/color.scss',
+    $with: ('bg-map': $updated-bg-map)
+  );
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #7e0322,
+      'color-disabled': #363636,
+      'color-selected': #610a0a,
+      'color-caution': #1416a3,
+      'color-danger': #5c1e80,
+      'bg-map': $updated-bg-map
+    )
+  );
+  @include meta.load-css(
+    '../components/Dimmer.scss',
+    $with: ('background-dimness': 0.45)
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #473a37)
+  );
+  @include meta.load-css('../components/Modal.scss');
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #740707)
+  );
+  @include meta.load-css('../components/NumberInput.scss');
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css('../components/Table.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #000000)
+  );
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #6b0808)
+  );
+
+  .Layout__content {
+    background-image: url('../../assets/bg-spookycomp-compressed.svg');
+  }
+}

package/styles/themes/syndicate.scss

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #397439,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #550202,
+  $color-bg-grad-spread: 6%
+);
+
+.theme-syndicate {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #363636,
+      'color-selected': #9d0808,
+      'color-caution': #be6209,
+      'color-danger': #9a9d00
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #87ce87)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #910101)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #87ce87)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #4a0202)
+  );
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #910101)
+  );
+
+  .Layout__content {
+    background-image: url('../../assets/bg-syndicate.svg');
+  }
+}

package/styles/themes/wizard.scss

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #1596b6,
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: #213e4e,
+  $color-bg-grad-spread: 6%,
+  $border-radius: 2px
+);
+
+.theme-wizard {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': colors.$primary,
+      'color-disabled': #02426d,
+      'color-selected': #465899,
+      'color-caution': #be6209,
+      'color-danger': #b30707
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/NoticeBox.scss',
+    $with: ('background-color': #a82d55)
+  );
+  @include meta.load-css(
+    '../components/NumberInput.scss',
+    $with: ('border-color': #404b6e)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.5))
+  );
+  @include meta.load-css('../components/Section.scss');
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': #2da848)
+  );
+
+  // Layouts
+  @include meta.load-css('../layouts/Layout.scss');
+  @include meta.load-css('../layouts/Window.scss');
+  @include meta.load-css(
+    '../layouts/TitleBar.scss',
+    $with: ('background-color': #1b9e26)
+  );
+
+  .Layout__content {
+    background-image: url('../../assets/bg-wizard.svg');
+  }
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": false,
+    "jsx": "preserve",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext",
+      "ScriptHost"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "strictNullChecks": true,
+    "target": "ES5"
+  },
+  "include": [
+    ".eslintrc.cjs",
+    "global.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.cjs",
+    "**/*.js",
+    "**/*.jsx"
+  ],
+}