code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:color';
@use '../base.scss';
@use '../functions.scss' as *;

.Window {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: base.$color-fg;
  background-color: base.$color-bg;
  background-image: linear-gradient(to bottom,
    base.$color-bg-start 0%,
    base.$color-bg-end 100%);
}

.Window__titleBar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  height: base.rem(32px);
}

// Everything after the title bar
.Window__rest {
  position: fixed;
  top: 32px;
  top: base.rem(32px);
  bottom: 0;
  left: 0;
  right: 0;
}

.Window__contentPadding {
  margin: 0.5rem;
  // IE8: Calc not supported
  height: 100%;
  // 0.01 is needed to make the scrollbar not appear
  // due to rem rendering inaccuracies in IE11.
  height: calc(100% - 1.01rem);
}

.Window__contentPadding:after {
  height: 0;
}

.Layout__content--scrollable .Window__contentPadding:after {
  display: block;
  content: '';
  height: 0.5rem;
}

.Window__dimmer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(lighten(base.$color-bg, 30%), 0.25);
  pointer-events: none;
}

.Window__resizeHandle__se {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 20px;
  width: base.rem(20px);
  height: 20px;
  height: base.rem(20px);
  cursor: se-resize;
}

.Window__resizeHandle__s {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  height: base.rem(6px);
  cursor: s-resize;
}

.Window__resizeHandle__e {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  width: base.rem(3px);
  cursor: e-resize;
}


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:meta';
@use './base.scss';

// Core styles
@include meta.load-css('./reset.scss');

// Atomic classes
@include meta.load-css('./atomic/candystripe.scss');
@include meta.load-css('./atomic/centered-image.scss');
@include meta.load-css('./atomic/color.scss');
@include meta.load-css('./atomic/debug-layout.scss');
@include meta.load-css('./atomic/fit-text.scss');
@include meta.load-css('./atomic/links.scss');
@include meta.load-css('./atomic/outline.scss');
@include meta.load-css('./atomic/text.scss');

// Components
@include meta.load-css('./components/BlockQuote.scss');
@include meta.load-css('./components/Button.scss');
@include meta.load-css('./components/ColorBox.scss');
@include meta.load-css('./components/Dimmer.scss');
@include meta.load-css('./components/Divider.scss');
@include meta.load-css('./components/Dropdown.scss');
@include meta.load-css('./components/Flex.scss');
@include meta.load-css('./components/Icon.scss');
@include meta.load-css('./components/Input.scss');
@include meta.load-css('./components/Knob.scss');
@include meta.load-css('./components/LabeledList.scss');
@include meta.load-css('./components/Modal.scss');
@include meta.load-css('./components/NoticeBox.scss');
@include meta.load-css('./components/NumberInput.scss');
@include meta.load-css('./components/ProgressBar.scss');
@include meta.load-css('./components/RoundGauge.scss');
@include meta.load-css('./components/Section.scss');
@include meta.load-css('./components/Slider.scss');
@include meta.load-css('./components/Stack.scss');
@include meta.load-css('./components/Table.scss');
@include meta.load-css('./components/Tabs.scss');
@include meta.load-css('./components/TextArea.scss');
@include meta.load-css('./components/Tooltip.scss');

// Interfaces
@include meta.load-css('./interfaces/ListInput.scss');
@include meta.load-css('./interfaces/IntegratedCircuit.scss');
@include meta.load-css('./interfaces/AlertModal.scss');
@include meta.load-css('./interfaces/CameraConsole.scss');
@include meta.load-css('./interfaces/Changelog.scss');
@include meta.load-css('./interfaces/CrewManifest.scss');
@include meta.load-css('./interfaces/ExperimentConfigure.scss');
@include meta.load-css('./interfaces/HellishRunes.scss');
@include meta.load-css('./interfaces/Hypertorus.scss');
@include meta.load-css('./interfaces/NuclearBomb.scss');
@include meta.load-css('./interfaces/Paper.scss');
@include meta.load-css('./interfaces/PreferencesMenu.scss');
@include meta.load-css('./interfaces/Roulette.scss');
@include meta.load-css('./interfaces/Safe.scss');
@include meta.load-css('./interfaces/TachyonArray.scss');
@include meta.load-css('./interfaces/Techweb.scss');
@include meta.load-css('./interfaces/RequestManager.scss');

