tgui-core 1.0.0

package/styles/themes/ntos.scss

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+$nanotrasen: #384e68;
+
+@use '../colors.scss' with (
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: color.scale($nanotrasen, $lightness: -45%)
+);
+
+.theme-ntos {
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': $nanotrasen,
+      'color-transparent-text': rgba(227, 240, 255, 0.75)
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': $nanotrasen,
+      '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': color.scale($nanotrasen, $lightness: -25%))
+  );
+}

package/styles/themes/ntos_cat.scss

@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+//@use 'sass:map';
+
+//palette
+$cyan: #5edba5;
+$pink: #ed12f5;
+$orange: #ff9900;
+$purple: #463191;
+
+$light-gray: #c3c3c3;
+$dark-gray: #858585;
+$scrollbar-color-multiplier: 0.5;
+
+@use '../colors.scss' with (
+  $primary: black,
+  $label: rgb(255, 132, 153),
+  $good: pink,
+
+  $bad: red,
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+
+@use '../base.scss' with (
+    $color-bg: orange,
+    $color-bg-grad-spread: 12%,
+    //$border-radius: 0,
+  );
+
+.theme-ntos_cat {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss', $with: ());
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': pink,
+      'color-transparent-text': rgba(227, 240, 255, 0.75),
+      'color-disabled': #363636,
+      'color-selected': #465899,
+      'color-caution': #be6209
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('color-default-fill': rgb(255, 132, 153, 0.75))
+  );
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(124, 62, 34, 0.75))
+  );
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': rgba(255, 153, 0, 0.75))
+  );
+
+  // 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': rgb(255, 132, 153, 0.75))
+  );
+
+  .Section {
+    color: black;
+    outline: base.em(2px) inset rgb(255, 132, 153);
+  }
+  .Button {
+    color: rgb(255, 132, 153);
+    background-color: rgb(255, 255, 255);
+  }
+
+  .ProgressBar {
+    color: black;
+  }
+
+  .Layout__content {
+    background-image: url('../../assets/bg-cat.svg');
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .Layout,
+  .Layout * {
+    // Fancy scrollbar
+    scrollbar-base-color: color.scale(
+      #454255,
+      $lightness: -25% * $scrollbar-color-multiplier
+    );
+    scrollbar-face-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier
+    );
+
+    scrollbar-3dlight-color: color.scale(
+      orange,
+      $lightness: 0% * $scrollbar-color-multiplier
+    );
+    scrollbar-highlight-color: color.scale(
+      orange,
+      $lightness: 0% * $scrollbar-color-multiplier
+    );
+    scrollbar-track-color: color.scale(
+      #ba753a,
+      $lightness: -25% * $scrollbar-color-multiplier
+    );
+    scrollbar-arrow-color: color.scale(
+      orange,
+      $lightness: 50% * $scrollbar-color-multiplier
+    );
+    scrollbar-shadow-color: color.scale(
+      #454255,
+      $lightness: 10% * $scrollbar-color-multiplier
+    );
+  }
+  .Tab {
+    color: rgb(255, 132, 153);
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .Tab--selected {
+    color: black;
+    background-color: rgb(255, 132, 153);
+  }
+  .Box {
+    outline: base.em(3px) outset #c0c0c0;
+  }
+  .Tooltip {
+    color: black;
+  }
+  .Input {
+    background-color: white;
+    outline: base.em(2px) inset rgb(255, 132, 153);
+  }
+  .NtosWindow__header {
+    background-color: #454255;
+  }
+  .Flex {
+    color: white;
+    background-color: rgba(0, 0, 0, 0);
+  }
+}

package/styles/themes/ntos_darkmode.scss

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+$nanotrasen: #2c2c2c;
+
+@use '../colors.scss' with (
+  $fg-map-keys: (),
+  $bg-map-keys: ()
+);
+@use '../base.scss' with (
+  $color-bg: color.scale($nanotrasen, $lightness: -45%)
+);
+
+.theme-ntos_darkmode {
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': $nanotrasen,
+      'color-transparent-text': rgba(227, 240, 255, 0.75)
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': $nanotrasen,
+      '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': color.scale($nanotrasen, $lightness: -25%))
+  );
+}

package/styles/themes/ntos_lightmode.scss

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+$nanotrasen: #ffffff;
+
+@use '../colors.scss' with (
+  $primary: #000000,
+  $label: #000000
+);
+@use '../base.scss' with (
+  $color-bg: white
+);
+
+.theme-ntos_lightmode {
+  @include meta.load-css('../atomic/color.scss', $with: ());
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: ('color-default': $nanotrasen)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': $nanotrasen,
+      'background-color': rgba(0, 0, 0, 0.5)
+    )
+  );
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(119, 119, 119, 0.4))
+  );
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': white)
+  );
+
+  // 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': gray)
+  );
+  .Button {
+    color: #161613;
+  }
+  .Button:hover {
+    background-color: #777777;
+    transition: 0.1s;
+  }
+
+  .Section {
+    color: black;
+  }
+  .Tab {
+    color: black;
+  }
+  .Tab--selected {
+    color: white;
+    background-color: darkgray;
+  }
+}

package/styles/themes/ntos_spooky.scss

