Transfer and polish existing "Nord Atom UI" docs and assets

Inititially this includes the install & activation guide, instructions
how to develop the theme and the available theme configurations.

GH-166

content/docs/ports/atom-ui/configuration/index.mdx

@@ -0,0 +1,105 @@
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox, Video } from "atoms/core/mdx-elements";
+import { Code } from "atoms/core/html-elements";
+import { ReactComponent as WindowConfiguration } from "assets/images/illustrations/window-configuration.svg";
+import { ROUTE_DOCS_PORTS_ATOM_UI_INSTALLATION } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Configuration",
+  subline:
+    "From UI element layout up to animations and effects — configure the theme to match your personal preferences"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowConfiguration />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+Nord Atom UI is designed to provide a good UX out-of-the-box, but there is a reason why principles like _themes_ exist a all: Everyone has different preferences and that's a good thing!
+
+To ensure Nord Atom UI fit your needs it comes with configurations for UI elements to make the theme as flexible as possible while still providing sane defaults.
+
+All theme configurations are available through the _Settings_ by switching to the _Themes_ pane and clicking on the small _gear_ icon button next to the _UI Theme_ drop-down component.
+
+<Image
+  alt="Screenshot showing the theme pane of the settings view with active icon button to switch to the UI theme specific configurations"
+  dropShadow
+  fluid={props.images["settings-theme-button.png"]}
+  rounded
+>
+  <span>The icon button to show the UI theme specific configurations.</span>
+</Image>
+
+This will open the available configurations of the active UI theme.
+
+<Image
+  alt="Screenshot showing Nord Atom UI's available theme configurations"
+  dropShadow
+  fluid={props.images["settings-theme-overview.png"]}
+  rounded
+>
+  <span>Nord Atom UI&apos;s available theme configurations.</span>
+</Image>
+
+## UI Elements
+
+### Full-Width Tabs
+
+By default, tabs are using a minimal width required to display the content like titles and allow to keep a better overview when having a large number of open tabs.
+
+<Image
+  alt="Screenshot showing Atom's default tab style"
+  dropShadow
+  fluid={props.images["full-width-tabs-disabled.png"]}
+  rounded
+>
+  <span>Default tab style.</span>
+</Image>
+
+This can be changed to use the full tab bar width, where the available size is evenly distributed among the open tabs, by enabling the „Full-Width Tab Sizing“ theme configuration.
+
+<Image
+  alt="Screenshot showing Atom with enabled „Full-Width Tab Sizing“ theme configuration"
+  dropShadow
+  fluid={props.images["full-width-tabs-enabled.png"]}
+  rounded
+>
+  <span>Tabs with enabled „Full-Width Tab Sizing“ theme configuration.</span>
+</Image>
+
+### Darker Form Focus
+
+By default, form components like a text field using bright styles when focused like a light background color with a dark foreground color to better emphasize the focus state of the currently active UI component.
+
+<Video
+  dropShadow
+  loop
+  poster={props.images["darker-form-focus-disabled.mp4.png"]}
+  rounded
+  sources={[props.videos["darker-form-focus-disabled.mp4"]]}
+>
+  <span>Default bright form focusing effect.</span>
+</Video>
+
+This can be changed to use darker styles with `nord2` as background and `nord4` as foreground color by enabling the „Darker Form-Focusing Effect“ theme configuration.
+
+<Video
+  dropShadow
+  loop
+  poster={props.images["darker-form-focus-enabled.mp4.png"]}
+  rounded
+  sources={[props.videos["darker-form-focus-enabled.mp4"]]}
+>
+  <span>Form focusing effect with enabled „Darker Form-Focusing Effect“ theme configuration.</span>
+</Video>
+
+</ShrinkedWidth>

content/docs/ports/atom-ui/development/index.mdx