// Layouts
@include meta.load-css('./layouts/Layout.scss');
@include meta.load-css('./layouts/NtosHeader.scss');
@include meta.load-css('./layouts/NtosWindow.scss');
@include meta.load-css('./layouts/TitleBar.scss');
@include meta.load-css('./layouts/Window.scss');

// ZT Theme
.Layout__content {
  background-image: url('../assets/bg-zoomtech.svg');
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}

repo_name: AnalWerewolf/sundown

license: mit


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use './base.scss';

html, body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  font-size: base.$font-size;
}

html {
  overflow: hidden;
  cursor: default; // Reset the cursor.
}

body {
  overflow: auto;
  font-family: Verdana, Geneva, sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  margin: 0;
  padding: 6px 0;
  padding: 0.5rem 0;
}

h1 {
  font-size: 18px;
  font-size: 1.5rem;
}

h2 {
  font-size: 16px;
  font-size: 1.333rem;
}

h3 {
  font-size: 14px;
  font-size: 1.167rem;
}

h4 {
  font-size: 12px;
  font-size: 1rem;
}

td, th {
  vertical-align: baseline;
  text-align: left;
}


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:color';
@use 'sass:meta';

@use '../colors.scss' with (
  $primary: #ad2350,
  $fg-map-keys: (),
  $bg-map-keys: (),
);
@use '../base.scss' with (
  $color-bg: #2a314a,
  $color-bg-grad-spread: 6%,
  $border-radius: 2px,
);

.theme-abductor {
  // 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': #465899,
    'color-caution': #be6209,
    'color-danger': #9a9d00,
  ));
  @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': #a82d55,
  ));

  // 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': #9e1b46,
  ));

  .Layout__content {
    background-image: none;
  }
}


