Start work

2022-03-09 21:27:53 -08:00
parent 139e57f1eb
commit d1babe27ec
23 changed files with 2773 additions and 44 deletions
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
--- a/.idea/discord.xml
+++ b/.idea/discord.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT_FILES" />
+    <option name="description" value="" />
+  </component>
+</project>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,17 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="color-scheme" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/kleos.iml
+++ b/.idea/kleos.iml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.svelte-kit" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/kleos.iml" filepath="$PROJECT_DIR$/.idea/kleos.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,4 @@
 {
-	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "none",
 	"printWidth": 100
 }
--- a/README.md
+++ b/README.md
@@ -1,40 +1,65 @@
-# create-svelte
+# Kleos

-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+*The Modrinth component library, in Svelte*

-## Creating a project
+---

-If you're seeing this, you've probably already done this step. Congrats!
+### ⚠️ Currently in-progress ⚠️
+
+When creating a component, start with [GitHub's Primer styles](https://github.com/primer/css/tree/main/src) for that component, and go from there. Global variables and colors are incomplete and currently identical to Primers'.
+
+#### Components
+
+- [ ] Button
+- [ ] Select menu
+- [ ] Checkboxes
+- [ ] Text input
+- [ ] Pagination
+- [ ] Link
+- [ ] Blankslate
+- [ ] Breadcrumbs
+- [ ] Markdown
+- [ ] Textarea
+- [ ] Select
+
+...and others
+
+## Using
+
+Install the package:

 ```bash
-# create a new project in the current directory
-npm init svelte@next
-
-# create a new project in my-app
-npm init svelte@next my-app
+npm install kleos # or pnpm inst...
 ```

-> Note: the `@next` is temporary
+Import a component:
+```svelte
+<script>
+    import { Button } from "kleos"
+</script>
+
+<Button> Click me! </Button>
+```

 ## Developing

-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+The library lives in the `src/lib` folder, and the documentation lives in the `src/routes` folder.

 ```bash
-npm run dev
+pnpm install # Install dependencies
+pnpm dev # Run dev server
+```

-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Packaging
+
+```bash
+pnpm package
 ```

 ## Building

-To create a production version of your app:
+To build the documentation site, run:

 ```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+pnpm build
+```
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "naxos",
-  "version": "0.0.1",
+  "name": "kelos",
+  "version": "0.0.1-alpha",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
@@ -17,16 +17,26 @@
    "@sveltejs/kit": "next",
    "@typescript-eslint/eslint-plugin": "^5.10.1",
    "@typescript-eslint/parser": "^5.10.1",
+    "autoprefixer": "^10.4.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
+    "postcss": "^8.4.8",
+    "postcss-extend-rule": "^4.0.0",
+    "postcss-import": "^14.0.2",
+    "postcss-load-config": "^3.1.1",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.4.2",
+    "postcss-strip-inline-comments": "^0.1.5",
    "prettier": "^2.5.1",
    "prettier-plugin-svelte": "^2.5.0",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.10.1",
+    "svelte2tsx": "^0.5.5",
    "tslib": "^2.3.1",
    "typescript": "~4.6.2"
  },
-  "type": "module"
-}
+  "type": "module",
+  "svelte": "index.js"
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,30 +5,48 @@ specifiers:
  '@sveltejs/kit': next
  '@typescript-eslint/eslint-plugin': ^5.10.1
  '@typescript-eslint/parser': ^5.10.1
+  autoprefixer: ^10.4.2
  eslint: ^7.32.0
  eslint-config-prettier: ^8.3.0
  eslint-plugin-svelte3: ^3.2.1
+  postcss: ^8.4.8
+  postcss-extend-rule: ^4.0.0
+  postcss-import: ^14.0.2
+  postcss-load-config: ^3.1.1
+  postcss-nested: ^5.0.6
+  postcss-preset-env: ^7.4.2
+  postcss-strip-inline-comments: ^0.1.5
  prettier: ^2.5.1
  prettier-plugin-svelte: ^2.5.0
  svelte: ^3.44.0
  svelte-check: ^2.2.6
  svelte-preprocess: ^4.10.1
+  svelte2tsx: ^0.5.5
  tslib: ^2.3.1
  typescript: ~4.6.2

 devDependencies:
  '@sveltejs/adapter-auto': 1.0.0-next.31
-  '@sveltejs/kit': 1.0.0-next.294_svelte@3.46.4
+  '@sveltejs/kit': 1.0.0-next.295_svelte@3.46.4
  '@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
  '@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
+  autoprefixer: 10.4.2_postcss@8.4.8
  eslint: 7.32.0
  eslint-config-prettier: 8.5.0_eslint@7.32.0
  eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4
+  postcss: 8.4.8
+  postcss-extend-rule: 4.0.0_postcss@8.4.8
+  postcss-import: 14.0.2_postcss@8.4.8
+  postcss-load-config: 3.1.3
+  postcss-nested: 5.0.6_postcss@8.4.8
+  postcss-preset-env: 7.4.2_postcss@8.4.8
+  postcss-strip-inline-comments: 0.1.5
  prettier: 2.5.1
  prettier-plugin-svelte: 2.6.0_prettier@2.5.1+svelte@3.46.4
  svelte: 3.46.4
-  svelte-check: 2.4.5_svelte@3.46.4
-  svelte-preprocess: 4.10.4_svelte@3.46.4+typescript@4.6.2
+  svelte-check: 2.4.5_33233005e4be8b4492b63cc9de0a2fd4
+  svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd
+  svelte2tsx: 0.5.5_svelte@3.46.4+typescript@4.6.2
  tslib: 2.3.1
  typescript: 4.6.2

@@ -54,6 +72,89 @@ packages:
      js-tokens: 4.0.0
    dev: true