@@ -0,0 +1,133 @@
+import Button from "atoms/core/Button";
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox, Video } from "atoms/core/mdx-elements";
+import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
+import { ROUTE_DOCS_PORTS_ATOM_UI_INSTALLATION } from "config/routes/mappings";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Package Development",
+  subline: "Learn how to customize the theme to fit your needs and instantly preview local changes."
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowCode />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+This page documents how to develop the theme package — from requirements to the APM development workflow steps.
+
+# Requirements
+
+Download and install Atom, or [Atom Beta][atom-beta] to use the latest development state, with a minimal version of [1.13.0 or higher][atom-blog-rln-1.13.0].
+
+# Setup
+
+<Banner
+  title={
+    <>
+      Uninstall all currently installed versions of the <em>Nord Atom UI</em> package!
+    </>
+  }
+  variant="warn"
+>
+  Otherwise the installed and versioned package will collide with the development package that'll be configured in this
+  guide.
+</Banner>
+
+## Download
+
+Clone the [_Nord Atom UI_ repository from GitHub][gh-repo] to your local system.
+
+```sh
+git clone https://github.com/arcticicestudio/nord-atom-ui.git
+```
+
+To get the project without [Git][] download the project as `.zip` archive file from the GitHub repository or click on the download button below and extract the archive to your local system afterwards.
+
+<Button href="https://github.com/arcticicestudio/nord-atom-ui/archive/develop.zip">Download</Button>
+
+<Image
+  alt="Screenshot showing the GitHub repository web UI to download the project repository"
+  fillSize={60}
+  fluid={props.images["github-clone.png"]}
+>
+  Download the project repository from GitHub
+</Image>
+
+Both methods will use the `develop` branch to work with the latest development state.
+
+## Register As Development Package
+
+To make the theme available within Atom, the package repository must be registered as _development package_.
+Open a terminal, switch to the cloned/extracted repository directory and run APM&apos;s `dev` command to register the package:
+
+```sh
+apm dev
+```
+
+This automatically links _Nord Atom UI_&apos;s package directory into Atom&apos;s `dev/packages` directory in your [Atom configuration folder][atom-docs-basic-custom-config] `.atom` that is by default located in your [home directory][wiki-homedir] at `~/.atom/dev/packages/<package-name>`.
+
+Afterwards **restart Atom** to check that the _Nord Atom UI_ theme has been registered successfully as development package. Go to the _Packages_ panes of the [_Settings_ view][atom-docs-basic-settings] and ensure the _Nord Atom UI_ package is listed in the _Development Packages_ section.
+
+<Image
+  alt="Screenshot showing the settings view with successfully registered Nord Atom UI development theme package"
+  dropShadow
+  fluid={props.images["settings-dev-theme-pkg.png"]}
+  rounded
+>
+  The{" "}
+  <Link href="https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences">
+    <em>Settings</em> view
+  </Link>{" "}
+  with successfully registered <em>Nord Atom UI</em> development theme package.
+</Image>
+
+# Workflow
+
+## Dev Mode
+
+Start Atom in the [„Dev Mode“][atom-docs-hack-debug] using the `--dev`/`-d` CLI flag to to detect and load all registered development packages. This enables [auto reload („hot reload“)][atom-docs-hack-debug-hotreload] for registered development packages to immediately see saved changes of any of the package's source code files.
+
+```sh
+atom --dev
+```
+
+[Add the cloned/extracted repository as new project folder][atom-docs-basic-add_proj_dir] and set _Nord Atom_ as active UI theme like documented in the <Link to={`${ROUTE_DOCS_PORTS_ATOM_UI_INSTALLATION}#activation`}>installation & activation guide</Link>.
+
+The theme's source code can now be modified and saved changes will immediately apply to the currently running Atom instance.
+
+<Video
+  dropShadow
+  loop
+  poster={props.images["dev-pkg-hot-reload.mp4.png"]}
+  rounded
+  sources={[props.videos["dev-pkg-hot-reload.mp4"]]}
+>
+  <span>
+    Development theme packages changes are immediately applied on save when running in Atom&apos;s „Dev Mode“.
+  </span>
+</Video>
+
+</ShrinkedWidth>
+
+[atom-beta]: https://atom.io/beta
+[atom-blog-rln-1.13.0]: https://blog.atom.io/2017/01/10/atom-1-13.html
+[atom-docs-basic-add_proj_dir]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#opening-directories
+[atom-docs-basic-custom-config]: https://flight-manual.atom.io/using-atom/sections/basic-customization/#global-configuration-settings
+[atom-docs-basic-settings]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences
+[atom-docs-hack-debug-hotreload]: https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#live-reload
+[atom-docs-hack-debug]: https://flight-manual.atom.io/hacking-atom/sections/debugging
+[atom-docs-hack-dev_workflow]: https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#development-workflow
+[atom-docs-hack-theme-ui]: https://flight-manual.atom.io/hacking-atom/sections/creating-a-theme/#creating-a-ui-theme
+[gh-repo]: https://github.com/arcticicestudio/nord-atom-ui
+[git]: https://git-scm.com
+[wiki-homedir]: https://en.wikipedia.org/wiki/Home_directory