code:
/**
 * 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: #29333a,
   $color-bg-grad-spread: 6%,
   $border-radius: 2px,
 );

 .theme-admin {
   // Atomic classes
   @include meta.load-css('../atomic/color.scss');

   // Layouts
   @include meta.load-css('../layouts/Layout.scss');
   @include meta.load-css('../layouts/Window.scss');

   .Layout__content {
     background-image: url('../../assets/bg-admin.svg');
   }
 }


code:
/**
 * 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: #117039,
  $color-bg-grad-spread: 0%,
  $border-radius: 0,
);

//Made for the roulette table, probably requires a bunch of manual hacks to work for anything else
.theme-cardtable {
  // Atomic classes
  @include meta.load-css('../atomic/color.scss');

  // Components
  @include meta.load-css('../components/Button.scss', $with: (
    'color-default': #117039,
    'color-disabled': #363636,
    'color-selected': #9d0808,
    'color-caution': #be6209,
    'color-danger': #9a9d00,
  ));
  @include meta.load-css('../components/NumberInput.scss', $with: (
    'border-color': #fff,
  ));
  @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': #381608,
  ));

  .Button {
    border: base.em(2px) solid #fff;
  }
}


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:color';
@use 'sass:meta';

@use '../colors.scss' with (
  $primary: #763b7e,
  $fg-map-keys: (),
  $bg-map-keys: (),
);
@use '../base.scss' with (
  $color-bg: #5e0b57,
  $color-bg-grad-spread: 6%,
);

.theme-cutesy {
  // Atomic classes
  @include meta.load-css('../atomic/color.scss');

  // Components
  @include meta.load-css('../components/Button.scss', $with: (
    'color-default': #c765aa,
    'color-disabled': #712a80,
    'color-selected': #ff00dd,
    'color-caution': #8d257c,
    'color-danger': #b31e69,
  ));
  @include meta.load-css('../components/Input.scss', $with: (
    'border-color': #795288,
  ));
  @include meta.load-css('../components/NoticeBox.scss', $with: (
    'background-color': #8d4a9c,
  ));
  @include meta.load-css('../components/Section.scss');
  @include meta.load-css('../components/Tooltip.scss', $with: (
    'background-color': #602a61,
  ));

  // 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': #8f2599,
  ));

  .Layout__content {
    background-image: url('../../assets/bg-cutesy.svg');
  }
}


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:color';
@use 'sass:meta';

@use '../colors.scss' with (
  $primary: #00ff00,
  $fg-map-keys: (),
  $bg-map-keys: (),
);
@use '../base.scss' with (
  $color-bg: #121b12,
  $color-bg-grad-spread: 0%,
);

.theme-hackerman {
  // Atomic classes
  @include meta.load-css('../atomic/color.scss');

  // Components
  @include meta.load-css('../components/Button.scss', $with: (
    'color-default': colors.$primary,
    'color-disabled': #4A6A4A,
    'color-selected': #00FF00,
  ));
  @include meta.load-css('../components/Input.scss', $with: (
    'border-color': colors.$primary,
  ));
  @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': #223d22,
  ));

  .Layout__content {
    background-image: none;
  }

  .Button {
    font-family: monospace;
    border-width: base.em(2px);
    border-style: outset;
    border-color: #00AA00;
    outline: base.em(1px) solid rgb(0, 122, 0);
  }

  .candystripe:nth-child(odd) {
    background-color: rgba(0, 100, 0, 0.50);
  }
}


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

@use 'sass:color';
@use 'sass:meta';

@use '../colors.scss' with (
  $primary: #910101,
  $fg-map-keys: (),
  $bg-map-keys: (),
);
@use '../base.scss' with (
  $color-bg: #1b3443,
  $color-bg-grad-spread: 6%,
);

.theme-malfunction {
  // 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': #1e5881,
    'color-caution': #be6209,
    'color-danger': #9a9d00,
  ));
  @include meta.load-css('../components/Input.scss', $with: (
    'border-color': #910101,
  ));
  @include meta.load-css('../components/NoticeBox.scss', $with: (
    'background-color': #1a3f57,
  ));
  @include meta.load-css('../components/NumberInput.scss', $with: (
    'border-color': #910101,
  ));
  @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': #235577,
  ));

  // 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': #1a3f57,
  ));

  .Layout__content {
    background-image: none;
  }
}


code:
/**
 * Copyright (c) 2020 Aleksej Komarov
 * SPDX-License-Identifier: MIT
 */

 @use 'sass:color';
 @use 'sass:meta';

 $neutral: #ffb300;

 @use '../colors.scss' with (
   $primary: $neutral,
   $fg-map-keys: (),
   $bg-map-keys: (),
 );
 @use '../base.scss' with (
   $color-bg: color.scale($neutral, $lightness: -40%),
   $color-bg-grad-spread: 6%,
 );

 .theme-neutral {
   // Components
   @include meta.load-css('../components/Button.scss', $with: (
     'color-default': color.scale($neutral, $lightness: -30%),
     'color-transparent-text': color.scale($neutral, $lightness: 30%),
   ));
   @include meta.load-css('../components/ProgressBar.scss', $with: (
     'color-default-fill': $neutral,
     '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($neutral, $lightness: -25%),
   ));

   .Layout__content {
     background-image: url('../../assets/bg-neutral.svg');
   }
 }


code:
/**
 * 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%),
  ));
}


code:
/**
 * 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: #ffffff,
  $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');
  @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;
    }
  }

  .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;
    }
  }
}


code:
/**
 * 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': #363636,
    '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;
  }

  .Layout__content {
    background-image: none;
  }
}


code:
/**
 * 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');
  }
}


code:
/**
 * 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');
   }
 }


code:
<!DOCTYPE html>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">

<meta id="tgui:windowId" content="[tgui:windowId]">

ooooo      ooo     .     .oooooo.    .oooooo..o
`888b.     `8'   .o8    d8P'  `Y8b  d8P'    `Y8
 8 `88b.    8  .o888oo 888      888 Y88bo.
 8   `88b.  8    888   888      888  `"Y8888o.
 8     `88b.8    888   888      888      `"Y88b
 8       `888    888 . `88b    d88' oo     .d8P
o8o        `8    "888"  `Y8bood8P'  8""88888P'

<marquee class="FatalError__header">
A fatal exception has occurred at 002B:C562F1B7 in TGUI.
The current application will be terminated.
Send the copy of the following stack trace to an authorized
Nanotrasen incident handler at https://github.com/tgstation/tgstation.
Thank you for your cooperation.
</marquee>

Nanotrasen (c) 2525-2561

Javascript is required in order to use this interface.

Please enable Javascript and restart the game.


jsx: preserve

lib: DOM DOM.Iterable ESNext ScriptHost

module: ESNext

moduleResolution: Node


code:
/**
 * @file
 * @copyright 2020 Aleksej Komarov
 * @license MIT
 */

