Implement core container component Page

This is the base wrapper for page content of Nord Docs and renders the
HTML `main` element to wrap page content. It can be used in layout
components like the `BaseLayout` (1).

References:
  (1) #66

Associated epic: GH-63
Relates to: GH-66
GH-65

src/components/containers/core/Page/Page.jsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const backgroundColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST]
+});
+
+/**
+ * A basic wrapper component for page content.
+ *
+ * @since 0.3.0
+ */
+const Page = styled.main`
+  background-color: ${backgroundColor};
+  transition: background-color ${motion.speed.duration.transition.base.themeModeSwitch}s ease-in-out;
+`;
+
+export default Page;

src/components/containers/core/Page/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+export { default } from "./Page";

test/components/containers/core/Page/Page.test.jsx

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import { render } from "react-testing-library";
+
+import Page from "containers/core/Page";
+
+test("snapshot", () => {
+  const { container } = render(<Page />);
+  expect(container).toMatchSnapshot();
+});

test/components/containers/core/Page/__snapshots__/Page.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<div>
+  <main
+    class="sc-bdVaJa dhBqSf"
+  />
+</div>
+`;