content/docs/ports/atom-ui/installation/index.mdx

@@ -0,0 +1,76 @@
+import Link from "atoms/core/Link";
+import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Kbd } from "atoms/core/html-elements";
+import { ReactComponent as Plugin } from "assets/images/illustrations/plugin.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running in one click with the official Atom theme package registry."
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <Plugin />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+Thanks to the [official Atom theme package registry][atom-thpkg-reg-nord], _Nord Atom UI_ can be installed with one click.
+
+1. Go to the [package installation view][atom-docs-pkgs] by opening the [_Settings_][atom-docs-basic-settings].
+2. Switch to the _Install_ pane and enable the [_Themes_ package search filter][atom-docs-pkgs-th].
+3. Search for _Nord_ and and click on the <Kbd>Install</Kbd> button to finish the installation.
+
+<Image
+  alt="Screenshot showing the builtin theme package registry view after searching for Nord"
+  dropShadow
+  fluid={props.images["settings-package-registry.png"]}
+  rounded
+>
+  <span>
+    The builtin <Link href="https://atom.io/themes">theme package registry</Link> view after searching for Nord.
+  </span>
+</Image>
+
+## From CLI via APM
+
+The package can also be installed from the command line using `apm` by running the `install` command:
+
+```sh
+# Install the latest Nord theme package version...
+apm install nord-atom-ui
+
+# ...or a specific version.
+apm install [email protected]
+```
+
+## Activation
+
+To activate the _Nord_ UI theme, open the [_Settings_][atom-docs-basic-settings] and switch to the _Themes_ pane to [change the UI or syntax theme][atom-docs-basic-theme_switch]. Click on the the _UI Theme_ drop-down menu and select _Nord Atom_.
+
+<Image
+  alt="Screenshot showing the theme pane of the setting view with active drop-down menu component to select the active UI theme"
+  dropShadow
+  fluid={props.images["settings-theme-select.png"]}
+  rounded
+>
+  <span>
+    Selecting <em>Nord Atom</em> as active UI theme.
+  </span>
+</Image>
+
+</ShrinkedWidth>
+
+[atom-docs-basic-settings]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#settings-and-preferences
+[atom-docs-basic-theme_switch]: https://flight-manual.atom.io/getting-started/sections/atom-basics/#changing-the-theme
+[atom-docs-pkgs-cli]: https://flight-manual.atom.io/using-atom/sections/atom-packages/#command-line
+[atom-docs-pkgs-th]: https://flight-manual.atom.io/using-atom/sections/atom-packages/#atom-themes
+[atom-docs-pkgs]: https://flight-manual.atom.io/using-atom/sections/atom-packages
+[atom-thpkg-reg-nord]: https://atom.io/themes/nord-atom-ui