const webpack = require('webpack');
const path = require('path');
const ExtractCssPlugin = require('mini-css-extract-plugin');
const { createBabelConfig } = require('./babel.config.js');

const createStats = verbose => ({
  assets: verbose,
  builtAt: verbose,
  cached: false,
  children: false,
  chunks: false,
  colors: true,
  entrypoints: true,
  hash: false,
  modules: false,
  performance: false,
  timings: verbose,
  version: verbose,
});

module.exports = (env = {}, argv) => {
  const mode = argv.mode || 'production';
  const bench = env.TGUI_BENCH;
  const config = {
    mode: mode === 'production' ? 'production' : 'development',
    context: path.resolve(__dirname),
    target: ['web', 'es3', 'browserslist:ie 8'],
    entry: {
      'tgui': [
        './packages/tgui-polyfill',
        './packages/tgui',
      ],
      'tgui-panel': [
        './packages/tgui-polyfill',
        './packages/tgui-panel',
      ],
    },
    output: {
      path: argv.useTmpFolder
        ? path.resolve(__dirname, './public/.tmp')
        : path.resolve(__dirname, './public'),
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      chunkLoadTimeout: 15000,
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {},
    },
    module: {
      rules: [
        {
          test: /\.(js|cjs|ts|tsx)$/,
          use: [
            {
              loader: require.resolve('babel-loader'),
              options: createBabelConfig({
                removeConsole: !bench,
              }),
            },
          ],
        },
        {
          test: /\.scss$/,
          use: [
            {
              loader: ExtractCssPlugin.loader,
              options: {
                esModule: false,
              },
            },
            {
              loader: require.resolve('css-loader'),
              options: {
                esModule: false,
              },
            },
            {
              loader: require.resolve('sass-loader'),
            },
          ],
        },
        {
          test: /\.(png|jpg|svg|gif)$/,
          use: [
            {
              loader: require.resolve('url-loader'),
              options: {
                esModule: false,
              },
            },
          ],
        },
      ],
    },
    optimization: {
      emitOnErrors: false,
    },
    performance: {
      hints: false,
    },
    devtool: false,
    cache: {
      type: 'filesystem',
      cacheLocation: path.resolve(__dirname, `.yarn/webpack/${mode}`),
      buildDependencies: {
        config: [__filename],
      },
    },
    stats: createStats(true),
    plugins: [
      new webpack.EnvironmentPlugin({
        NODE_ENV: env.NODE_ENV || mode,
        WEBPACK_HMR_ENABLED: env.WEBPACK_HMR_ENABLED || argv.hot || false,
        DEV_SERVER_IP: env.DEV_SERVER_IP || null,
      }),
      new ExtractCssPlugin({
        filename: '[name].bundle.css',
        chunkFilename: '[name].bundle.css',
      }),
    ],
  };

  if (bench) {
    config.entry = {
      'tgui-bench': [
        './packages/tgui-polyfill',
        './packages/tgui-bench/entrypoint',
      ],
    };
  }

  // Production build specific options
  if (mode === 'production') {
    const TerserPlugin = require('terser-webpack-plugin');
    config.optimization.minimizer = [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          ie8: true,
          output: {
            ascii_only: true,
            comments: false,
          },
        },
      }),
    ];
  }

  // Development build specific options
  if (mode !== 'production') {
    config.devtool = 'cheap-module-source-map';
  }

  // Development server specific options
  if (argv.devServer) {
    config.devServer = {
      progress: false,
      quiet: false,
      noInfo: false,
      clientLogLevel: 'silent',
      stats: createStats(false),
    };
  }

  return config;
};