From e9344fc122a8eda551c1198edf36a935663892db Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 17:54:43 +0000
Subject: [PATCH 01/15] :bug: Fixes overlapping edit menu (#311)

---
 src/views/Home.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index bba5b52ba..85a8b9da4 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -23,6 +23,7 @@
       :class="`item-group-container `
         + `orientation-${layout} `
         + `item-size-${itemSizeBound} `
+        + (isEditMode ? 'edit-mode ' : '')
         + (singleSectionView ? 'single-section-view ' : '')
         + (this.colCount ? `col-count-${this.colCount} ` : '')"
       >
@@ -350,6 +351,11 @@ export default {
   /* Hide when search term returns nothing */
   .no-results { display: none; }
 
+  /* Additional spacing when in edit mode */
+  &.edit-mode {
+    margin-bottom: 12rem;
+  }
+
   /* When in single-section view mode */
   &.single-section-view {
     display: block;

From 2acf3965d2eba3857280158cdfc384e71013cd15 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 18:19:37 +0000
Subject: [PATCH 02/15] :bug: Fixes status check dot in edit mode (#301)

---
 src/components/LinkItems/Item.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index e9a18a099..06a6ac9f6 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -5,7 +5,7 @@
       @contextmenu.prevent
       :href="hyperLinkHref"
       :target="anchorTarget"
-      :class="`item ${!icon? 'short': ''} size-${itemSize} ${isAddNew ? 'add-new' : ''}`"
+      :class="`item ${makeClassList}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer" tabindex="0"
       :id="`link-${id}`"
@@ -30,8 +30,10 @@
         :statusSuccess="statusResponse ? statusResponse.successStatus : undefined"
         :statusText="statusResponse ? statusResponse.message : undefined"
       />
+      <!-- Edit icon (displayed only when in edit mode) -->
       <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
     </a>
+    <!-- Right-click context menu -->
     <ContextMenu
       :show="contextMenuOpen && !isAddNew"
       v-click-outside="closeContextMenu"
@@ -43,6 +45,7 @@
       @openMoveItemMenu="openMoveItemMenu"
       @openDeleteItem="openDeleteItem"
     />
+    <!-- Edit and move item menu modals -->
     <MoveItemTo v-if="isEditMode" :itemId="id" />
     <EditItem v-if="editMenuOpen" :itemId="id"
       @closeEditMenu="closeEditMenu"
@@ -114,6 +117,14 @@ export default {
     accumulatedTarget() {
       return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
     },
+    /* Based on item props, adjust class names */
+    makeClassList() {
+      const {
+        icon, itemSize, isAddNew, isEditMode,
+      } = this;
+      return `size-${itemSize} ${!icon ? 'short' : ''} `
+       + `${isAddNew ? 'add-new' : ''} ${isEditMode ? 'is-edit-mode' : ''}`;
+    },
     /* Convert config target value, into HTML anchor target attribute */
     anchorTarget() {
       if (this.isEditMode) return '_self';
@@ -521,13 +532,18 @@ export default {
   }
 }
 
+/* Adjust positioning of status indicator, when in edit mode */
+a.item.is-edit-mode {
+  &.size-medium .status-indicator { top: 1rem; }
+  &.size-small .status-indicator { right: 1rem; }
+  &.size-large .status-indicator { top: 1.5rem; }
+}
+
 </style>
 
 <!-- An un-scoped style tag, since tooltip is outside this DOM tree -->
 <style lang="scss">
-
 .disabled-link {
   pointer-events: none;
 }
-
 </style>

From 65f6882e0db0d9b446b600deb599148f55b2256a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 18:27:55 +0000
Subject: [PATCH 03/15] :bug: Fixes item text flicker on hover (#312)

---
 src/components/LinkItems/Item.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 06a6ac9f6..e66712df5 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -364,10 +364,10 @@ export default {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
     color: var(--item-text-color-hover);
-    position: relative;
-    .tile-title span.text {
-      white-space: pre-wrap;
-    }
+    // position: relative;
+    // .tile-title span.text {
+    //   white-space: pre-wrap;
+    // }
   }
   &:focus {
     outline: 2px solid var(--primary);

From 8bff8335f036bcb0c07264ef4dbca17a3dab1b13 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 18:35:03 +0000
Subject: [PATCH 04/15] :bug: Fix unequal button height in French (#311)

---
 src/components/InteractiveEditor/EditModeSaveMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 2d1b4c954..6050656c7 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -211,7 +211,7 @@ div.edit-mode-bottom-banner {
   /* Main sections */
   .edit-banner-section {
     padding: 0.5rem;
-    height: 100%;
+    height: 90%;
     /* Section sub-titles */
     p.section-sub-title {
       margin: 0;
@@ -234,7 +234,7 @@ div.edit-mode-bottom-banner {
       grid-template-columns: repeat(2, 1fr);
       button {
         margin: 0.25rem;
-        height: fit-content;
+        height: stretch;
       }
       p.section-sub-title {
         grid-column-start: span 2;

From 5f9d1656256dde4cd1bad2fe388795ff0b093ffa Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 18:50:51 +0000
Subject: [PATCH 05/15] :memo: Fixes broken links in docs (#310)

---
 .github/.lycheeexclude                  | 14 ++++++++++++++
 .github/workflows/docs-link-checker.yml |  7 ++++++-
 docs/status-indicators.md               |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 .github/.lycheeexclude

diff --git a/.github/.lycheeexclude b/.github/.lycheeexclude
new file mode 100644
index 000000000..58461b091
--- /dev/null
+++ b/.github/.lycheeexclude
@@ -0,0 +1,14 @@
+# Ignore list, for automated broken link checking
+
+https://fonts.gstatic.com/**
+https://metager.org/meta/**
+https://developers.cloudflare.com/**
+
+http://localhost**
+https://localhost**
+http://192.168**
+https://192.168**
+file:///github/**
+http://[dashy-location]**
+https://[dashy-location]**
+**.local/**
\ No newline at end of file
diff --git a/.github/workflows/docs-link-checker.yml b/.github/workflows/docs-link-checker.yml
index 527b5af91..c344774cc 100644
--- a/.github/workflows/docs-link-checker.yml
+++ b/.github/workflows/docs-link-checker.yml
@@ -11,10 +11,15 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - name: Load Excludes
+        run: |
+          LYCHEE_EXCLUDE=$(sed -e :a  -e 'N;s/\n/ /;ta' .github/.lycheeexclude)
+          echo "LYCHEE_EXCLUDE=$LYCHEE_EXCLUDE" >> $GITHUB_ENV
+
       - name: Check for Broken Links
         uses: lycheeverse/lychee-action@v1.0.8
         with:
-          args: --verbose -a 200,302,304,429 --no-progress **/*.md **/*.html
+          args: --verbose -a 200,302,304,429 --exclude ${{ env.LYCHEE_EXCLUDE }} --exclude-mail --no-progress **/*.md
         env:
           GITHUB_TOKEN: ${{secrets.BOT_GITHUB_TOKEN}}
           LYCHEE_OUT: .github/broken-link-report.md
diff --git a/docs/status-indicators.md b/docs/status-indicators.md
index 7bc866ae5..0c473e8ee 100644
--- a/docs/status-indicators.md
+++ b/docs/status-indicators.md
@@ -65,7 +65,7 @@ If the status is always returning an error, despite the service being online, th
 If your service requires requests to include any authorization in the headers, then use the  `statusCheckHeaders` property, as described above.
 If you are still having issues, it may be because your target application is blocking requests from Dashy's IP. This is a [CORS error](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), and can be fixed by setting the headers on your target app, to include:
 ```
-Access-Control-Allow-Origin: https://location-of-dashy/
+Access-Control-Allow-Origin: https://[dashy-location]/
 Vary: Origin
 ```
 If the URL you are checking is not using HTTPS, then you may need to disable the rejection of insecure requests. This can be done by setting `statusCheckAllowInsecure` to true for a given item.

From 453a3c107c2ffeddc3c7f8d6e69704ff6b34faf3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 18:55:25 +0000
Subject: [PATCH 06/15] :zap: Refactors class names in collapsible

---
 src/components/LinkItems/Collapsable.vue | 49 +++++++++++++++---------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index c2d970845..76732f03e 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    :class="`collapsable ${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`"
+    :class="`collapsable ${rowColSpanClass} ${collapseClass}`"
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
     <input
       :id="sectionKey"
       class="toggle"
       type="checkbox"
-      :checked="getCollapseState()"
+      :checked="isExpanded"
       @change="collapseChanged"
       tabIndex="-1"
     >
@@ -56,6 +56,19 @@ export default {
       if (this.isEditMode) return undefined;
       return `collapsible-${this.uniqueKey}`;
     },
+    collapseClass() {
+      return !this.isExpanded ? ' is-collapsed' : 'is-open';
+    },
+    rowColSpanClass() {
+      const { rows, cols, checkSpanNum } = this;
+      return `${checkSpanNum(cols, 'col')} ${checkSpanNum(rows, 'row')}`;
+    },
+  },
+  data: () => ({
+    isExpanded: false,
+  }),
+  mounted() {
+    this.isExpanded = this.getCollapseState();
   },
   methods: {
     /* Check that row & column span is valid, and not over the max */
@@ -69,29 +82,28 @@ export default {
     sanitizeCustomStyles(userCss) {
       return userCss ? userCss.replace(/[^a-zA-Z0-9- :;.]/g, '') : '';
     },
-    /* If not already done, then add object structure to local storage */
+    /* Returns local storage collapse state data, and if not yet set then initialized is */
     initialiseStorage() {
+      const storageKey = localStorageKeys.COLLAPSE_STATE;
       /* Initialize function will create and set a blank object to storage */
-      const initStorage = () => localStorage.setItem(
-        localStorageKeys.COLLAPSE_STATE, JSON.stringify({}),
-      );
-      if (!localStorage[localStorageKeys.COLLAPSE_STATE]) initStorage(); // Initialise if not set
-      try { // Check storage is valid JSON, and has not been corrupted
-        JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
-      } catch {
+      const initStorage = () => localStorage.setItem(storageKey, JSON.stringify({}));
+      // If not yet set, then call initialize
+      if (!localStorage[storageKey]) {
         initStorage();
+        return {};
       }
-      return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
+      // Otherwise, return value of local storage
+      return JSON.parse(localStorage[storageKey]);
     },
-    /* If not specified by user, get last state from local storage */
+    /* If specified by user, return conf collapse state, otherwise check local storage */
     getCollapseState() {
-      if (this.collapsed !== undefined) return !this.collapsed;
-      const collapseStateObject = this.initialiseStorage();
-      let collapseState = !this.collapsed;
+      if (this.collapsed !== undefined) return !this.collapsed; // Check users config
+      const collapseStateObject = this.initialiseStorage(); // Check local storage
       if (collapseStateObject[this.uniqueKey] !== undefined) {
-        collapseState = collapseStateObject[this.uniqueKey];
+        return collapseStateObject[this.uniqueKey];
       }
-      return collapseState;
+      // Nothing specified, return Open
+      return true;
     },
     /* When section collapsed, update local storage, to remember for next time */
     setCollapseState(id, newState) {
@@ -104,9 +116,10 @@ export default {
     },
     /* Called when collapse state changes, trigger local storage update if needed */
     collapseChanged(whatChanged) {
+      this.isExpanded = whatChanged.srcElement.checked;
       if (this.collapseState === undefined) { // Only run, if user hasn't manually set prop
         this.initialiseStorage();
-        this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
+        this.setCollapseState(this.uniqueKey.toString(), this.isExpanded);
       }
     },
     openEditModal() {

From a3bc07cc69f10ede859f9b0b0c52bf59d869ef65 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 5 Nov 2021 19:07:20 +0000
Subject: [PATCH 07/15] :lipstick: Adds Adventure theme

---
 src/styles/color-themes.scss | 45 ++++++++++++++++++++++++++++++++++++
 src/utils/defaults.js        |  7 +++---
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 7b61a8272..a21d60eb2 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -1112,6 +1112,51 @@ html[data-theme="dashy-docs"] {
   }
 }
 
+html[data-theme="adventure"] {
+  // Main colors
+  --primary: #ffffffe6;
+  --background: #0b1021;
+  --background-darker: #181c3a;
+  // Typography
+  --font-headings: 'Podkova', 'Roboto', serif;
+  --font-body: 'Roboto', serif;
+  // Items
+  --item-background: #181c3a66;
+  --item-background-hover: #181c3a80;
+  --item-shadow: 1px 1px 2px #130f23;
+  --item-hover-shadow: 2px 2px 4px #130f23;
+  // Sections
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--primary);
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-group-outer-background: none;
+  // Background Image
+  body {
+    background: url('https://i.ibb.co/wdqSsGh/adventure-bg.jpg');
+    background-size: cover;
+  }
+  // Remove background from certain components
+  div.home, div.options-outer, div.options-container, section.filter-container,
+  section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn  {
+    background: none;
+  }
+  // Style overides
+  label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
+  .content-inner { border-top: 1px dashed var(--primary); }
+  a.item.size-large:hover { border-left: 3px solid var(--white); }
+  .item.size-large .tile-title p.description { height: 3rem; }
+  .is-collapsed {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    &:hover {
+      background: var(--item-background-hover);
+      box-shadow: var(--item-hover-shadow);
+    }
+  }
+}
+
+
 html[data-theme="oblivion-blue"] {
   --primary: #82a5f3;
 }
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index d698fa870..24bf5e239 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -50,13 +50,14 @@ module.exports = {
     'oblivion',
     'material',
     'material-dark',
-    'dracula',
-    'colorful',
     'dashy-docs',
+    'colorful',
+    'dracula',
+    'adventure',
     'minimal-dark',
     'minimal-light',
-    'nord',
     'nord-frost',
+    'nord',
     'thebe',
     'cyberpunk',
     'matrix',

From a54bdd687f6209b821cb8e5fe6360bd2bbc3d777 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 20:36:24 +0000
Subject: [PATCH 08/15] :lipstick: Adds one-dark theme

---
 src/styles/color-themes.scss | 154 ++++++++++++++++++++++++++++++-----
 src/utils/defaults.js        |   6 +-
 2 files changed, 136 insertions(+), 24 deletions(-)

diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index a21d60eb2..3b7eb46c3 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -752,29 +752,26 @@ html[data-theme='minimal-dark'] {
 html[data-theme='vaporware'] {
   --primary: #09bfe6;
   --background: #100e2c;
-  --background-darker: #6c27ea;
-  --background-darker: linear-gradient(0deg, rgba(108,39,234,1) 0%, rgba(132,76,235,1) 80%);
-  --settings-text-color: #6c27ea;
+  --background-darker: #7b2af1;
+  --settings-text-color: #8d51fc;
   --item-group-outer-background: #096de6;
   --item-group-outer-background: var(--primary);
-  --item-group-background: #190e2c;
-  --item-group-heading-text-color: #190e2c;
-  --item-group-heading-text-color-hover: #5118b9;
+  --item-group-background: var(--background);
+  --item-group-heading-text-color: var(--background);
+  --item-group-heading-text-color-hover: var(--background-darker);
   --item-text-color: var(--primary);
   --item-background: #1a174d;
-  --item-background-hover: #2b2670;
+  --item-background-hover: var(--background);;
   --footer-text-color: var(--white);
   --item-shadow: none;
   --curve-factor: 2px;
   --curve-factor-navbar: 6px;
-  --login-form-color: #09bfe6;
-  --config-settings-background: #100e2c;
-  --status-check-tooltip-background: #100e2c;
-  --description-tooltip-background: #100e2c;
-  
-  .home {
-    background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
-  }
+  --login-form-color: var(--primary);
+  --config-settings-background: var(--background);
+  --status-check-tooltip-background: var(--background);
+  --description-tooltip-background: var(--background);
+  --heading-text-color: var(--background);
+  --search-label-color: var(--background);
 
   div.item-group-container {
     gap: 0.3rem;
@@ -819,13 +816,17 @@ html[data-theme='vaporware'] {
     background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
     background-size: cover;
   }
-  // body {
-  //   background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
-  //   background-size: cover;
-  //   div.home, div.options-outer, div.options-container, section.filter-container {
-  //     background: none;
-  //   }
-  // }
+  body {
+    background: url('https://i.ibb.co/JqcJcGK/vaporwave-sunset-wallpaper.jpg');
+    background-size: cover;
+    background-repeat:no-repeat;
+    background-position: center center;
+    // Remove background from certain components
+    div.home, div.options-outer, div.options-container, section.filter-container,
+    section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn  {
+      background: none;
+    }
+  }
 }
 
 html[data-theme='glow'], html[data-theme=glow-colorful] {
@@ -1156,6 +1157,115 @@ html[data-theme="adventure"] {
   }
 }
 
+html[data-theme="color-block"] {
+  // Main colors
+  --primary: #E94560;
+  --background: #16213E;
+  --background-darker: #0e172b;
+  // Typography
+  --font-headings: 'Podkova', 'Roboto', serif;
+  --font-body: 'Roboto', serif;
+  // Items
+  --item-background: #1b294c;
+  --item-background-hover: var(--item-background);
+  --item-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
+  --item-hover-shadow: 6px 6px 0px var(--background-darker), -5px 0px 0px var(--primary), 2px 2px 9px var(--black);
+  // Sections
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--primary);
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-group-outer-background: none;
+  // Nav Links
+  --nav-link-background-color: var(--background);
+  --nav-link-background-color-hover: var(--background);
+  --nav-link-border-color: transparent;
+  --nav-link-border-color-hover: transparent;
+  --nav-link-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
+  --nav-link-shadow-hover: 6px 6px 0px var(--background-darker), -4px 0px 0px var(--primary), 2px 2px 9px var(--black);
+  // Misc
+  --curve-factor: 4px;
+  --curve-factor-navbar: 8px;
+
+  // Style overrides
+  label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
+  .content-inner { border-top: 1px dashed var(--primary); }
+  .item.size-large .tile-title p.description { height: 3rem; }
+  .item, .nav-outer nav .nav-item { border-radius: 0; }
+  .item.size-large { margin: 0.5rem; }
+  // Show outline when collapsed
+  .is-collapsed {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    &:hover {
+      background: var(--item-background-hover);
+      box-shadow: var(--item-hover-shadow);
+    }
+  }
+}
+
+html[data-theme="one-dark"] {
+
+  // Main colors
+  --primary: #c5cad3;
+  --background: #282c33;
+  --background-darker: #1c1f23;
+  // Typography
+  --font-headings: 'Podkova', 'Roboto', serif;
+  --font-body: 'Roboto', serif;
+  // Items
+  --item-background: var(--background-darker);
+  --item-background-hover: var(--item-background);
+  --item-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
+  --item-hover-shadow: 6px 6px 0px var(--background-darker), -5px 0px 0px var(--primary), 2px 2px 9px var(--black);
+  // Sections
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--primary);
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-group-outer-background: none;
+  // Nav Links
+  --nav-link-background-color: var(--background);
+  --nav-link-background-color-hover: var(--background);
+  --nav-link-border-color: transparent;
+  --nav-link-border-color-hover: transparent;
+  --nav-link-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
+  --nav-link-shadow-hover: 6px 6px 0px var(--background-darker), -4px 0px 0px var(--primary), 2px 2px 9px var(--black);
+  // Misc
+  --curve-factor: 4px;
+  --curve-factor-navbar: 6px;
+
+  // Style overrides
+  label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
+  .content-inner { border-top: 1px dashed var(--primary); }
+  .item.size-large .tile-title p.description { height: 3rem; }
+  .item, .nav-outer nav .nav-item { border-radius: 0; }
+  .item.size-large { margin: 0.5rem; }
+  // Show outline when collapsed
+  .is-collapsed {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    &:hover {
+      background: var(--item-background-hover);
+      box-shadow: var(--item-hover-shadow);
+    }
+  }
+  // Colored Item Accents
+  .item-wrapper:nth-child(1n) { --current: #e06b74; }
+  .item-wrapper:nth-child(2n) { --current: #98c379; }
+  .item-wrapper:nth-child(3n) { --current: #e5c07a; }
+  .item-wrapper:nth-child(4n) { --current: #62aeef; }
+  .item-wrapper:nth-child(5n) { --current: #c678dd; }
+  .item-wrapper:nth-child(6n) { --current: #55b6c2; }
+  .item-wrapper .item {
+    color: var(--current);
+    box-shadow: -3px 0px 0px var(--current), 1px 1px 3px #000000e6;
+    &:hover {
+      box-shadow: -5px 0px 0px var(--current), 2px 2px 3px #000000e6;
+    }
+  }
+}
+
 
 html[data-theme="oblivion-blue"] {
   --primary: #82a5f3;
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 24bf5e239..78db3f25d 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -52,16 +52,18 @@ module.exports = {
     'material-dark',
     'dashy-docs',
     'colorful',
+    'one-dark',
     'dracula',
     'adventure',
-    'minimal-dark',
-    'minimal-light',
     'nord-frost',
     'nord',
+    'minimal-dark',
+    'minimal-light',
     'thebe',
     'cyberpunk',
     'matrix',
     'matrix-red',
+    'color-block',
     'glow',
     'raspberry-jam',
     'bee',

From 20aed447d69ab3fe34e875f5ebf701c2ce7b524a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 20:58:00 +0000
Subject: [PATCH 09/15] :lipstick: Adds customizable shoaddow for
 nav-link-shadow

---
 src/components/PageStrcture/Nav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PageStrcture/Nav.vue b/src/components/PageStrcture/Nav.vue
index 3e228e7ec..09261b529 100644
--- a/src/components/PageStrcture/Nav.vue
+++ b/src/components/PageStrcture/Nav.vue
@@ -64,8 +64,7 @@ export default {
       outline: none;
       border: none;
       border-radius: var(--curve-factor);
-      -webkit-box-shadow: 1px 1px 2px #232323;
-      box-shadow: 1px 1px 2px #232323;
+      box-shadow: var(--nav-link-shadow);
       color: var(--nav-link-text-color);
       background: var(--nav-link-background-color);
       border: 1px solid var(--nav-link-border-color);
@@ -74,6 +73,7 @@ export default {
         color: var(--nav-link-text-color-hover);
         background: var(--nav-link-background-color-hover);
         border: 1px solid var(--nav-link-border-color-hover);
+        box-shadow: var(--nav-link-shadow-hover);
       }
     }
   }

From 6fcd993798b87cb5db3b134051f594523d73712d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 20:58:36 +0000
Subject: [PATCH 10/15] :art: Refactors color pallete to inherit top-level vars

---
 src/styles/color-palette.scss |   2 +
 src/styles/color-themes.scss  | 241 +++++++++++++++++-----------------
 2 files changed, 125 insertions(+), 118 deletions(-)

diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 71bcc2d50..d672c2ebb 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -42,6 +42,8 @@
   --nav-link-background-color-hover: #607d8b33;
   --nav-link-border-color: transparent;
   --nav-link-border-color-hover: var(--primary);
+  --nav-link-shadow: 1px 1px 2px #232323;
+  --nav-link-shadow-hover: 1px 1px 2px #232323;
   // Link items and sections
   --item-text-color: var(--primary);
   --item-text-color-hover: var(--item-text-color);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 3b7eb46c3..2f800cfcd 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -1,12 +1,12 @@
 
 html[data-theme='callisto'] {
+  --primary: #00CCB4;
   --background: #141b33;
   --background-darker: #060913;
   --item-group-background: #0b1021;
-  --item-background: #141b33;
-  --item-background-hover: #060913;
+  --item-background: var(--background);
+  --item-background-hover: var(--background-darker);
   --item-hover-shadow: 0 1px 3px #00ccb4b3, 0 1px 2px #00ccb4bf;
-  --primary: #00CCB4;
   --font-body: 'Inconsolata', 'Georgia', sans-serif;
   --font-headings: 'PTMono', 'Courier New', monospace;
 }
@@ -16,7 +16,7 @@ html[data-theme='thebe'] {
   --background-darker: #060913;
   --item-group-background: #0b1021;
   --item-background: #141b33;
-  --item-background-hover: #060913;
+  --item-background-hover: var(--background-darker);
   --item-hover-shadow: 0 1px 3px #9660ecb3, 0 1px 2px #9660ecbf;
   --primary: #b187f5;
   --item-group-outer-background: #9660EC
@@ -26,17 +26,17 @@ html[data-theme='thebe'] {
 
 html[data-theme='dracula'] {
   --font-headings: 'Allerta Stencil', sans-serif;
-  --primary: #7a8cc5;
+  --primary: #98ace9;
   --background: #44475a;
   --background-darker: #282a36;
-  --item-group-background: #282a36;
+  --item-group-background: var(--background-darker);
   --item-background: none;
   --item-background-hover: #191b22;
   --item-shadow: none;
   --item-hover-shadow: none;
-  --settings-text-color: #98ace9;
-  --config-settings-color: #98ace9;
-  --item-group-outer-background: #282a36;
+  --settings-text-color: var(--primary);
+  --config-settings-color: var(--primary);
+  --item-group-outer-background: var(--background-darker);
   .item { border: 1px solid var(--primary); }
   .collapsable:nth-child(1n) label { color: #8be9fd; }
   .collapsable:nth-child(2n) label { color: #50fa7b; }
@@ -47,45 +47,48 @@ html[data-theme='dracula'] {
 
 html[data-theme='bee'] {
   --primary: #c3eb5c;
+  --background: #0b1021;
   --item-background: #1c2636;
-  --item-group-background: #0b1021;
-  --nav-link-background-color: #0b1021;
+  --item-group-background: var(--background);
+  --nav-link-background-color: var(--background);
   --font-headings: 'Sniglet', cursive;
 }
 
 html[data-theme='raspberry-jam'] {
   --primary: #eb2d6c;
+  --background: #0b1021;
   --item-background: #1c2636;
-  --item-group-background: #0b1021;
-  --nav-link-background-color: #0b1021;
-  --config-code-background: #0b1021;
-  --config-code-color: #eb2d6c;
+  --item-group-background: var(--background);
+  --nav-link-background-color: var(--background);
+  --config-code-background: #1c1e24;
+  --config-code-color: var(--primary);
   --font-headings: 'Sniglet', cursive;
 }
 
 html[data-theme='tiger'] {
   --primary: #f58233;
+  --background: #0b1021;
   --item-background: #1c2636;
-  --item-group-background: #0b1021;
-  --nav-link-background-color: #0b1021;
+  --item-group-background: var(--background);
+  --nav-link-background-color: var(--background);
   --font-headings: 'Sniglet', cursive;
 }
 
 html[data-theme='matrix-red'] {
-  --background: #000;
-  --background-darker: #000;
-  --primary: red;
-  --outline-color: red;
-  --curve-factor: 0px;
+  --background: var(--black);
+  --background-darker: var(--black);
+  --primary: #f00;
+  --outline-color: var(--primary);
+  --curve-factor: 0;
   --font-body: 'Cutive Mono', monospace;
   --font-headings: 'VT323', monospace;
 }
 
 html[data-theme='matrix'] {
-  --background: #000;
-  --background-darker: #000;
+  --background: var(--black);
+  --background-darker: var(--black);
   --primary: #2bca2b;
-  --outline-color: #2bca2b;
+  --outline-color: var(--primary);
   --curve-factor: 0px;
   --font-body: 'Cutive Mono', monospace;
   --font-headings: 'VT323', monospace;
@@ -133,33 +136,34 @@ html[data-theme='blue-purple'] {
 }
 
 html[data-theme='hacker-girl'] {
-  --background: #000;
-  --background-darker: #000;
+  --background: var(--black);
+  --background-darker: var(--black);
   --primary: #e435f1;
-  --outline-color: #e435f1;
+  --outline-color: var(--primary);
   --curve-factor: 0px;
   --font-body: 'Cutive Mono', monospace;
   --font-headings: 'VT323', monospace;
 }
 
 html[data-theme='high-contrast-light'] {
-  --background: #fff;
-  --background-darker: #fff;
-  --item-group-background: #fff;
-  --item-background: #fff;
-  --primary: #000;
-  --outline-color: #000;
+  --primary: var(--black);
+  --background: var(--white);
+  --background-darker: var(--white);
+  --item-group-background: var(--background-darker);
+  --item-background: var(--background);
+  --outline-color: var(--primary);
   --curve-factor: 0px;
-  --config-code-color: #000;
+  --config-code-color:  var(--primary);
   --font-headings: 'PTMono', 'Courier New', monospace;
 }
 
 html[data-theme='high-contrast-dark'] {
-  --background: #000;
-  --background-darker: #000;
-  --item-group-background: #000;
-  --primary: #fff;
-  --outline-color: #fff;
+  --primary: var(--white);
+  --background: var(--black);
+  --background-darker: var(--black);
+  --item-group-background: var(--background-darker);
+  --item-background: var(--background);
+  --outline-color: var(--primary);
   --curve-factor: 0px;
   --font-headings: 'PTMono', 'Courier New', monospace;
 }
@@ -191,42 +195,42 @@ html[data-theme='nord-frost'] {
 html[data-theme='material-original'] {
   --font-body: 'Roboto', serif;
   --primary: #29B6F6;
-  --settings-text-color: #01579b;
   --background: #f1f1f1;
   --background-darker: #01579B;
-  --item-group-heading-text-color: #01579B;
+  --settings-text-color: var(--background-darker);
+  --item-group-heading-text-color: var(--background-darker);
   --item-group-shadow: none;
   --item-group-outer-background: none;
   --item-group-background: none;
-  --item-background: #fff;
-  --item-background-hover: #fff;
-  --settings-background: #29B6F6;
-  --search-container-background: #29B6F6;
+  --item-background: var(--white);
+  --item-background-hover: var(--white);
+  --settings-background: var(--primary);
+  --search-container-background: var(--primary);
   --curve-factor: 2px;
   --curve-factor-navbar: 0;
   --item-group-padding: 5px 0 0;
-  --item-text-color: #01579B;
+  --item-text-color: var(--background-darker);
   --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
   --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
   --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
   --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
   --settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
-  --welcome-popup-background: #01579b;
+  --welcome-popup-background: var(--background-darker);
   --welcome-popup-text-color: #ffffff;
-  --config-code-color: #000;
-  --item-group-heading-text-color-hover: #01579b;
-  --config-settings-background: #01579b;
-  --config-settings-color: #fff;
-  --interactive-editor-background: #01579b;
-  --interactive-editor-color: #fff;
-  --interactive-editor-background-darker: #29B6F6;
-  --heading-text-color: #fff;
+  --config-code-color: var(--black);
+  --item-group-heading-text-color-hover: var(--background-darker);
+  --config-settings-background: var(--background-darker);
+  --config-settings-color: var(--white);
+  --interactive-editor-background: var(--background-darker);
+  --interactive-editor-color: var(--white);
+  --interactive-editor-background-darker: var(--primary);
+  --heading-text-color: var(--white);
   --status-check-tooltip-background: #f2f2f2;
-  --status-check-tooltip-color: #01579b;
+  --status-check-tooltip-color: var(--background-darker);
   --description-tooltip-background: #f2f2f2;
-  --description-tooltip-color: #01579b;
-  --login-form-background: #fff;
-  --about-page-accent: #000;
+  --description-tooltip-color: var(--background-darker);
+  --login-form-background: var(--white);
+  --about-page-accent: var(--black);
   --about-page-color: var(--background-darker);
   --about-page-background: var(--background);
   --context-menu-background: var(--white);
@@ -293,14 +297,15 @@ html[data-theme='colorful'] {
   --font-headings: 'Podkova', monospace;
   --primary: #e8eae1;
   --background: #0b1021;
-  --item-background: #05070e;
-  --item-background-hover: #0b1021;
+  --background-darker: #05070e;
+  --item-background: var(--background-darker);
+  --item-background-hover: var(--background);
   --item-group-background: transparent;
-  --item-group-outer-background: #05070e;
-  --item-group-heading-text-color: #e8eae1;
-  --item-group-heading-text-color-hover: #fff;
-  --item-hover-shadow: 1px 4px 6px #000000;
-  --nav-link-background-color: #141826;
+  --item-group-outer-background: var(--background-darker);
+  --item-group-heading-text-color: var(--primary);
+  --item-group-heading-text-color-hover: var(--primary);
+  --item-hover-shadow: 1px 4px 6px var(--black);
+  --nav-link-background-color: var(--background);
   .item-wrapper:nth-child(1n) { .item { color: #eb5cad; border: 1px solid #eb5cad; } }
   .item-wrapper:nth-child(2n) { .item { color: #985ceb; border: 1px solid #985ceb; } }
   .item-wrapper:nth-child(3n) { .item { color: #5c90eb; border: 1px solid #5c90eb; } }
@@ -313,12 +318,12 @@ html[data-theme='colorful'] {
     opacity: 0.85;
     outline: none;
     background: currentColor;
-    span.text, p.description { color: #05070e; }
+    span.text, p.description { color: var(--background-darker); }
     i.fas, i.fab, i.far, i.fal, i.fad {
       filter: drop-shadow(1px 3px 2px var(--transparent-50));
-      color: #05070e;
+      color: var(--background-darker);
     }
-    svg path { fill: #05070e; }
+    svg path { fill: var(--background-darker); }
   }
   h1, h2, h3, h4 {
     font-weight: normal;
@@ -505,35 +510,35 @@ html[data-theme='material'] {
   --item-group-outer-background: none;
   --item-group-shadow: none;
   --item-group-background: none;
-  --item-background: #fff;
-  --item-background-hover: #fff;
+  --item-background: var(--white);
+  --item-background-hover: var(--white);
   --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
   --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
-  --item-text-color: #363636;
-  --item-group-heading-text-color-hover: #363636;
+  --item-text-color: var(--primary);
+  --item-group-heading-text-color-hover: var(--primary);
   --item-icon-transform-hover: none;
   --nav-link-background-color: #0c4eba;
-  --nav-link-text-color: #fff;
+  --nav-link-text-color: var(--white);
   --nav-link-border-color: #0c4eba;
-  --settings-text-color: #363636;
-  --config-code-color: #363636;
+  --settings-text-color: var(--primary);
+  --config-code-color: var(--primary);
   --config-settings-background: #f5f5f5;
   --config-settings-color: #473f3f;
   --interactive-editor-color: #473f3f;
   --interactive-editor-background: #f5f5f5;
-  --interactive-editor-background-darker: #fff;
-  --heading-text-color: #fff;
+  --interactive-editor-background-darker: var(--white);
+  --heading-text-color: var(--white);
   --curve-factor: 3px;
   --curve-factor-navbar: 8px;
   --search-container-background: #4285f4;
   --welcome-popup-text-color: #f5f5f5;
   --footer-text-color: #f5f5f5cc;
   // --login-form-background-secondary: #f5f5f5cc;
-  --context-menu-background: #fff;
+  --context-menu-background: var(--white);
   --context-menu-secondary-color: #f5f5f5;
   --transparent-white-50: #00000080;
-  --status-check-tooltip-background: #fff;
-  --description-tooltip-background: #fff;
+  --status-check-tooltip-background: var(--white);
+  --description-tooltip-background: var(--white);
   --description-tooltip-color: #473f3f;
   --side-bar-background-lighter: #0c4eba;
   --side-bar-item-background: #f5f5f5;
@@ -543,10 +548,10 @@ html[data-theme='material'] {
   --minimal-view-settings-color: var(--primary);
   --minimal-view-section-heading-color: var(--primary);
   --minimal-view-section-heading-background: #f6f6f6;
-  --minimal-view-search-background: #fff;
+  --minimal-view-search-background: var(--white);
   --minimal-view-search-color: var(--primary);
   --minimal-view-group-color: var(--primary);
-  --minimal-view-group-background: #fff;
+  --minimal-view-group-background: var(--white);
 
   .minimal-section-inner.selected, div.minimal-section-heading  {
     border: none;
@@ -568,17 +573,17 @@ html[data-theme='material'] {
 
   header {
     background: #4285f4;
-    color: #fff;
+    color: var(--white);
     .page-titles span.subtitle {
       text-shadow: none;
     }
   }
   footer {
     opacity: 1;
-    color: #fff;
+    color: var(--white);
   }
   section.filter-container form label {
-    color: #fff;
+    color: var(--white);
   }
   .prism-editor-wrapper {
     background: #f5f5f5;
@@ -682,28 +687,28 @@ html[data-theme='minimal-light'] {
   --item-background-hover: #f2f2f2;
   --item-shadow: none;
   --item-hover-shadow: none;
-  --item-text-color: #101931;
-  --item-group-heading-text-color-hover: #101931;
-  --settings-text-color: #101931;
-  --config-code-color: #101931;
+  --item-text-color: var(--background-darker);
+  --item-group-heading-text-color-hover: var(--background-darker);
+  --settings-text-color: var(--background-darker);
+  --config-code-color: var(--background-darker);
   --nav-link-background-color: none;
-  --search-container-background: #fff;
+  --search-container-background: var(--white);
   --curve-factor: 4px;
   --curve-factor-navbar: 8px;
   --status-check-tooltip-background: #f2f2f2;
-  --status-check-tooltip-color: #000;
+  --status-check-tooltip-color: var(--black);
   --description-tooltip-background: #f2f2f2;
-  --description-tooltip-color: #000;
-  --login-form-color: #101931;
+  --description-tooltip-color: var(--black);
+  --login-form-color: var(--background-darker);
   --about-page-background: var(--background);
   --about-page-color: var(--background-darker);
   --context-menu-color: var(--background-darker);
   --context-menu-secondary-color: var(--primary);
   section.filter-container {
-    background: #fff;
+    background: var(--white);
     border-bottom: 1px dashed #00000038;
     input#filter-tiles {
-      border: 1px solid #101931;
+      border: 1px solid var(--background-darker);
     }
   }
 }
@@ -716,18 +721,18 @@ html[data-theme='minimal-dark'] {
   --item-group-shadow: none;
   --item-group-background: none;
   --item-background: none;
-  --item-background-hover: #090b0e;
+  --item-background-hover: var(--background-darker);
   --item-shadow: none;
   --item-hover-shadow: none;
-  --item-text-color: #fff;
-  --item-group-heading-text-color-hover: #fff;
-  --settings-text-color: #fff;
-  --config-code-color: #fff;
+  --item-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--white);
+  --settings-text-color: var(--white);
+  --config-code-color: var(--white);
   --nav-link-background-color: none;
-  --search-container-background: #14171e;
+  --search-container-background: var(--background);
   --curve-factor: 4px;
   --curve-factor-navbar: 8px;
-  --item-group-heading-text-color: #fff;
+  --item-group-heading-text-color: var(--white);
   --item-group-heading-text-color-hover: #ffffffbf;
   --about-page-background: var(--background);
   --about-page-color: var(--primary);
@@ -740,7 +745,7 @@ html[data-theme='minimal-dark'] {
     background: #14171e;
     border-bottom: 1px dashed #ffffff38;
     input#filter-tiles {
-      border: 1px solid #fff;
+      border: 1px solid var(--white);
     }
   }
 
@@ -832,17 +837,17 @@ html[data-theme='vaporware'] {
 html[data-theme='glow'], html[data-theme=glow-colorful] {
   --primary: #5c6da9;
   --background: #f6f6f6;
-  --background-darker: #fff;
+  --background-darker: var(--white);
   --curve-factor: 12px;
-  --item-group-background: #fff;
-  --item-group-outer-background: #fff;
-  --item-background: #fff;
+  --item-group-background: var(--white);
+  --item-group-outer-background: var(--white);
+  --item-background: var(--white);
   --font-headings: 'Sniglet', cursive;
 
-  --item-group-heading-text-color: #5c6da9;
-  --item-group-heading-text-color-hover: #5c6da9;
+  --item-group-heading-text-color: var(--primary);
+  --item-group-heading-text-color-hover: var(--primary);
   --item-group-shadow: 0 5px 16px 0 #9f72ff33;
-  --item-background-hover: #fff;
+  --item-background-hover: var(--white);
   --item-shadow: 0 1px 5px 0 #8656ef80;
   --item-hover-shadow: 0 1px 8px 0 #8656efa6;
   --item-icon-transform: drop-shadow(1px 2px 3px var(--transparent-50)) saturate(0.95);
@@ -884,7 +889,7 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
     --item-group-shadow: 0 5px 16px 0 #9f72ff33;
     --item-group-heading-text-color: #8656ef;
     --item-group-heading-text-color-hover: #783cfb;
-    --item-background-hover: #fff;
+    --item-background-hover: var(--white);
     --item-shadow: 0 1px 5px 0 #8656ef80;
     --item-hover-shadow: 0 1px 8px 0 #8656efa6;
     --item-icon-transform: drop-shadow(1px 2px 3px #8656ef80) saturate(0.95);
@@ -895,7 +900,7 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
     --item-group-shadow: 0 5px 16px 0 #728cff33;
     --item-group-heading-text-color: #d356ef;
     --item-group-heading-text-color-hover: #d73bf9;
-    --item-background-hover: #fff;
+    --item-background-hover: var(--white);
     --item-shadow: 0 1px 5px 0 #d356ef80;
     --item-hover-shadow: 0 1px 8px 0 #d356efa6;
     --item-icon-transform: drop-shadow(1px 2px 3px #d356ef80) saturate(0.95);
@@ -906,7 +911,7 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
     --item-group-shadow: 0 5px 16px 0 #728cff33;
     --item-group-heading-text-color: #56ddef;
     --item-group-heading-text-color-hover: #3cdefb;
-    --item-background-hover: #fff;
+    --item-background-hover: var(--white);
     --item-shadow: 0 1px 5px 0 #56ddef80;
     --item-hover-shadow: 0 1px 8px 0 #56ddefa6;
     --item-icon-transform: drop-shadow(1px 2px 3px #56ddef80) saturate(0.95);
@@ -987,7 +992,7 @@ html[data-theme="dashy-docs"] {
   --background: #202020;
   --background-darker: #121212;
   --item-group-background: none;
-  --item-group-outer-background: #121212;
+  --item-group-outer-background: var(--background-darker);
   --item-group-heading-text-color: var(--background);
   --item-group-heading-text-color-hover: var(--background);
   --item-background: var(--background);
@@ -1122,8 +1127,8 @@ html[data-theme="adventure"] {
   --font-headings: 'Podkova', 'Roboto', serif;
   --font-body: 'Roboto', serif;
   // Items
-  --item-background: #181c3a66;
-  --item-background-hover: #181c3a80;
+  --item-background: #181c3a80;
+  --item-background-hover: #181c3a99;
   --item-shadow: 1px 1px 2px #130f23;
   --item-hover-shadow: 2px 2px 4px #130f23;
   // Sections

From 7171632433858db6346906b04541975f46a6cb16 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 22:20:02 +0000
Subject: [PATCH 11/15] :sparkles: Adds option to change font from UI

---
 src/assets/locales/en.json                   |  1 +
 src/components/Settings/CustomThemeMaker.vue | 54 ++++++++++++++++----
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index c4a69b7f1..219168588 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -101,6 +101,7 @@
     "export-button": "Export Custom Variables",
     "reset-button": "Reset Styles for",
     "show-all-button": "Show All Variables",
+    "change-fonts-button": "Change Fonts",
     "save-button": "Save",
     "cancel-button": "Cancel",
     "saved-toast": "{theme} Updated Successfully",
diff --git a/src/components/Settings/CustomThemeMaker.vue b/src/components/Settings/CustomThemeMaker.vue
index 7e70daaf7..babaf64f5 100644
--- a/src/components/Settings/CustomThemeMaker.vue
+++ b/src/components/Settings/CustomThemeMaker.vue
@@ -27,22 +27,25 @@
         </v-swatches>
         <input v-else
           :id="`color-input-${colorName}`"
-          :value="customColors[colorName]"
-          class="misc-input"
+          v-model="customColors[colorName]"
+          :class="`misc-input ${isTextual(colorName, customColors[colorName]) ? 'long-input' : ''}`"
           @input="setVariable(colorName, customColors[colorName])"
         />
       </div> <!-- End of color list -->
     </div>
     <!-- More options: Export, Reset, Show all -->
+    <p @click="showFontVariables" class="action-text-btn show-all-vars-btn">
+        {{ $t('theme-maker.change-fonts-button') }}
+    </p>
+    <p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
+       {{ $t('theme-maker.show-all-button') }}
+    </p>
     <p @click="exportToClipboard" class="action-text-btn">
       {{ $t('theme-maker.export-button') }}
     </p>
     <p @click="resetAndSave" class="action-text-btn">
        {{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
     </p>
-    <p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
-       {{ $t('theme-maker.show-all-button') }}
-    </p>
     <!-- Save and cancel buttons -->
     <div class="action-buttons">
       <Button :click="saveChanges">
@@ -138,6 +141,13 @@ export default {
       });
       return data;
     },
+    /* Adds font variables to list */
+    showFontVariables() {
+      const currentVariables = this.customColors;
+      const fonts = ['font-headings', 'font-body', 'font-monospace'];
+      const fontVariables = this.makeInitialData(fonts);
+      this.customColors = { ...currentVariables, ...fontVariables };
+    },
     /* Find all available CSS variables for the current applied theme */
     findAllVariableNames() {
       const availableVariables = Array.from(document.styleSheets)
@@ -146,7 +156,7 @@ export default {
           ((acc, sheet) => ([
             ...acc,
             ...Array.from(sheet.cssRules).reduce(
-              (def, rule) => (rule.selectorText === ':root'
+              (def, rule) => (rule.selectorText === ':root' || rule.selectorText === 'html'
                 ? [...def, ...Array.from(rule.style).filter(name => name.startsWith('--'))] : def),
               [],
             ),
@@ -159,13 +169,25 @@ export default {
     /* Returns a complmenting text color for the palete input foreground */
     /* White if the color is dark, otherwise black */
     getForegroundColor(colorHex) {
+      /* Converts a 3-digit hex code to a 6-digit hex code (e.g. #f01 --> #ff0011) */
+      const threeToSix = (hex) => {
+        let digit = hex;
+        digit = digit.split('').map((item) => (item === '#' ? item : item + item)).join('');
+        return digit;
+      };
+      /* Converts hex code to RGB (e.g. #ff0011 --> rgb(255,0,0) ) */
       const hexToRgb = (hex) => {
-        const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        let hexCode = hex.slice(0, 7);
+        if (hex.startsWith('#') && hex.length === 4) hexCode = threeToSix(hexCode);
+        const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexCode);
         if (!colorParts || colorParts.length < 3) return 'black';
         const parse = (index) => parseInt(colorParts[index], 16);
         return colorParts ? { r: parse(1), g: parse(2), b: parse(3) } : null;
       };
+      /* Given an RGB value, return the lightness ratio */
       const getLightness = (rgb) => (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+      if (!colorHex.startsWith('#')) return 'white'; // Not a hex, do nothing
+      // Convert hex to RGB obj, get lightness, and return opposing color
       return getLightness(hexToRgb(colorHex.trim())) < 100 ? 'white' : 'black';
     },
     /* The contents of the style attribute, to set background and text color of swatch */
@@ -179,6 +201,7 @@ export default {
       // If value is a dimension, then it aint a color
       if ((/rem|px|%/.exec(variableValue))) return false;
       const nonColorVariables = [ // Known non-color variables
+        '--font-headings', '--font-body', '--font-monospace',
         '--curve-factor', '--curve-factor-navbar', '--curve-factor-small',
         '--dimming-factor', '--scroll-bar-width', '--header-height', '--footer-height',
         '--item-group-padding', '--item-shadow', '--item-hover-shadow:', '--item-icon-transform',
@@ -189,6 +212,10 @@ export default {
       if (nonColorVariables.includes(`--${variableName}`)) return false;
       return true; // It must be a color, we'll use the color picker
     },
+    /* Determine if a given key is that of a known font variable, or has a long value */
+    isTextual(varName, varValue) {
+      return varName.startsWith('font-') || (varValue && varValue.length > 12);
+    },
   },
 };
 </script>
@@ -202,7 +229,7 @@ div.theme-configurator-wrapper {
   right: 1rem;
   width: 16rem;
   min-height: 12rem;
-  max-height: 28rem;
+  max-height: 32rem;
   padding: 0.5rem;
   z-index: 5;
   overflow-y: visible;
@@ -218,7 +245,7 @@ div.theme-configurator-wrapper {
   }
 
   div.color-row-container {
-    max-height: 16rem;
+    max-height: 20rem;
     overflow-y: visible;
     @extend .scroll-bar;
     div.color-row {
@@ -250,6 +277,15 @@ div.theme-configurator-wrapper {
       box-shadow: inset 0 0 4px 4px #00000080;
       outline: none;
     }
+    &.long-input {
+      cursor: text;
+      font-style: italic;
+      font-weight: 200;
+      padding: 0.5rem 0.2rem;
+      font-size: 0.75rem;
+      width: 9rem;
+      &:hover { box-shadow: none; }
+    }
   }
 }
 

From e07c5e6b4e2934f62b1e03a317d0d75155b220de Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 22:34:42 +0000
Subject: [PATCH 12/15] :woman_technologist: Adds author field to package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 475617be2..78fdcb2a5 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "1.9.0",
   "license": "MIT",
   "main": "server",
+  "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",
   "scripts": {
     "start": "node server",
     "dev": "vue-cli-service serve",

From da929d09809e600c7fd077a26d1269ee885a035c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 22:35:27 +0000
Subject: [PATCH 13/15] :bookmark: Bumps to V 1.9.1 and updates changelog

---
 .github/CHANGELOG.md | 6 ++++++
 package.json         | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index dc5f6d7c4..2f8ee63f2 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 💄 1.9.1 - Editor and Theming Fixes and Improvements [PR #319](https://github.com/Lissy93/dashy/pull/319)
+- Bug fixes for interactive editor: #310, #311, #312
+- Adds option to modify text font through the UI
+- Adds two new themes: One Dark and Adventure
+- Theming stylesheet refactor, better inheritance
+
 ## 🐳 1.9.0 - Alpha of Dashy-Lite Docker Container [PR #306](https://github.com/Lissy93/dashy/pull/306)
 - Create an Alpine-based container, that serves the built app up with plain NGINX, instead of Node.
 - This is much lighter, but doesn't currently support any of the server-side actions (like status-checks, and writing changes to disk)
diff --git a/package.json b/package.json
index 78fdcb2a5..5964c4746 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",

From 6863121916d24b124a3658fde6246c9607d89a82 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 22:40:05 +0000
Subject: [PATCH 14/15] :bug: Closes editor when saved locally

---
 src/components/InteractiveEditor/EditModeSaveMenu.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 6050656c7..5f94da6f5 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -152,6 +152,7 @@ export default {
       }
       InfoHandler('Config has succesfully been saved in browser storage', 'Config Update');
       this.showToast(this.$t('config-editor.success-msg-local'), true);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
     writeToDisk() {
       // 1. Convert JSON into YAML

From 63af8b4d160d387c942412f3c97a224489396fae Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 6 Nov 2021 22:44:23 +0000
Subject: [PATCH 15/15] :vertical_traffic_light: Updates order of PR status
 badges

---
 .github/pr-badge.yml | 142 +++++++++++++++++++++----------------------
 1 file changed, 71 insertions(+), 71 deletions(-)

diff --git a/.github/pr-badge.yml b/.github/pr-badge.yml
index c44f1faf9..54ba4e22d 100644
--- a/.github/pr-badge.yml
+++ b/.github/pr-badge.yml
@@ -1,77 +1,6 @@
 # Config file for pull-request-badge. See: https://pullrequestbadge.com/ by @stefanbuck
 # Dynamically inserts status badges into PR description, based on certain conditions
 
-# Checks if the required sections are missing
-- label: ⚠️Missing
-  message: Category
-  color: '#f25265'
-  when: $payload.pull_request.body.includes('Category') === false
-- label: ⚠️Missing
-  message: Overview
-  color: '#f25265'
-  when: $payload.pull_request.body.includes('Overview') === false
-- label: ⚠️Missing
-  message: Quality Checklist
-  color: '#f25265'
-  when: $payload.pull_request.body.includes('Code Quality Checklist') === false
-- label: ⚠️Description
-  message: Incomplete
-  color: '#f25265'
-  when: $payload.pull_request.body.length < 25
-- label: ⚠️Missing
-  message: Label
-  color: '#f25265'
-  when: $labels.length == 0
-
-# Show note when task list has unfinished items
-- label: ⚠️Notice
-  message: Unchecked Tasks
-  when: $payload.pull_request.body.includes('- [ ] ')
-  color: '#f25265'
-
-# Show badge indicating PR status
-- label: Status
-  message: ✏️ Draft
-  when: $isDraft
-  color: '#ffa933'
-- label: Status
-  message: 🧱 Work in Progress
-  when: $payload.pull_request.title.includes('WIP')
-  color: '#29e3f4'
-- label: Status
-  message: ✅ Ready
-  color: '#3ef963'
-  when: $labels.includes('🔀 Ready for Merge')
-
-# Add size label based on very large or tiny PRs
-- label: PR Size
-  message: Extra Large
-  color: '#f9833e'
-  when: '$additions > 1000'
-- label: PR Size
-  message: Large
-  color: '#f4b546'
-  when: '$additions > 500 && $additions < 1000'
-- label: PR Size
-  message: Medium
-  color: '#f3ff59'
-  when: '$additions > 10 && $additions < 500'
-- label: PR Size
-  message: Quick
-  color: '#3eef8b'
-  when: '$additions < 10'
-
-# Show PR number, to destination and from destination
-- label: '#$prNumber'
-  message: '$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name'
-  color: '#ab5afc'
-  url: 'https://github.com/$slug/tree/$branchName'
-
-# Show total code added minus deleted
-- label: New Code
-  message: 'Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions'
-  color: '#dddd00'
-  
 # Show submitting user's username and profile link
 - label: 💕 Submitted by
   message: $payload.pull_request.user.login
@@ -125,6 +54,77 @@
   color: '#39b0fd'
   when: $labels.includes('🌐 Language')
 
+# Add size label based on very large or tiny PRs
+- label: PR Size
+  message: Extra Large
+  color: '#f9833e'
+  when: '$additions > 1000'
+- label: PR Size
+  message: Large
+  color: '#f4b546'
+  when: '$additions > 500 && $additions < 1000'
+- label: PR Size
+  message: Medium
+  color: '#f3ff59'
+  when: '$additions > 10 && $additions < 500'
+- label: PR Size
+  message: Quick
+  color: '#3eef8b'
+  when: '$additions < 10'
+
+# Show badge indicating PR status
+- label: Status
+  message: ✏️ Draft
+  when: $isDraft
+  color: '#ffa933'
+- label: Status
+  message: 🧱 Work in Progress
+  when: $payload.pull_request.title.includes('WIP')
+  color: '#29e3f4'
+- label: Status
+  message: ✅ Ready
+  color: '#3ef963'
+  when: $labels.includes('🔀 Ready for Merge')
+
+# Show PR number, to destination and from destination
+- label: '#$prNumber'
+  message: '$payload.pull_request.user.login /$payload.pull_request.head.ref → $payload.repository.full_name'
+  color: '#ab5afc'
+  url: 'https://github.com/$slug/tree/$branchName'
+
+# Show total code added minus deleted
+- label: New Code
+  message: 'Commits: $payload.pull_request.commits | Files Changed: $payload.pull_request.changed_files | Additions: $payload.pull_request.additions-$payload.pull_request.deletions'
+  color: '#dddd00'
+  
+# Checks if the required sections are missing
+- label: ⚠️Missing
+  message: Category
+  color: '#f25265'
+  when: $payload.pull_request.body.includes('Category') === false
+- label: ⚠️Missing
+  message: Overview
+  color: '#f25265'
+  when: $payload.pull_request.body.includes('Overview') === false
+- label: ⚠️Missing
+  message: Quality Checklist
+  color: '#f25265'
+  when: $payload.pull_request.body.includes('Code Quality Checklist') === false
+- label: ⚠️Description
+  message: Incomplete
+  color: '#f25265'
+  when: $payload.pull_request.body.length < 25
+- label: ⚠️Missing
+  message: Label
+  color: '#f25265'
+  when: $labels.length == 0
+
+# Show note when task list has unfinished items
+- label: ⚠️Notice
+  message: Unchecked Tasks
+  when: $payload.pull_request.body.includes('- [ ] ')
+  color: '#f25265'
+
 # Show warning, when certain tags are applied
 - label: Warning
   message: ⛔ Do Not Merge