+  /@csstools/postcss-color-function/1.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-J26I69pT2B3MYiLY/uzCGKVJyMYVg9TCpXkWsRlt+Yfq+nELUEm72QXIMYXs4xA9cJA4Oqs2EylrfokKl3mJEQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /@csstools/postcss-font-format-keywords/1.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-oO0cZt8do8FdVBX8INftvIA4lUrKUSCcWUf9IwH9IPWOgKT22oAZFXeHLoDK7nhB2SmkNycp5brxfNMRLIhd6Q==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /@csstools/postcss-hwb-function/1.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-VSTd7hGjmde4rTj1rR30sokY3ONJph1reCBTUXqeW1fKwETPy1x4t/XIeaaqbMbC5Xg4SM/lyXZ2S8NELT2TaA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /@csstools/postcss-ic-unit/1.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-i4yps1mBp2ijrx7E96RXrQXQQHm6F4ym1TOD0D69/sjDjZvQ22tqiEvaNw7pFZTUO5b9vWRHzbHzP9+UKuw+bA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /@csstools/postcss-is-pseudo-class/2.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-Og5RrTzwFhrKoA79c3MLkfrIBYmwuf/X83s+JQtz/Dkk/MpsaKtqHV1OOzYkogQ+tj3oYp5Mq39XotBXNqVc3Q==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /@csstools/postcss-normalize-display-values/1.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-bX+nx5V8XTJEmGtpWTO6kywdS725t71YSLlxWt78XoHUbELWgoCXeOFymRJmL3SU1TLlKSIi7v52EWqe60vJTQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /@csstools/postcss-oklab-function/1.0.2_postcss@8.4.8:
+    resolution: {integrity: sha512-QwhWesEkMlp4narAwUi6pgc6kcooh8cC7zfxa9LSQNYXqzcdNUtNBzbGc5nuyAVreb7uf5Ox4qH1vYT3GA1wOg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /@csstools/postcss-progressive-custom-properties/1.3.0_postcss@8.4.8:
+    resolution: {integrity: sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
  /@eslint/eslintrc/0.4.3:
    resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
    engines: {node: ^10.12.0 || >=12.0.0}
@@ -147,8 +248,8 @@ packages:
      esbuild: 0.14.25
    dev: true

-  /@sveltejs/kit/1.0.0-next.294_svelte@3.46.4:
-    resolution: {integrity: sha512-whTYeri/oaV672KErlhCAvAawlsnd8iu/MQmjdu85TApDYolLe8FDTg6GQ55+0IJbx1N7dOer/HopWzKudPgFA==}
+  /@sveltejs/kit/1.0.0-next.295_svelte@3.46.4:
+    resolution: {integrity: sha512-4pO/swXByhU+7bhNikTjh1d4QxAMP9TZ74p7sdPuyJf5cg7Zrfk1nBtaMt0R+8+5j1xfC/XWRcxa3WnhT9bQMA==}
    engines: {node: '>=14.13'}
    hasBin: true
    peerDependencies:
@@ -369,11 +470,21 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /ansi-regex/2.1.1:
+    resolution: {integrity: sha1-w7M6te42DYbg5ijwRorn7yfWVN8=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /ansi-regex/5.0.1:
    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
    engines: {node: '>=8'}
    dev: true

+  /ansi-styles/2.2.1:
+    resolution: {integrity: sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /ansi-styles/3.2.1:
    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
    engines: {node: '>=4'}
@@ -412,6 +523,22 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /autoprefixer/10.4.2_postcss@8.4.8:
+    resolution: {integrity: sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.20.0
+      caniuse-lite: 1.0.30001314
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
  /balanced-match/1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
    dev: true
@@ -435,6 +562,18 @@ packages:
      fill-range: 7.0.1
    dev: true

+  /browserslist/4.20.0:
+    resolution: {integrity: sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001314
+      electron-to-chromium: 1.4.80
+      escalade: 3.1.1
+      node-releases: 2.0.2
+      picocolors: 1.0.0
+    dev: true
+
  /buffer-crc32/0.2.13:
    resolution: {integrity: sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=}
    dev: true
@@ -444,6 +583,21 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /caniuse-lite/1.0.30001314:
+    resolution: {integrity: sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==}
+    dev: true
+
+  /chalk/1.1.3:
+    resolution: {integrity: sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-styles: 2.2.1
+      escape-string-regexp: 1.0.5
+      has-ansi: 2.0.0
+      strip-ansi: 3.0.1
+      supports-color: 2.0.0
+    dev: true
+
  /chalk/2.4.2:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
    engines: {node: '>=4'}
@@ -510,6 +664,48 @@ packages:
      which: 2.0.2
    dev: true

+  /css-blank-pseudo/3.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /css-has-pseudo/3.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==}
+    engines: {node: ^12 || ^14 || >=16}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /css-prefers-color-scheme/6.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==}
+    engines: {node: ^12 || ^14 || >=16}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /cssdb/6.4.1:
+    resolution: {integrity: sha512-R70R/Q1fPlM1D6Y+Kpat0QjiY+aMsY2/8lekdVoYcJ7ZQs9kw71W78FdOMf8DFq975KHQf1089PNg1dLsbAhoA==}
+    dev: true
+
+  /cssesc/3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
  /debug/4.3.3:
    resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
    engines: {node: '>=6.0'}
@@ -522,6 +718,10 @@ packages:
      ms: 2.1.2
    dev: true

+  /dedent-js/1.0.1:
+    resolution: {integrity: sha1-vuX7fJ5yfYXf+iRZDRDsGrElUwU=}
+    dev: true
+
  /deep-is/0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
    dev: true
@@ -545,6 +745,10 @@ packages:
      esutils: 2.0.3
    dev: true

+  /electron-to-chromium/1.4.80:
+    resolution: {integrity: sha512-COsbJCGVYCc/aAY4cd94x1Js3q0r406YKGbdL8LXHg0O9dEjuFEFU/vZneRxBxKo/f1lLHi0YyAR7sbFM+i8Bg==}
+    dev: true
+
  /emoji-regex/8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
    dev: true
@@ -768,6 +972,11 @@ packages:
      esbuild-windows-arm64: 0.14.25
    dev: true

+  /escalade/3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: true
+
  /escape-string-regexp/1.0.5:
    resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
    engines: {node: '>=0.8.0'}
@@ -990,6 +1199,10 @@ packages:
    resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==}
    dev: true

+  /fraction.js/4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: true
+
  /fs.realpath/1.0.0:
    resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
    dev: true
@@ -1059,6 +1272,18 @@ packages:
    resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
    dev: true

+  /has-ansi/2.0.0:
+    resolution: {integrity: sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
+  /has-flag/1.0.0:
+    resolution: {integrity: sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /has-flag/3.0.0:
    resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=}
    engines: {node: '>=4'}
@@ -1149,6 +1374,10 @@ packages:
    resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=}
    dev: true

+  /js-base64/2.6.4:
+    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
+    dev: true
+
  /js-tokens/4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
    dev: true
@@ -1186,6 +1415,11 @@ packages:
      type-check: 0.4.0
    dev: true

+  /lilconfig/2.0.4:
+    resolution: {integrity: sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==}
+    engines: {node: '>=10'}
+    dev: true
+
  /lodash.merge/4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: true
@@ -1194,6 +1428,12 @@ packages:
    resolution: {integrity: sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=}
    dev: true

+  /lower-case/2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
  /lru-cache/6.0.0:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
    engines: {node: '>=10'}
@@ -1261,11 +1501,27 @@ packages:
    resolution: {integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=}
    dev: true

+  /no-case/3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.3.1
+    dev: true
+
+  /node-releases/2.0.2:
+    resolution: {integrity: sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==}
+    dev: true
+
  /normalize-path/3.0.0:
    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
    engines: {node: '>=0.10.0'}
    dev: true

+  /normalize-range/0.1.2:
+    resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /once/1.4.0:
    resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=}
    dependencies:
@@ -1291,6 +1547,13 @@ packages:
      callsites: 3.1.0
    dev: true

+  /pascal-case/3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.3.1
+    dev: true
+
  /path-is-absolute/1.0.1:
    resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
    engines: {node: '>=0.10.0'}
@@ -1319,6 +1582,387 @@ packages:
    engines: {node: '>=8.6'}
    dev: true

+  /pify/2.3.0:
+    resolution: {integrity: sha1-7RQaasBDqEnqWISY59yosVMw6Qw=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /postcss-attribute-case-insensitive/5.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-b4g9eagFGq9T5SWX4+USfVyjIb3liPnjhHHRMP7FMB2kFVpYyfEscV0wP3eaXhKlcHKUut8lt5BGoeylWA/dBQ==}
+    peerDependencies:
+      postcss: ^8.0.2
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-color-functional-notation/4.2.2_postcss@8.4.8:
+    resolution: {integrity: sha512-DXVtwUhIk4f49KK5EGuEdgx4Gnyj6+t2jBSEmxvpIK9QI40tWrpS2Pua8Q7iIZWBrki2QOaeUdEaLPPa91K0RQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-color-hex-alpha/8.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-fESawWJCrBV035DcbKRPAVmy21LpoyiXdPTuHUfWJ14ZRjY7Y7PA6P4g8z6LQGYhU1WAxkTxjIjurXzoe68Glw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-color-rebeccapurple/7.0.2_postcss@8.4.8:
+    resolution: {integrity: sha512-SFc3MaocHaQ6k3oZaFwH8io6MdypkUtEy/eXzXEB1vEQlO3S3oDc/FSZA8AsS04Z25RirQhlDlHLh3dn7XewWw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.3
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-custom-media/8.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-custom-properties/12.1.4_postcss@8.4.8:
+    resolution: {integrity: sha512-i6AytuTCoDLJkWN/MtAIGriJz3j7UX6bV7Z5t+KgFz+dwZS15/mlTJY1S0kRizlk6ba0V8u8hN50Fz5Nm7tdZw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-custom-selectors/6.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-/1iyBhz/W8jUepjGyu7V1OPcGbc636snN1yXEQCinb6Bwt7KxsiU7/bLQlp8GwAXzCh7cobBU5odNn/2zQWR8Q==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.1.2
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-dir-pseudo-class/6.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-I8epwGy5ftdzNWEYok9VjW9whC4xnelAtbajGv4adql4FIF09rnrxnA9Y8xSHN47y7gqFIv10C5+ImsLeJpKBw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-double-position-gradients/3.1.1_postcss@8.4.8:
+    resolution: {integrity: sha512-jM+CGkTs4FcG53sMPjrrGE0rIvLDdCrqMzgDC5fLI7JHDO7o6QG8C5TQBtExb13hdBdoH9C2QVbG4jo2y9lErQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-env-function/4.0.5_postcss@8.4.8:
+    resolution: {integrity: sha512-gPUJc71ji9XKyl0WSzAalBeEA/89kU+XpffpPxSaaaZ1c48OL36r1Ep5R6+9XAPkIiDlSvVAwP4io12q/vTcvA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-extend-rule/4.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-3gjPWUDNYjkRjtcpoN8ppZRXG8vyAk4mYdkYOETacCkCLVguW5IpCXCO31cDk8SW2/rx0RogWcXm1Zu/EayDVg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4.6
+    dependencies:
+      postcss: 8.4.8
+      postcss-nesting: 10.1.3_postcss@8.4.8
+    dev: true
+
+  /postcss-focus-visible/6.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-focus-within/5.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-font-variant/5.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-gap-properties/3.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-image-set-function/4.0.6_postcss@8.4.8:
+    resolution: {integrity: sha512-KfdC6vg53GC+vPd2+HYzsZ6obmPqOk6HY09kttU19+Gj1nC3S3XBVEXDHxkhxTohgZqzbUb94bKXvKDnYWBm/A==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-import/14.0.2_postcss@8.4.8:
+    resolution: {integrity: sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.0
+    dev: true
+
+  /postcss-initial/4.0.1_postcss@8.4.8:
+    resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-lab-function/4.1.2_postcss@8.4.8:
+    resolution: {integrity: sha512-isudf5ldhg4fk16M8viAwAbg6Gv14lVO35N3Z/49NhbwPQ2xbiEoHgrRgpgQojosF4vF7jY653ktB6dDrUOR8Q==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-load-config/3.1.3:
+    resolution: {integrity: sha512-5EYgaM9auHGtO//ljHH+v/aC/TQ5LHXtL7bQajNAUBKUVKiYE8rYpFms7+V26D9FncaGe2zwCoPQsFKb5zF/Hw==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.4
+      yaml: 1.10.2
+    dev: true
+
+  /postcss-logical/5.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-media-minmax/5.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-nested/5.0.6_postcss@8.4.8:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-nesting/10.1.3_postcss@8.4.8:
+    resolution: {integrity: sha512-wUC+/YCik4wH3StsbC5fBG1s2Z3ZV74vjGqBFYtmYKlVxoio5TYGM06AiaKkQPPlkXWn72HKfS7Cw5PYxnoXSw==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-opacity-percentage/1.1.2:
+    resolution: {integrity: sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==}
+    engines: {node: ^12 || ^14 || >=16}
+    dev: true
+
+  /postcss-overflow-shorthand/3.0.3_postcss@8.4.8:
+    resolution: {integrity: sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-page-break/3.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==}
+    peerDependencies:
+      postcss: ^8
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-place/7.0.4_postcss@8.4.8:
+    resolution: {integrity: sha512-MrgKeiiu5OC/TETQO45kV3npRjOFxEHthsqGtkh3I1rPbZSbXGD/lZVi9j13cYh+NA8PIAPyk6sGjT9QbRyvSg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-preset-env/7.4.2_postcss@8.4.8:
+    resolution: {integrity: sha512-AmOkb8AeNNQwE/z2fHl1iwOIt8J50V8WR0rmLagcgIDoqlJZWjV3NdtOPnLGco1oN8DZe+Ss5B9ULbBeS6HfeA==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/postcss-color-function': 1.0.3_postcss@8.4.8
+      '@csstools/postcss-font-format-keywords': 1.0.0_postcss@8.4.8
+      '@csstools/postcss-hwb-function': 1.0.0_postcss@8.4.8
+      '@csstools/postcss-ic-unit': 1.0.0_postcss@8.4.8
+      '@csstools/postcss-is-pseudo-class': 2.0.1_postcss@8.4.8
+      '@csstools/postcss-normalize-display-values': 1.0.0_postcss@8.4.8
+      '@csstools/postcss-oklab-function': 1.0.2_postcss@8.4.8
+      '@csstools/postcss-progressive-custom-properties': 1.3.0_postcss@8.4.8
+      autoprefixer: 10.4.2_postcss@8.4.8
+      browserslist: 4.20.0
+      css-blank-pseudo: 3.0.3_postcss@8.4.8
+      css-has-pseudo: 3.0.4_postcss@8.4.8
+      css-prefers-color-scheme: 6.0.3_postcss@8.4.8
+      cssdb: 6.4.1
+      postcss: 8.4.8
+      postcss-attribute-case-insensitive: 5.0.0_postcss@8.4.8
+      postcss-color-functional-notation: 4.2.2_postcss@8.4.8
+      postcss-color-hex-alpha: 8.0.3_postcss@8.4.8
+      postcss-color-rebeccapurple: 7.0.2_postcss@8.4.8
+      postcss-custom-media: 8.0.0_postcss@8.4.8
+      postcss-custom-properties: 12.1.4_postcss@8.4.8
+      postcss-custom-selectors: 6.0.0_postcss@8.4.8
+      postcss-dir-pseudo-class: 6.0.4_postcss@8.4.8
+      postcss-double-position-gradients: 3.1.1_postcss@8.4.8
+      postcss-env-function: 4.0.5_postcss@8.4.8
+      postcss-focus-visible: 6.0.4_postcss@8.4.8
+      postcss-focus-within: 5.0.4_postcss@8.4.8
+      postcss-font-variant: 5.0.0_postcss@8.4.8
+      postcss-gap-properties: 3.0.3_postcss@8.4.8
+      postcss-image-set-function: 4.0.6_postcss@8.4.8
+      postcss-initial: 4.0.1_postcss@8.4.8
+      postcss-lab-function: 4.1.2_postcss@8.4.8
+      postcss-logical: 5.0.4_postcss@8.4.8
+      postcss-media-minmax: 5.0.0_postcss@8.4.8
+      postcss-nesting: 10.1.3_postcss@8.4.8
+      postcss-opacity-percentage: 1.1.2
+      postcss-overflow-shorthand: 3.0.3_postcss@8.4.8
+      postcss-page-break: 3.0.4_postcss@8.4.8
+      postcss-place: 7.0.4_postcss@8.4.8
+      postcss-pseudo-class-any-link: 7.1.1_postcss@8.4.8
+      postcss-replace-overflow-wrap: 4.0.0_postcss@8.4.8
+      postcss-selector-not: 5.0.0_postcss@8.4.8
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-pseudo-class-any-link/7.1.1_postcss@8.4.8:
+    resolution: {integrity: sha512-JRoLFvPEX/1YTPxRxp1JO4WxBVXJYrSY7NHeak5LImwJ+VobFMwYDQHvfTXEpcn+7fYIeGkC29zYFhFWIZD8fg==}
+    engines: {node: ^12 || ^14 || >=16}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      postcss: 8.4.8
+      postcss-selector-parser: 6.0.9
+    dev: true
+
+  /postcss-replace-overflow-wrap/4.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==}
+    peerDependencies:
+      postcss: ^8.0.3
+    dependencies:
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-selector-not/5.0.0_postcss@8.4.8:
+    resolution: {integrity: sha512-/2K3A4TCP9orP4TNS7u3tGdRFVKqz/E6pX3aGnriPG0jU78of8wsUcqE4QAhWEU0d+WnMSF93Ah3F//vUtK+iQ==}
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      balanced-match: 1.0.2
+      postcss: 8.4.8
+    dev: true
+
+  /postcss-selector-parser/6.0.9:
+    resolution: {integrity: sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /postcss-strip-inline-comments/0.1.5:
+    resolution: {integrity: sha1-f/a83BTmM+1M36AguuPt2tT4S5A=}
+    dependencies:
+      postcss: 5.2.18
+    dev: true
+
+  /postcss-value-parser/4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
+
+  /postcss/5.2.18:
+    resolution: {integrity: sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      chalk: 1.1.3
+      js-base64: 2.6.4
+      source-map: 0.5.7
+      supports-color: 3.2.3
+    dev: true
+
  /postcss/8.4.8:
    resolution: {integrity: sha512-2tXEqGxrjvAO6U+CJzDL2Fk2kPHTv1jQsYkSoMeOis2SsYaXRO2COxTdQp99cYvif9JTXaAk9lYGc3VhJt7JPQ==}
    engines: {node: ^10 || ^12 || >=14}
@@ -1363,6 +2007,12 @@ packages:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
    dev: true

+  /read-cache/1.0.0:
+    resolution: {integrity: sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=}
+    dependencies:
+      pify: 2.3.0
+    dev: true
+
  /readdirp/3.6.0:
    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
    engines: {node: '>=8.10.0'}
@@ -1492,6 +2142,11 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /source-map/0.5.7:
+    resolution: {integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /source-map/0.7.3:
    resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==}
    engines: {node: '>= 8'}
@@ -1514,6 +2169,13 @@ packages:
      strip-ansi: 6.0.1
    dev: true

+  /strip-ansi/3.0.1:
+    resolution: {integrity: sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      ansi-regex: 2.1.1
+    dev: true
+
  /strip-ansi/6.0.1:
    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
    engines: {node: '>=8'}
@@ -1533,6 +2195,18 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /supports-color/2.0.0:
+    resolution: {integrity: sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /supports-color/3.2.3:
+    resolution: {integrity: sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=}
+    engines: {node: '>=0.8.0'}
+    dependencies:
+      has-flag: 1.0.0
+    dev: true
+
  /supports-color/5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
    engines: {node: '>=4'}
@@ -1552,7 +2226,7 @@ packages:
    engines: {node: '>= 0.4'}
    dev: true

-  /svelte-check/2.4.5_svelte@3.46.4:
+  /svelte-check/2.4.5_33233005e4be8b4492b63cc9de0a2fd4:
    resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==}
    hasBin: true
    peerDependencies:
@@ -1566,7 +2240,7 @@ packages:
      sade: 1.8.1
      source-map: 0.7.3
      svelte: 3.46.4
-      svelte-preprocess: 4.10.4_svelte@3.46.4+typescript@4.6.2
+      svelte-preprocess: 4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd
      typescript: 4.6.2
    transitivePeerDependencies:
      - '@babel/core'
@@ -1590,7 +2264,7 @@ packages:
      svelte: 3.46.4
    dev: true

-  /svelte-preprocess/4.10.4_svelte@3.46.4+typescript@4.6.2:
+  /svelte-preprocess/4.10.4_8c88c4f1b7a55bcfafd385f58ef1abcd:
    resolution: {integrity: sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==}
    engines: {node: '>= 9.11.2'}
    requiresBuild: true
@@ -1635,6 +2309,8 @@ packages:
      '@types/sass': 1.43.1
      detect-indent: 6.1.0
      magic-string: 0.25.9
+      postcss: 8.4.8
+      postcss-load-config: 3.1.3
      sorcery: 0.10.0
      strip-indent: 3.0.0
      svelte: 3.46.4
@@ -1646,6 +2322,18 @@ packages:
    engines: {node: '>= 8'}
    dev: true

+  /svelte2tsx/0.5.5_svelte@3.46.4+typescript@4.6.2:
+    resolution: {integrity: sha512-5n8jP721bM3vXPk36AM9diZg2aasLvsfP/Zt9CQVrcqcnzexOYVeS8kpGk+3mofOPvPvXnOCLdff62usI/KOMw==}
+    peerDependencies:
+      svelte: ^3.24
+      typescript: ^4.1.2
+    dependencies:
+      dedent-js: 1.0.1
+      pascal-case: 3.1.2
+      svelte: 3.46.4
+      typescript: 4.6.2
+    dev: true
+
  /table/6.8.0:
    resolution: {integrity: sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==}
    engines: {node: '>=10.0.0'}
@@ -1717,6 +2405,10 @@ packages:
      punycode: 2.1.1
    dev: true

+  /util-deprecate/1.0.2:
+    resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
+    dev: true
+
  /v8-compile-cache/2.3.0:
    resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
    dev: true
@@ -1765,3 +2457,8 @@ packages:
  /yallist/4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
    dev: true
+
+  /yaml/1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: true
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,12 @@
+const config = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-strip-inline-comments'),
+    require('postcss-nested'),
+    require('postcss-preset-env'),
+    require('autoprefixer'),
+    require('postcss-extend-rule'),
+  ],
+};
+
+module.exports = config;
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-color-mode="light">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="" />
--- a/src/lib/components/elements/buttons/Button.svelte
+++ b/src/lib/components/elements/buttons/Button.svelte
@@ -0,0 +1,331 @@
+<script lang="ts">
+    export let as: 'button' | 'a' | 'summary' | 'input'  = 'button'
+    export let href: string
+    if (href) as = 'a'
+
+    // Use `value` if the button is an `<input`>
+    export let value: string;
+
+    export let size: 'sm' | 'md' | 'lg' = 'md'
+
+    let className = `btn btn--${size}`;
+</script>
+
+{#if as === 'button'}
+    <button class={className}>
+        <slot />
+    </button>
+{:else if as === 'a'}
+    <a class={className} {href}>
+        <slot />
+    </a>
+{:else if as === 'summary'}
+    <summary class={className}>
+        <slot />
+    </summary>
+{:else if as === 'input'}
+    <input class={className} {value} />
+{/if}
+
+<style lang="postcss">
+  /* Base button styles */
+  .btn {
+      position: relative;
+      display: inline-block;
+      padding: 5px var(--spacer-3);
+      font-size: var(--body-font-size);
+      font-weight: var(--font-weight-semibold);
+      line-height: 20px; /* Specifically not inherit our `<body>` default */
+      white-space: nowrap;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+      border: var(--border-width) var(--border-style);
+      border-radius: var(--radii-2);
+      appearance: none; /* Corrects inability to style clickable `input` types in iOS. */
+
+      &:hover {
+          text-decoration: none;
+      }
+
+      &:disabled,
+      &.disabled,
+      &[aria-disabled='true'] {
+          cursor: default;
+      }
+
+      i {
+          font-style: normal;
+          font-weight: var(--font-weight-semibold);
+          opacity: 0.75;
+      }
+
+      /*
+    .icon {
+      margin-right: $spacer-1;
+      color: var(--color-fg-muted);
+      vertical-align: text-bottom;
+
+      &:only-child {
+        margin-right: 0;
+      }
+    }
+
+    .Counter {
+      margin-left: 2px;
+      color: inherit;
+      text-shadow: none;
+      vertical-align: top;
+      background-color: var(--color-btn-counter-bg);
+    }
+
+    .dropdown-caret {
+      margin-left: $spacer-1;
+      opacity: 0.8;
+    }
+  */
+  }
+
+  /* Default button */
+  .btn {
+    color: var(--color-btn-text);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    transition-property: color, background-color, border-color;
+
+    &:hover,
+    &.hover,
+    [open] > & {
+      background-color: var(--color-btn-hover-bg);
+      border-color: var(--color-btn-hover-border);
+      transition-duration: 0.1s;
+    }
+
+    &:active {
+      background-color: var(--color-btn-active-bg);
+      border-color: var(--color-btn-active-border);
+      transition: none;
+    }
+
+    &.selected,
+    &[aria-selected='true'] {
+      background-color: var(--color-btn-selected-bg);
+      box-shadow: var(--color-primer-shadow-inset);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-primer-fg-disabled);
+      background-color: var(--color-btn-bg);
+      border-color: var(--color-btn-border);
+
+      .octicon {
+        color: var(--color-primer-fg-disabled);
+      }
+    }
+
+    /* Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons */
+    &:focus,
+    &.focus {
+      border-color: var(--color-btn-focus-border);
+      outline: none;
+      box-shadow: var(--color-btn-focus-shadow);
+    }
+  }
+
+  /* Primary button */
+  .btn--primary {
+    color: var(--color-btn-primary-text);
+    background-color: var(--color-btn-primary-bg);
+    border-color: var(--color-btn-primary-border);
+    box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+    &:hover,
+    &.hover,
+    [open] > & {
+      background-color: var(--color-btn-primary-hover-bg);
+      border-color: var(--color-btn-primary-hover-border);
+    }
+
+    &:active,
+    &.selected,
+    &[aria-selected='true'] {
+      background-color: var(--color-btn-primary-selected-bg);
+      box-shadow: var(--color-btn-primary-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-primary-disabled-text);
+      background-color: var(--color-btn-primary-disabled-bg);
+      border-color: var(--color-btn-primary-disabled-border);
+
+      .octicon {
+        color: var(--color-btn-primary-disabled-text);
+      }
+    }
+
+    &:focus,
+    &.focus {
+      background-color: var(--color-btn-primary-focus-bg);
+      border-color: var(--color-btn-primary-focus-border);
+      box-shadow: var(--color-btn-primary-focus-shadow);
+    }
+
+    .Counter {
+      color: inherit;
+      background-color: var(--color-btn-primary-counter-bg);
+    }
+
+    .octicon {
+      color: var(--color-btn-primary-icon);
+    }
+  }
+
+  /* Outline button */
+  .btn--outline {
+    color: var(--color-btn-outline-text);
+
+    &:hover,
+    [open] > & {
+      color: var(--color-btn-outline-hover-text);
+      background-color: var(--color-btn-outline-hover-bg);
+      border-color: var(--color-btn-outline-hover-border);
+      box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+
+      .Counter {
+        background-color: var(--color-btn-outline-hover-counter-bg);
+      }
+
+      .octicon {
+        color: inherit;
+      }
+    }
+
+    &:active,
+    &.selected,
+    &[aria-selected='true'] {
+      color: var(--color-btn-outline-selected-text);
+      background-color: var(--color-btn-outline-selected-bg);
+      border-color: var(--color-btn-outline-selected-border);
+      box-shadow: var(--color-btn-outline-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-outline-disabled-text);
+      background-color: var(--color-btn-outline-disabled-bg);
+      border-color: var(--color-btn-border);
+      box-shadow: none;
+
+      .Counter {
+        background-color: var(--color-btn-outline-disabled-counter-bg);
+      }
+    }
+
+    &:focus {
+      border-color: var(--color-btn-outline-focus-border);
+      box-shadow: var(--color-btn-outline-focus-shadow);
+    }
+
+    .Counter {
+      color: inherit;
+      background-color: var(--color-btn-outline-counter-bg);
+    }
+  }
+
+  /* Danger button */
+  .btn--danger {
+    color: var(--color-btn-danger-text);
+
+    .octicon {
+      color: var(--color-btn-danger-icon);
+    }
+
+    &:hover,
+    [open] > & {
+      color: var(--color-btn-danger-hover-text);
+      background-color: var(--color-btn-danger-hover-bg);
+      border-color: var(--color-btn-danger-hover-border);
+      box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+
+      .Counter {
+        background-color: var(--color-btn-danger-hover-counter-bg);
+      }
+
+      .octicon {
+        color: var(--color-btn-danger-hover-icon);
+      }
+    }
+
+    &:active,
+    &.selected,
+    &[aria-selected='true'] {
+      color: var(--color-btn-danger-selected-text);
+      background-color: var(--color-btn-danger-selected-bg);
+      border-color: var(--color-btn-danger-selected-border);
+      box-shadow: var(--color-btn-danger-selected-shadow);
+    }
+
+    &:disabled,
+    &.disabled,
+    &[aria-disabled='true'] {
+      color: var(--color-btn-danger-disabled-text);
+      background-color: var(--color-btn-danger-disabled-bg);
+      border-color: var(--color-btn-border);
+      box-shadow: none;
+
+      .Counter {
+        background-color: var(--color-btn-danger-disabled-counter-bg);
+      }
+
+      .octicon {
+        color: var(--color-btn-danger-disabled-text);
+      }
+    }
+
+    &:focus {
+      border-color: var(--color-btn-danger-focus-border);
+      box-shadow: var(--color-btn-danger-focus-shadow);
+    }
+
+    .Counter {
+      color: inherit;
+      background-color: var(--color-btn-danger-counter-bg);
+    }
+  }
+
+  /* Sizes */
+  .btn--sm {
+    padding: 3px 12px;
+    font-size: var(--font-0);
+    line-height: 20px;
+
+      /*
+    .octicon {
+      vertical-align: text-top;
+    }
+    */
+  }
+
+  .btn--large {
+    /* padding: $em-spacer-6 1.5em; */
+    font-size: inherit;
+    /* line-height: $lh-default; */
+
+    border-radius: 0.5em;
+  }
+
+  /* Full-width button */
+  /* These buttons expand to the full width of their parent container */
+  .btn-block {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+</style>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
--- a/src/lib/styles/themes/light.postcss
+++ b/src/lib/styles/themes/light.postcss
--- a/src/lib/styles/variables.postcss
+++ b/src/lib/styles/variables.postcss
@@ -0,0 +1,3 @@
+@import "variables/borders.postcss";
+@import "variables/typography.postcss";
+@import "variables/spacing.postcss";
--- a/src/lib/styles/variables/borders.postcss
+++ b/src/lib/styles/variables/borders.postcss
@@ -0,0 +1,13 @@
+:root {
+  /* Borders */
+  --border-width: 1px;
+  --border-style: solid;
+  --border: var(--border-width) var(--border-style);
+
+  /* Radii */
+  --radii-1: 4px;
+  --radii-2: 6px;
+  --radii-3: 8px;
+  --radii-max: 100px;
+  --radii: var(--radii-2);
+}
--- a/src/lib/styles/variables/spacing.postcss
+++ b/src/lib/styles/variables/spacing.postcss
@@ -0,0 +1,206 @@
+:root {
+         /* these are values for the display CSS property */
+        /*
+       --display-values: (
+               block,
+               flex,
+               inline,
+               inline-block,
+               inline-flex,
+               none,
+               table,
+               table-cell
+       );
+
+       // maps edges to respective corners for border-radius
+       --edges: (
+               top: (top-left, top-right),
+               right: (top-right, bottom-right),
+               bottom: (bottom-right, bottom-left),
+               left: (bottom-left, top-left)
+       );
+       */
+
+        /*
+        These are our margin and padding utility spacers. The default step size we
+        use is 8px. This gives us a key of:
+            0 => 0px
+            1 => 4px
+            2 => 8px
+            3 => 16px
+            4 => 24px
+            5 => 32px
+            6 => 40px */
+        --spacer: 8px;
+
+        /* Our spacing scale */
+        --spacer-0: 0; /* 0 */
+        --spacer-1: calc(var(--spacer) * 0.5); /* 4px */
+        --spacer-2: --spacer; /* 8px */
+        --spacer-3: calc(var(--spacer) * 2); /* 16px */
+        --spacer-4: calc(var(--spacer) * 3); /* 24px */
+        --spacer-5: calc(var(--spacer) * 4); /* 32px */
+        --spacer-6: calc(var(--spacer) * 5); /* 40px */
+
+        /*
+        /* The list of spacer values
+        --spacers: (
+                --spacer-0,
+                --spacer-1,
+                --spacer-2,
+                --spacer-3,
+                --spacer-4,
+                --spacer-5,
+                --spacer-6,
+        );
+
+        /* And the map of spacers, for easier looping:
+        /* @each --scale, --length in --spacer-map { ... }
+        --spacer-map: (
+                0: --spacer-0,
+                1: --spacer-1,
+                2: --spacer-2,
+                3: --spacer-3,
+                4: --spacer-4,
+                5: --spacer-5,
+                6: --spacer-6,
+        );
+
+        /* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
+        /* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
+        /* 80, 96, etc.
+        --spacer-7: --spacer * 6; /* 48px
+        --spacer-8: --spacer * 8; /* 64px
+        --spacer-9: --spacer * 10; /* 80px
+        --spacer-10: --spacer * 12; /* 96px
+        --spacer-11: --spacer * 14; /* 112px
+        --spacer-12: --spacer * 16; /* 128px
+
+        --spacers-large: (
+                7: --spacer-7,
+                8: --spacer-8,
+                9: --spacer-9,
+                10: --spacer-10,
+                11: --spacer-11,
+                12: --spacer-12,
+        );
+
+        --spacer-map-extended: map-merge(
+                        (
+                                0: 0,
+                                1: --spacer-1,
+                                2: --spacer-2,
+                                3: --spacer-3,
+                                4: --spacer-4,
+                                5: --spacer-5,
+                                6: --spacer-6,
+                        ),
+                        --spacers-large,
+        );
+
+        /* Em spacer variables
+        --em-spacer-1: 0.0625em; /* 1/16
+        --em-spacer-2: 0.125em; /* 1/8
+        --em-spacer-3: 0.25em; /* 1/4
+        --em-spacer-4: 0.375em; /* 3/8
+        --em-spacer-5: 0.5em; /* 1/2
+        --em-spacer-6: 0.75em; /* 3/4
+
+        /* Size scale
+        /* Used for buttons, inputs, labels, avatars etc.
+        --size: 16px;
+
+        --size-0: 0;
+        --size-1: --size; /* 16px
+        --size-2: --size-1 +  4px; /* 20px
+        --size-3: --size-2 +  4px; /* 24px
+        --size-4: --size-3 +  4px; /* 28px
+        --size-5: --size-4 +  4px; /* 32px
+        --size-6: --size-5 +  8px; /* 40px
+        --size-7: --size-6 +  8px; /* 48px
+        --size-8: --size-7 + 16px; /* 64px
+
+        /* Fixed-width container variables
+        --container-width: 980px;
+        --grid-gutter: 10px;
+
+        // Breakpoint widths
+        --width-xs: 0;
+        // Small screen / phone
+        --width-sm: 544px;
+        // Medium screen / tablet
+        --width-md: 768px;
+        // Large screen / desktop (980 + (16 * 2)) <= container + gutters
+        --width-lg: 1012px;
+        // Extra large screen / wide desktop
+        --width-xl: 1280px;
+
+        // Responsive container widths
+        --container-sm: --width-sm;
+        --container-md: --width-md;
+        --container-lg: --width-lg;
+        --container-xl: --width-xl;
+
+        // Breakpoints in the form (name: length)
+        --breakpoints: (
+                sm: --width-sm,
+                md: --width-md,
+                lg: --width-lg,
+                xl: --width-xl
+        );
+
+        // This map in the form (breakpoint: variant) is used to iterate over
+        // breakpoints and create both responsive and non-responsive classes in one
+        // loop:
+        --responsive-variants: (
+                '': '',
+                sm: '-sm',
+                md: '-md',
+                lg: '-lg',
+                xl: '-xl',
+        );
+
+        // responsive utility position values
+        --responsive-positions: (
+                static,
+                relative,
+                absolute,
+                fixed,
+                sticky
+        );
+
+        --sidebar-width: (
+                sm: 220px,
+                md: 256px,
+                lg: 296px
+        );
+
+        --sidebar-narrow-width: (
+                md: 240px,
+                lg: 256px
+        );
+
+        --sidebar-wide-width: (
+                lg: 320px,
+                xl: 336px
+        );
+
+        --gutter: (
+                md: --spacer-3,
+                lg: --spacer-4,
+                xl: --spacer-5
+        );
+
+        --gutter-condensed: (
+                md: --spacer-3,
+                lg: --spacer-3,
+                xl: --spacer-4
+        );
+
+        --gutter-spacious: (
+                md: --spacer-4,
+                lg: --spacer-5,
+                xl: --spacer-6
+        );
+        */
+}
--- a/src/lib/styles/variables/typography.postcss
+++ b/src/lib/styles/variables/typography.postcss
@@ -0,0 +1,41 @@
+:root {
+  /* Heading sizes - mobile */
+  /* h4-h6 remain the same size on both mobile & desktop */
+  --h00-size-mobile: 40px;
+  --h0-size-mobile: 32px;
+  --h1-size-mobile: 26px;
+  --h2-size-mobile: 22px;
+  --h3-size-mobile: 18px;
+
+  /* Heading sizes - desktop */
+  --h00-size: 48px;
+  --h0-size: 40px;
+  --h1-size: 32px;
+  --h2-size: 24px;
+  --h3-size: 20px;
+  --h4-size: 16px;
+  --h5-size: 14px;
+  --h6-size: 12px;
+
+  --font-size-small: 12px;
+
+  /* Line heights */
+  --lh-condensed-ultra: 1;
+  --lh-condensed: 1.25;
+  --lh-default: 1.5;
+
+  /* The base body size */
+  --body-font-size: 14px;
+  --body-line-height: --lh-default;
+
+  /* Font weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 500;
+  --font-weight-bold: 600;
+
+  /* Font stacks */
+  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+
+}
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import "$lib/styles/variables.postcss";
+    import "$lib/styles/themes/light.postcss";
+</script>
+
+<main>
+    <slot></slot>
+</main>
+
+<style lang="postcss">
+    main {
+      font-size: var(--body-font-size);
+      font-family: var(--body-font);
+    }
+</style>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,2 +1,6 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+    import Button from "$lib/components/elements/buttons/Button.svelte"
+</script>
+
+<h1>Docs...</h1>
+<Button>Button</Button>
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,13 +3,17 @@ import preprocess from 'svelte-preprocess';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: [
+    preprocess({
+      postcss: true,
+    }),
+  ],

-	kit: {
-		adapter: adapter()
-	}
+  kit: {
+    adapter: adapter(),
+  },
 };

 export default config;