@@ -0,0 +1,69 @@
+@use 'sass:color';
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../colors.scss' with (
+  $primary: #3f021a,
+  $good: #e62626,
+  $bad: #970934
+);
+@use '../base.scss' with (
+  $color-bg: #240101,
+  $color-bg-grad-spread: 12%
+);
+
+.theme-ntos_spooky {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': #7e0322,
+      'color-disabled': #363636,
+      'color-selected': #610a0a,
+      'color-caution': #1416a3,
+      'color-danger': #5c1e80
+    )
+  );
+  @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)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'color-default-fill': rgba(190, 0, 0, 0.75),
+      'background-color': rgba(34, 1, 1, 0.5)
+    )
+  );
+
+  // 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/ntos_synth.scss

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+//@use 'sass:map';
+
+//palette
+$cyan: #5edba5;
+$pink: #ed12f5;
+$orange: #ff9900;
+$purple: #463191;
+
+@use '../colors.scss' with (
+  $primary: $pink,
+  $label: $orange,
+  $good: $cyan,
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+
+@use '../base.scss' with (
+  $color-bg: $purple,
+  $color-bg-grad-spread: 12%
+);
+
+.theme-ntos_synth {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss', $with: ());
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': $cyan,
+      'color-transparent-text': rgba(227, 240, 255, 0.75),
+      'color-disabled': #363636,
+      'color-selected': #465899,
+      'color-caution': #be6209
+    )
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: ('color-default-fill': rgba(237, 18, 245, 0.75))
+  );
+  @include meta.load-css(
+    '../components/Section.scss',
+    $with: ('background-color': rgba(0, 0, 0, 0.3))
+  );
+  @include meta.load-css(
+    '../components/Tooltip.scss',
+    $with: ('background-color': rgba(255, 153, 0, 0.75))
+  );
+
+  // 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': rgba(3, 100, 117, 0.75))
+  );
+
+  .Section {
+    color: $cyan;
+    background-image: linear-gradient(
+      to right,
+      rgba(194, 0, 219, 0.75),
+      rgba(3, 100, 117, 0.75)
+    );
+  }
+  .Button {
+    color: $cyan;
+    background-color: $purple;
+    outline: base.em(2px) outset $pink;
+  }
+  .ProgressBar {
+    color: $orange;
+  }
+
+  .Layout__content {
+    background-image: url('../../assets/bg-synthsunset-c-grid.svg');
+    background-size: 100%;
+    background-position: top;
+    background-repeat: no-repeat;
+  }
+  .Tab {
+    color: $cyan;
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 153, 0, 0.4),
+      rgba(194, 0, 219, 0.75)
+    );
+  }
+  .Tab--selected {
+    color: $pink;
+  }
+}

package/styles/themes/ntos_terminal.scss

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2020 Aleksej Komarov
+ * SPDX-License-Identifier: MIT
+ */
+
+@use 'sass:color';
+@use 'sass:meta';
+
+@use '../colors.scss' with (
+  $primary: #24e87e,
+  $label: #24e87e,
+  $good: rgba(36, 232, 127, 0.5),
+  // $fg-map-keys: (),
+  // $bg-map-keys: (),
+);
+@use '../base.scss' with (
+  $color-bg: #121b12,
+  $color-bg-grad-spread: 0%
+);
+
+.theme-ntos_terminal {
+  // Atomic classes
+  @include meta.load-css('../atomic/color.scss');
+
+  // Components
+  @include meta.load-css(
+    '../components/Button.scss',
+    $with: (
+      'color-default': rgba(0, 0, 0, 0),
+      'color-disabled': #4a6a4a,
+      'color-selected': rgba(36, 232, 127, 0.25)
+    )
+  );
+  @include meta.load-css(
+    '../components/Input.scss',
+    $with: ('border-color': colors.$primary)
+  );
+  @include meta.load-css(
+    '../components/ProgressBar.scss',
+    $with: (
+      'background-color': rgba(0, 0, 0, 0.5),
+      'color-default-fill': rgba(36, 232, 127, 0.5)
+    )
+  );
+  @include meta.load-css('../components/Modal.scss');
+  @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': rgba(0, 97, 0, 0.25))
+  );
+
+  .Layout__content {
+    //background-image: none;
+    background-image: repeating-linear-gradient(
+        0deg,
+        rgba(black, 0.15),
+        rgba(black, 0.15) 1px,
+        transparent 2.5px,
+        transparent 5px
+      ),
+      radial-gradient(rgba(0, 97, 0, 0.75), black 120%);
+    background-size: 100%, 100%;
+    background-position: center, center;
+  }
+
+  .Button {
+    font: Inconsolata;
+    color: #24e87e;
+    text-shadow: 0 0 2px #24e87e;
+  }
+  .Button:hover {
+    background-color: rgba(36, 232, 127, 0.25);
+    transition: 0.1s;
+  }
+  .Button--selected {
+    color: #24e87e;
+  }
+
+  body {
+    //background-color: black;
+    color: white;
+    font: 1.3rem Inconsolata;
+    text-shadow: 0 0 2px #24e87e;
+
+    //font: bold 12px Arial, 'Helvetica Neue', Helvetica, sans-serif;
+  }
+  .Section {
+    color: rgb(36, 232, 126);
+  }
+  .Tab {
+    color: #24e87e;
+  }
+  .Tab--selected {
+    color: #24e87e;
+    border: 2px solid #24e87e;
+    background-color: rgba(36, 232, 127, 0.25);
+  }
+  ::selection {
+    background: #0080ff;
+    text-shadow: none;
+  }
+  .Table {
+    text-shadow: 0 0 2px #24e87e;
+  }
+  .Flex {
+    text-shadow: 0 0 2px #24e87e;
+  }
+}