From ec4beb41e212169d943a30851ac29b33792b87b0 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Fri, 8 Dec 2023 08:34:49 -0800
Subject: [PATCH 1/3] (0.9.5) Disable hover menu for now

---
 docs/components/popout-menu.md     | 56 ++++++++++++++++++++----------
 lib/components/base/PopoutMenu.vue |  4 +--
 package.json                       |  2 +-
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/docs/components/popout-menu.md b/docs/components/popout-menu.md
index cf24f551..0b381962 100644
--- a/docs/components/popout-menu.md
+++ b/docs/components/popout-menu.md
@@ -75,23 +75,41 @@
 </PopoutMenu>
 ```
 
-# Popout Menu on hover
-<DemoContainer>
-  <PopoutMenu class="btn btn-dropdown-animation" position="bottom" direction="right" allow-hover>
-    Hover me! <DropdownIcon />
-    <template #menu>
-      Menu contents!
-      Menu contents!
-      Menu contents!
-    </template>
-  </PopoutMenu>
-</DemoContainer>
+[//]: # (# Popout Menu on hover)
 
-```vue
-<PopoutMenu class="btn" position="bottom" direction="right" allow-hover>
-  Hover me!
-  <template #menu>
-    Menu contents!
-  </template>
-</PopoutMenu>
-```
+[//]: # (<DemoContainer>)
+
+[//]: # (  <PopoutMenu class="btn btn-dropdown-animation" position="bottom" direction="right" allow-hover>)
+
+[//]: # (    Hover me! <DropdownIcon />)
+
+[//]: # (    <template #menu>)
+
+[//]: # (      Menu contents!)
+
+[//]: # (      Menu contents!)
+
+[//]: # (      Menu contents!)
+
+[//]: # (    </template>)
+
+[//]: # (  </PopoutMenu>)
+
+[//]: # (</DemoContainer>)
+
+[//]: # ()
+[//]: # (```vue)
+
+[//]: # (<PopoutMenu class="btn" position="bottom" direction="right" allow-hover>)
+
+[//]: # (  Hover me!)
+
+[//]: # (  <template #menu>)
+
+[//]: # (    Menu contents!)
+
+[//]: # (  </template>)
+
+[//]: # (</PopoutMenu>)
+
+[//]: # (```)
diff --git a/lib/components/base/PopoutMenu.vue b/lib/components/base/PopoutMenu.vue
index 06ecbe3c..532f7d8b 100644
--- a/lib/components/base/PopoutMenu.vue
+++ b/lib/components/base/PopoutMenu.vue
@@ -141,9 +141,7 @@ onBeforeUnmount(() => {
     }
   }
 
-  &:not(.allow-hover) .popup-menu:not(.visible):not(:focus-within),
-  &.allow-hover:not(:has(.hover-bounding-box:hover)):not(:has(.popup-menu:hover))
-    .popup-menu:not(.visible):not(:focus-within) {
+  .popup-menu:not(.visible):not(:focus-within) {
     pointer-events: none;
 
     *,
diff --git a/package.json b/package.json
index e309ea7e..de492a15 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "files": [
     "dist",
     "locales"

From 9cff1f8f17461927219760c6a0203ea4380e99f6 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Wed, 31 Jan 2024 11:57:28 -0800
Subject: [PATCH 2/3] Update button design, introduce new gap variables for
 redesign

---
 docs/.vitepress/theme/DemoContainer.vue       |   4 +-
 docs/components/analytics.md                  |   2 +-
 lib/assets/styles/classes.scss                | 113 ++++++++++++------
 lib/assets/styles/defaults.scss               |   2 +-
 lib/assets/styles/variables.scss              |  27 ++++-
 lib/components/base/Card.vue                  |   2 +-
 lib/components/base/DropdownSelect.vue        |   6 +-
 lib/components/base/MarkdownEditor.vue        |  28 ++---
 lib/components/base/OverflowMenu.vue          |   2 +-
 lib/components/base/PageBar.vue               |   6 +-
 lib/components/base/Pagination.vue            |   4 +-
 lib/components/base/PopoutMenu.vue            |  34 +++---
 lib/components/base/Promotion.vue             |   2 +-
 lib/components/base/ScrollableMultiSelect.vue |   2 +-
 lib/components/chart/Chart.vue                |  20 ++--
 lib/components/chart/CompactChart.vue         |  16 +--
 lib/components/modal/ConfirmModal.vue         |   2 +-
 lib/components/modal/Modal.vue                |   6 +-
 lib/components/modal/ShareModal.vue           |  10 +-
 lib/components/nav/Breadcrumbs.vue            |   4 +-
 lib/components/search/Categories.vue          |   2 +-
 lib/components/search/SearchDropdown.vue      |   8 +-
 22 files changed, 180 insertions(+), 122 deletions(-)

diff --git a/docs/.vitepress/theme/DemoContainer.vue b/docs/.vitepress/theme/DemoContainer.vue
index 0e3529b6..868c2073 100644
--- a/docs/.vitepress/theme/DemoContainer.vue
+++ b/docs/.vitepress/theme/DemoContainer.vue
@@ -7,8 +7,8 @@
   background: var(--color-raised-bg);
   border: 1px solid var(--color-button-bg);
   display: flex;
-  padding: var(--gap-md);
-  gap: var(--gap-md);
+  padding: var(--gap-12);
+  gap: var(--gap-12);
   align-items: center;
   flex-wrap: wrap;
   border-radius: var(--radius-lg);
diff --git a/docs/components/analytics.md b/docs/components/analytics.md
index 3e7adbdf..a13aafd6 100644
--- a/docs/components/analytics.md
+++ b/docs/components/analytics.md
@@ -101,7 +101,7 @@
 </DemoContainer>
 <DemoContainer>
 <client-only>
-<div style="display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-md);">
+<div style="display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-12);">
   <CompactChart 
     v-for="i in 4"
     title="Downloads"
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index 17e2238d..2dd3039f 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -5,7 +5,7 @@
   .label {
     :where(.label__title) {
       display: block;
-      margin-block: var(--gap-md) var(--gap-sm);
+      margin-block: var(--gap-12) var(--gap-8);
 
       // Same styling as h3
       color: var(--color-contrast);
@@ -24,11 +24,11 @@
 
     :where(.label__description) {
       display: block;
-      margin-block-end: var(--gap-sm);
+      margin-block-end: var(--gap-8);
 
       .label__subdescription {
         display: block;
-        margin-block-start: var(--gap-md);
+        margin-block-start: var(--gap-12);
       }
     }
 
@@ -53,7 +53,7 @@
       .resizable-textarea-wrapper + *,
       .input-div + *
     ) {
-    margin-block-start: var(--gap-md);
+    margin-block-start: var(--gap-12);
   }
 
   :where(button, .button, .btn) {
@@ -81,8 +81,8 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    gap: var(--gap-sm);
-    margin-bottom: calc(var(--gap-sm) + var(--gap-md));
+    gap: var(--gap-8);
+    margin-bottom: calc(var(--gap-sm) + var(--gap-12));
 
     .btn,
     .input-group {
@@ -110,7 +110,7 @@
       }
 
       .label__description:not(:first-child) {
-        margin-top: var(--gap-sm);
+        margin-top: var(--gap-8);
       }
     }
 
@@ -143,7 +143,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--gap-sm);
+    gap: var(--gap-8);
 
     * {
       flex-shrink: 0;
@@ -155,7 +155,7 @@
     }
 
     &:not(:last-child) {
-      margin-bottom: var(--gap-md);
+      margin-bottom: var(--gap-12);
     }
   }
 
@@ -171,7 +171,7 @@
 .input-group {
   display: flex;
   flex-direction: row;
-  grid-gap: var(--gap-sm);
+  grid-gap: var(--gap-8);
   flex-wrap: wrap;
   max-width: 100%;
   align-items: center;
@@ -208,7 +208,7 @@
   flex-direction: column;
 
   > * {
-    margin-bottom: var(--gap-md);
+    margin-bottom: var(--gap-12);
   }
 
   > .multiselect {
@@ -226,7 +226,7 @@
 .universal-modal {
   @extend .universal-body;
 
-  padding: var(--gap-lg);
+  padding: var(--gap-16);
   display: flex;
   flex-direction: column;
 
@@ -264,7 +264,7 @@ a,
 
 .button-base {
   @extend .clickable;
-  font-weight: 500;
+  font-weight: 600;
   border: none;
   outline: 2px solid transparent;
 
@@ -334,6 +334,9 @@ a,
   --_background-color: var(--color-button-bg);
   --_accent-color: var(--color-base);
   --_shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
+  --_block-padding:  var(--gap-8);
+  --_inline-padding: var(--gap-16);
+  --_gap: var(--gap-6);
 
   &.btn-outline,
   &.btn-transparent {
@@ -348,7 +351,7 @@ a,
   &.btn-transparent {
     --_accent-color: var(--color-base);
     color: var(--_accent-color);
-    border-color: transparent;
+    --_border-color: transparent;
 
     &.btn-hover-filled-only {
       color: var(--color-base);
@@ -455,8 +458,16 @@ a,
   }
 
   &.btn-large {
-    font-weight: 700;
-    min-height: 2.5rem;
+    font-weight: 800;
+    min-height: 3rem;
+    border-radius: var(--radius-btn);
+    --_block-padding: var(--gap-12);
+    --_inline-padding: var(--gap-16);
+    --_gap:  var(--gap-8);
+
+    svg {
+      --_size: 1.5rem;
+    }
   }
 
   box-sizing: border-box;
@@ -464,23 +475,27 @@ a,
   color: var(--_text-color);
   background-color: var(--_background-color);
   box-shadow: none;
-  border-radius: var(--radius-md);
-  padding: var(--gap-sm) var(--gap-md);
-  border: var(--button-border-width) solid var(--button-divider);
+  border-radius: var(--radius-btn);
+  padding: calc(var(--_block-padding) - 2 * var(--button-border-width)) var(--_inline-padding);
+  border: var(--button-border-width) solid var(--_border-color, transparent);
 
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   width: fit-content;
+  min-height: 2.25rem;
   height: fit-content;
+  font-size: 1rem;
   text-decoration: none;
-  gap: 0.5rem;
+  gap: var(--_gap);
   line-height: 1rem;
 
   svg {
-    width: 1.25rem;
-    height: 1.25rem;
+    --_size: 1.25rem;
+    width: var(--_size);
+    height: var(--_size);
+    flex-shrink: 0;
   }
 
   .external-icon {
@@ -491,7 +506,9 @@ a,
   }
 
   &.icon-only {
-    padding: var(--gap-sm);
+    padding: calc(var(--_block-padding) - 2 * var(--button-border-width));
+    border-radius: var(--radius-btn-circle);
+    aspect-ratio: 1 / 1;
   }
 
   &.transparent {
@@ -516,11 +533,15 @@ a,
       }
     }
   }
+
+  &:hover {
+    --_border-color: color-mix(in oklab, var(--_background-color), var(--color-mix-border));
+  }
 }
 
 .btn-group {
   display: flex;
-  grid-gap: var(--gap-sm);
+  grid-gap: var(--gap-8);
   flex-wrap: wrap;
 }
 
@@ -531,16 +552,34 @@ a,
   > :not(:first-child) {
     &.btn,
     > .btn {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+      &:not(.btn-large) {
+        border-radius: var(--radius-btn);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &.btn-large {
+        border-radius: var(--radius-btn-large);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
   }
 
   > :not(:last-child) {
     &.btn,
     > .btn {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      &:not(.btn-large) {
+        border-radius: var(--radius-btn);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &.btn-large {
+        border-radius: var(--radius-btn-large);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
 }
@@ -549,16 +588,16 @@ a,
 
 .project-list {
   width: 100%;
-  gap: var(--gap-md);
+  gap: var(--gap-12);
   overflow: unset !important;
   container-type: inline-size;
 
   &:not(:first-child) {
-    margin-top: var(--gap-md);
+    margin-top: var(--gap-12);
   }
 
   &:not(:empty) {
-    margin-bottom: var(--gap-md);
+    margin-bottom: var(--gap-12);
   }
 }
 
@@ -592,7 +631,7 @@ a,
 
 // CARDS
 .base-card {
-  padding: var(--gap-xl);
+  padding: var(--gap-24);
   position: relative;
   min-height: var(--font-size-2xl);
 
@@ -600,7 +639,7 @@ a,
   border-radius: var(--radius-lg);
   border: var(--card-border-width) solid var(--color-card-divider);
 
-  margin-bottom: var(--gap-md);
+  margin-bottom: var(--gap-12);
   outline: 2px solid transparent;
 
   box-shadow: var(--shadow-card);
@@ -653,8 +692,8 @@ a,
 .navigation-card {
   @extend .base-card;
 
-  padding-inline: var(--gap-xl);
-  padding-block: var(--gap-md);
+  padding-inline: var(--gap-24);
+  padding-block: var(--gap-12);
 
   align-items: center;
   display: flex;
@@ -685,7 +724,7 @@ a,
   border: none;
   color: var(--color-button-bg);
   height: 1px;
-  margin: var(--gap-sm) 0;
+  margin: var(--gap-8) 0;
 }
 
 // TABLE
@@ -772,7 +811,7 @@ a,
   textarea {
     height: 100%;
     border-radius: var(--radius-sm);
-    width: calc(100% - var(--gap-xl) - var(--gap-sm));
+    width: calc(100% - var(--gap-24) - var(--gap-8));
     resize: vertical;
   }
 }
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
index 39789145..dfc0cdf2 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -235,7 +235,7 @@ h2 {
 }
 
 h3 {
-  margin-block: var(--gap-md) var(--gap-md);
+  margin-block: var(--gap-12) var(--gap-12);
   color: var(--color-contrast);
 }
 
diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss
index ef052684..d2ba1adc 100644
--- a/lib/assets/styles/variables.scss
+++ b/lib/assets/styles/variables.scss
@@ -15,11 +15,22 @@ html {
   --round-univ: 9px;
   --round-card: 13px;
 
-  --gap-xs: 0.25rem;
-  --gap-sm: 0.5rem;
-  --gap-md: 0.75rem;
-  --gap-lg: 1rem;
+
+   // --- LEGACY - DO NOT USE ---
+  --gap-xs: var(--gap-4);
+  --gap-sm: var(--gap-8);
+  --gap-md: var(--gap-12);
+  --gap-lg: var(--gap-16);
   --gap-xl: 1.25rem;
+  // ----------------------------
+
+  --gap-2: 0.125rem;
+  --gap-4: calc(2 * var(--gap-2));
+  --gap-6: calc(3 * var(--gap-2));
+  --gap-8: calc(2 * var(--gap-4));
+  --gap-12: calc(3 * var(--gap-4));
+  --gap-16: calc(2 * var(--gap-8));
+  --gap-24: calc(3 * var(--gap-8));
 
   --radius-xs: var(--round-little);
   --radius-sm: var(--round-univ);
@@ -27,6 +38,10 @@ html {
   --radius-lg: var(--round-univ);
   --radius-xl: var(--round-univ);
   --radius-max: 999999999px;
+
+  --radius-btn: 0.75rem;
+  --radius-btn-large: 1rem;
+  --radius-btn-circle: var(--radius-max);
 }
 
 .light-mode,
@@ -79,6 +94,8 @@ html {
 
   --color-tooltip-text: var(--color-accent-contrast);
   --color-tooltip-bg: var(--color-base);
+
+  --color-mix-border: black 20%;
 }
 
 .dark-mode,
@@ -128,6 +145,8 @@ html {
 
   --color-tooltip-text: var(--color-base);
   --color-tooltip-bg: var(--color-button-bg);
+
+  --color-mix-border: white 15%;
 }
 
 .oled-mode {
diff --git a/lib/components/base/Card.vue b/lib/components/base/Card.vue
index a5c8346d..796512c8 100644
--- a/lib/components/base/Card.vue
+++ b/lib/components/base/Card.vue
@@ -48,7 +48,7 @@ function toggleCollapsed() {
   }
 
   &:not(:last-child) {
-    margin-bottom: var(--gap-lg);
+    margin-bottom: var(--gap-16);
   }
 }
 
diff --git a/lib/components/base/DropdownSelect.vue b/lib/components/base/DropdownSelect.vue
index 609d5cdf..976d4194 100644
--- a/lib/components/base/DropdownSelect.vue
+++ b/lib/components/base/DropdownSelect.vue
@@ -206,9 +206,9 @@ const isChildOfDropdown = (element) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--gap-sm) var(--gap-lg);
+    padding: var(--gap-8) var(--gap-16);
     background-color: var(--color-button-bg);
-    gap: var(--gap-md);
+    gap: var(--gap-12);
     cursor: pointer;
     user-select: none;
     border-radius: var(--radius-md);
@@ -259,7 +259,7 @@ const isChildOfDropdown = (element) => {
       background-color: var(--color-button-bg);
       display: flex;
       align-items: center;
-      padding: var(--gap-md);
+      padding: var(--gap-12);
       cursor: pointer;
       user-select: none;
 
diff --git a/lib/components/base/MarkdownEditor.vue b/lib/components/base/MarkdownEditor.vue
index 9fe93bd2..fe31cc92 100644
--- a/lib/components/base/MarkdownEditor.vue
+++ b/lib/components/base/MarkdownEditor.vue
@@ -812,7 +812,7 @@ function openVideoModal() {
 }
 
 .display-options {
-  margin-bottom: var(--gap-sm);
+  margin-bottom: var(--gap-8);
 }
 
 .editor-action-row {
@@ -820,8 +820,8 @@ function openVideoModal() {
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: var(--gap-sm);
-  gap: var(--gap-xs);
+  margin-bottom: var(--gap-8);
+  gap: var(--gap-4);
 
   @media (max-width: 768px) {
     flex-direction: column;
@@ -834,7 +834,7 @@ function openVideoModal() {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
 
   @media (max-width: 768px) {
     .divider {
@@ -851,7 +851,7 @@ function openVideoModal() {
     height: 1.8rem;
     background-color: var(--color-button-bg);
     border-radius: var(--radius-max);
-    margin-inline: var(--gap-xs);
+    margin-inline: var(--gap-4);
   }
 
   .divider:first-child {
@@ -868,7 +868,7 @@ function openVideoModal() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
 }
 
 .hide {
@@ -879,7 +879,7 @@ function openVideoModal() {
   display: flex;
   align-items: center;
   justify-items: end;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
 }
 
 .markdown-body-wrapper {
@@ -891,14 +891,14 @@ function openVideoModal() {
 }
 
 .modal-insert {
-  padding: var(--gap-lg);
+  padding: var(--gap-16);
 
   .iconified-input {
     width: 100%;
   }
 
   .label {
-    margin-block: var(--gap-lg) var(--gap-sm);
+    margin-block: var(--gap-16) var(--gap-8);
     display: block;
   }
 
@@ -914,7 +914,7 @@ function openVideoModal() {
   }
 
   .input-group {
-    margin-top: var(--gap-lg);
+    margin-top: var(--gap-16);
   }
 }
 
@@ -922,8 +922,8 @@ function openVideoModal() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--gap-xs);
-  padding-bottom: var(--gap-md);
+  gap: var(--gap-4);
+  padding-bottom: var(--gap-12);
 }
 
 .btn-input-alternative {
@@ -931,8 +931,8 @@ function openVideoModal() {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  gap: var(--gap-xs);
-  padding-bottom: var(--gap-xs);
+  gap: var(--gap-4);
+  padding-bottom: var(--gap-4);
 
   .btn {
     width: 100%;
diff --git a/lib/components/base/OverflowMenu.vue b/lib/components/base/OverflowMenu.vue
index f41c34eb..da94762c 100644
--- a/lib/components/base/OverflowMenu.vue
+++ b/lib/components/base/OverflowMenu.vue
@@ -95,7 +95,7 @@ const close = () => {
   justify-content: flex-start;
 
   &:not(:last-child) {
-    margin-bottom: var(--gap-xs);
+    margin-bottom: var(--gap-4);
   }
 }
 </style>
diff --git a/lib/components/base/PageBar.vue b/lib/components/base/PageBar.vue
index cfc436e0..a2b2f6e5 100644
--- a/lib/components/base/PageBar.vue
+++ b/lib/components/base/PageBar.vue
@@ -17,7 +17,7 @@
   border-bottom: 2px solid var(--color-divider);
   margin-bottom: 1rem;
   flex-wrap: wrap;
-  gap: var(--gap-md);
+  gap: var(--gap-12);
   :deep(.page-bar__title) {
     display: flex;
     align-items: center;
@@ -29,7 +29,7 @@
   }
   :deep(.page-bar__buttons) {
     display: flex;
-    gap: var(--gap-xs);
+    gap: var(--gap-4);
   }
   > div {
     display: flex;
@@ -62,7 +62,7 @@
   }
   @media screen and (max-width: 900px) {
     :deep(.nav-button) {
-      padding: var(--gap-sm);
+      padding: var(--gap-8);
     }
   }
   @media screen and (max-width: 900px) and (hover: none) {
diff --git a/lib/components/base/Pagination.vue b/lib/components/base/Pagination.vue
index 72714edf..aa4efaec 100644
--- a/lib/components/base/Pagination.vue
+++ b/lib/components/base/Pagination.vue
@@ -104,7 +104,7 @@ function switchPage(newPage: number) {
 
 <style lang="scss" scoped>
 a {
-  padding: var(--gap-sm);
+  padding: var(--gap-8);
   margin: 0;
   height: 2.25rem;
   min-width: 2.25rem;
@@ -129,7 +129,7 @@ a,
 
 .paginates {
   display: flex;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
 }
 
 @media screen and (max-width: 530px) {
diff --git a/lib/components/base/PopoutMenu.vue b/lib/components/base/PopoutMenu.vue
index 39fb5784..167aae31 100644
--- a/lib/components/base/PopoutMenu.vue
+++ b/lib/components/base/PopoutMenu.vue
@@ -184,43 +184,43 @@ onBeforeUnmount(() => {
     scale: 1;
 
     &.position-bottom-left {
-      top: calc(100% + var(--gap-sm));
+      top: calc(100% + var(--gap-8));
       right: 0;
     }
 
     &.position-bottom-right {
-      top: calc(100% + var(--gap-sm));
+      top: calc(100% + var(--gap-8));
       left: 0;
     }
 
     &.position-top-left {
-      bottom: calc(100% + var(--gap-sm));
+      bottom: calc(100% + var(--gap-8));
       right: 0;
     }
 
     &.position-top-right {
-      bottom: calc(100% + var(--gap-sm));
+      bottom: calc(100% + var(--gap-8));
       left: 0;
     }
 
     &.position-left-up {
       bottom: 0rem;
-      right: calc(100% + var(--gap-sm));
+      right: calc(100% + var(--gap-8));
     }
 
     &.position-left-down {
       top: 0rem;
-      right: calc(100% + var(--gap-sm));
+      right: calc(100% + var(--gap-8));
     }
 
     &.position-right-up {
       bottom: 0rem;
-      left: calc(100% + var(--gap-sm));
+      left: calc(100% + var(--gap-8));
     }
 
     &.position-right-down {
       top: 0rem;
-      left: calc(100% + var(--gap-sm));
+      left: calc(100% + var(--gap-8));
     }
   }
 
@@ -229,7 +229,7 @@ onBeforeUnmount(() => {
     position: absolute;
     scale: 0.75;
     border: 1px solid var(--color-button-bg);
-    padding: var(--gap-sm);
+    padding: var(--gap-8);
     width: fit-content;
     border-radius: var(--radius-md);
     background-color: var(--color-raised-bg);
@@ -244,43 +244,43 @@ onBeforeUnmount(() => {
     }
 
     &.position-bottom-left {
-      top: calc(100% + var(--gap-sm) - 1rem);
+      top: calc(100% + var(--gap-8) - 1rem);
       right: -1rem;
     }
 
     &.position-bottom-right {
-      top: calc(100% + var(--gap-sm) - 1rem);
+      top: calc(100% + var(--gap-8) - 1rem);
       left: -1rem;
     }
 
     &.position-top-left {
-      bottom: calc(100% + var(--gap-sm) - 1rem);
+      bottom: calc(100% + var(--gap-8) - 1rem);
       right: -1rem;
     }
 
     &.position-top-right {
-      bottom: calc(100% + var(--gap-sm) - 1rem);
+      bottom: calc(100% + var(--gap-8) - 1rem);
       left: -1rem;
     }
 
     &.position-left-up {
       bottom: -1rem;
-      right: calc(100% + var(--gap-sm) - 1rem);
+      right: calc(100% + var(--gap-8) - 1rem);
     }
 
     &.position-left-down {
       top: -1rem;
-      right: calc(100% + var(--gap-sm) - 1rem);
+      right: calc(100% + var(--gap-8) - 1rem);
     }
 
     &.position-right-up {
       bottom: -1rem;
-      left: calc(100% + var(--gap-sm) - 1rem);
+      left: calc(100% + var(--gap-8) - 1rem);
     }
 
     &.position-right-down {
       top: -1rem;
-      left: calc(100% + var(--gap-sm) - 1rem);
+      left: calc(100% + var(--gap-8) - 1rem);
     }
 
     .btn {
diff --git a/lib/components/base/Promotion.vue b/lib/components/base/Promotion.vue
index a0a6e620..539f846f 100644
--- a/lib/components/base/Promotion.vue
+++ b/lib/components/base/Promotion.vue
@@ -44,7 +44,7 @@ const target = computed(() => (props.external ? '_blank' : '_self'))
 <style lang="scss" scoped>
 .GBBNWLJVGRHFLYVGSZKSSKNTHFYXHMBD {
   position: relative;
-  margin-bottom: var(--gap-lg);
+  margin-bottom: var(--gap-16);
   background: var(--color-ad);
   border: 1px solid var(--color-ad-raised);
   border-radius: var(--radius-lg);
diff --git a/lib/components/base/ScrollableMultiSelect.vue b/lib/components/base/ScrollableMultiSelect.vue
index af00daff..c5edcf76 100644
--- a/lib/components/base/ScrollableMultiSelect.vue
+++ b/lib/components/base/ScrollableMultiSelect.vue
@@ -60,7 +60,7 @@ function onScroll({ target: { scrollTop, offsetHeight, scrollHeight } }) {
   overflow: hidden;
   position: relative;
   --_fade-height: 4rem;
-  margin-bottom: var(--gap-sm);
+  margin-bottom: var(--gap-8);
   &.top-fade::before,
   &.bottom-fade::after {
     opacity: 1;
diff --git a/lib/components/chart/Chart.vue b/lib/components/chart/Chart.vue
index 3321ce2c..61d4afc8 100644
--- a/lib/components/chart/Chart.vue
+++ b/lib/components/chart/Chart.vue
@@ -270,13 +270,13 @@ svg {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
 }
 
 .toolbar {
   display: flex;
   flex-direction: row;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
   z-index: 1;
   margin-left: auto;
 }
@@ -329,7 +329,7 @@ svg {
 
 :deep(.apexcharts-menu-item) {
   border-radius: var(--radius-sm) !important;
-  padding: var(--gap-xs) var(--gap-sm) !important;
+  padding: var(--gap-4) var(--gap-8) !important;
 
   &:hover {
     transition: all 0.3s !important;
@@ -343,11 +343,11 @@ svg {
     min-width: 10rem;
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xs);
-    padding: var(--gap-sm);
+    gap: var(--gap-4);
+    padding: var(--gap-8);
 
     .card-divider {
-      margin: var(--gap-xs) 0;
+      margin: var(--gap-4) 0;
     }
 
     .seperated-entry {
@@ -369,7 +369,7 @@ svg {
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: var(--gap-xs);
+      gap: var(--gap-4);
       color: var(--color-base);
     }
 
@@ -384,7 +384,7 @@ svg {
       }
 
       .label {
-        margin-right: var(--gap-xl);
+        margin-right: var(--gap-24);
       }
     }
 
@@ -393,7 +393,7 @@ svg {
       height: 0.5rem;
       border-radius: 50%;
       display: inline-block;
-      margin-right: var(--gap-sm);
+      margin-right: var(--gap-8);
     }
 
     svg {
@@ -407,7 +407,7 @@ svg {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--gap-md);
+  gap: var(--gap-12);
   justify-content: center;
 }
 
diff --git a/lib/components/chart/CompactChart.vue b/lib/components/chart/CompactChart.vue
index 72bf4a9c..cc173cb8 100644
--- a/lib/components/chart/CompactChart.vue
+++ b/lib/components/chart/CompactChart.vue
@@ -160,7 +160,7 @@ const chartOptions = ref({
 .compact-chart {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
   border: 1px solid var(--color-button-bg);
   border-radius: var(--radius-md);
   background-color: var(--color-raised-bg);
@@ -203,11 +203,11 @@ svg {
   .bar-tooltip {
     display: flex;
     flex-direction: column;
-    gap: var(--gap-xs);
-    padding: var(--gap-sm);
+    gap: var(--gap-4);
+    padding: var(--gap-8);
 
     .card-divider {
-      margin: var(--gap-xs) 0;
+      margin: var(--gap-4) 0;
     }
 
     .label {
@@ -220,7 +220,7 @@ svg {
       display: flex;
       flex-direction: row;
       align-items: center;
-      gap: var(--gap-xs);
+      gap: var(--gap-4);
       color: var(--color-base);
     }
 
@@ -229,7 +229,7 @@ svg {
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
-      gap: var(--gap-md);
+      gap: var(--gap-12);
     }
 
     .circle {
@@ -237,7 +237,7 @@ svg {
       height: 0.5rem;
       border-radius: 50%;
       display: inline-block;
-      margin-right: var(--gap-sm);
+      margin-right: var(--gap-8);
     }
 
     svg {
@@ -256,7 +256,7 @@ svg {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--gap-md);
+  gap: var(--gap-12);
   justify-content: center;
 }
 
diff --git a/lib/components/modal/ConfirmModal.vue b/lib/components/modal/ConfirmModal.vue
index 57c9c747..358a05a5 100644
--- a/lib/components/modal/ConfirmModal.vue
+++ b/lib/components/modal/ConfirmModal.vue
@@ -93,7 +93,7 @@ defineExpose({ show })
 
 <style scoped lang="scss">
 .modal-delete {
-  padding: var(--gap-lg);
+  padding: var(--gap-16);
   display: flex;
   flex-direction: column;
 
diff --git a/lib/components/modal/Modal.vue b/lib/components/modal/Modal.vue
index fb076c89..b1da02fd 100644
--- a/lib/components/modal/Modal.vue
+++ b/lib/components/modal/Modal.vue
@@ -141,7 +141,7 @@ defineExpose({
     position: fixed;
     box-shadow: var(--shadow-raised), var(--shadow-inset);
     border-radius: var(--radius-lg);
-    max-height: calc(100% - 2 * var(--gap-lg));
+    max-height: calc(100% - 2 * var(--gap-16));
     overflow-y: auto;
     width: 600px;
     pointer-events: auto;
@@ -151,7 +151,7 @@ defineExpose({
       justify-content: space-between;
       align-items: center;
       background-color: var(--color-bg);
-      padding: var(--gap-md) var(--gap-lg);
+      padding: var(--gap-12) var(--gap-16);
 
       h1 {
         font-weight: bold;
@@ -173,7 +173,7 @@ defineExpose({
     }
 
     @media screen and (max-width: 650px) {
-      width: calc(100% - 2 * var(--gap-lg));
+      width: calc(100% - 2 * var(--gap-16));
     }
   }
 }
diff --git a/lib/components/modal/ShareModal.vue b/lib/components/modal/ShareModal.vue
index af35f0b4..13778b4b 100644
--- a/lib/components/modal/ShareModal.vue
+++ b/lib/components/modal/ShareModal.vue
@@ -185,14 +185,14 @@ defineExpose({
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--gap-sm);
-  padding: var(--gap-lg);
+  gap: var(--gap-8);
+  padding: var(--gap-16);
 }
 
 .all-buttons {
   display: flex;
   flex-direction: column;
-  gap: var(--gap-sm);
+  gap: var(--gap-8);
   flex-grow: 1;
   justify-content: center;
 }
@@ -208,7 +208,7 @@ defineExpose({
 .button-row {
   display: flex;
   flex-direction: row;
-  gap: var(--gap-sm);
+  gap: var(--gap-8);
 
   .btn {
     fill: var(--color-contrast);
@@ -248,7 +248,7 @@ defineExpose({
   position: absolute;
   top: 0;
   right: 0;
-  margin: var(--gap-sm);
+  margin: var(--gap-8);
   transition: all 0.2s ease-in-out;
   opacity: 0;
 
diff --git a/lib/components/nav/Breadcrumbs.vue b/lib/components/nav/Breadcrumbs.vue
index b96a7be8..2fef7592 100644
--- a/lib/components/nav/Breadcrumbs.vue
+++ b/lib/components/nav/Breadcrumbs.vue
@@ -31,7 +31,7 @@ defineProps({
 <style lang="scss" scoped>
 .breadcrumbs {
   display: flex;
-  margin-bottom: var(--gap-lg);
+  margin-bottom: var(--gap-16);
   align-items: center;
   flex-wrap: wrap;
 
@@ -41,7 +41,7 @@ defineProps({
   }
 
   a.breadcrumb {
-    padding-block: var(--gap-xs);
+    padding-block: var(--gap-4);
     &.trim {
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/lib/components/search/Categories.vue b/lib/components/search/Categories.vue
index 95f6e759..4ff5ab99 100644
--- a/lib/components/search/Categories.vue
+++ b/lib/components/search/Categories.vue
@@ -24,7 +24,7 @@ defineProps({
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: var(--gap-xs);
+  gap: var(--gap-4);
 
   span {
     display: flex;
diff --git a/lib/components/search/SearchDropdown.vue b/lib/components/search/SearchDropdown.vue
index 5919abad..f43715db 100644
--- a/lib/components/search/SearchDropdown.vue
+++ b/lib/components/search/SearchDropdown.vue
@@ -189,9 +189,9 @@ const isChildOfDropdown = (element) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--gap-sm) var(--gap-lg);
+    padding: var(--gap-8) var(--gap-16);
     background-color: var(--color-button-bg);
-    gap: var(--gap-md);
+    gap: var(--gap-12);
     cursor: pointer;
     user-select: none;
     border-radius: var(--radius-md);
@@ -227,7 +227,7 @@ const isChildOfDropdown = (element) => {
       background-color: var(--color-button-bg);
       display: flex;
       align-items: center;
-      padding: var(--gap-md);
+      padding: var(--gap-12);
       cursor: pointer;
       user-select: none;
 
@@ -300,7 +300,7 @@ const isChildOfDropdown = (element) => {
   display: flex;
   align-items: center;
   flex-direction: row;
-  gap: var(--gap-md);
+  gap: var(--gap-12);
   color: var(--color-contrast);
 
   .title {

From 9f3cafe58a11c5bbdd96245a58130df5cfec4650 Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Wed, 31 Jan 2024 12:06:48 -0800
Subject: [PATCH 3/3] Update badge icons

---
 lib/assets/icons/world.svg    |  1 +
 lib/components/base/Badge.vue | 28 +++++++++++++++-------------
 lib/components/icons.js       |  2 ++
 3 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 lib/assets/icons/world.svg

diff --git a/lib/assets/icons/world.svg b/lib/assets/icons/world.svg
new file mode 100644
index 00000000..d064d854
--- /dev/null
+++ b/lib/assets/icons/world.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-2"><path d="M21.54 15H17a2 2 0 0 0-2 2v4.54"/><path d="M7 3.34V5a3 3 0 0 0 3 3v0a2 2 0 0 1 2 2v0c0 1.1.9 2 2 2v0a2 2 0 0 0 2-2v0c0-1.1.9-2 2-2h3.17"/><path d="M11 21.95V18a2 2 0 0 0-2-2v0a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"/><circle cx="12" cy="12" r="10"/></svg>
\ No newline at end of file
diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue
index 371d45c7..8c1ca236 100644
--- a/lib/components/base/Badge.vue
+++ b/lib/components/base/Badge.vue
@@ -15,16 +15,16 @@
 
     <!-- Project statuses -->
     <template v-else-if="type === 'approved'">
-      <ListIcon /> {{ formatMessage(messages.listedLabel) }}
+      <WorldIcon /> {{ formatMessage(messages.publicLabel) }}
     </template>
     <template v-else-if="type === 'approved-general'">
       <CheckIcon /> {{ formatMessage(messages.approvedLabel) }}
     </template>
     <template v-else-if="type === 'unlisted'">
-      <EyeOffIcon /> {{ formatMessage(messages.unlistedLabel) }}
+      <LinkIcon /> {{ formatMessage(messages.unlistedLabel) }}
     </template>
     <template v-else-if="type === 'withheld'">
-      <EyeOffIcon /> {{ formatMessage(messages.withheldLabel) }}
+      <LinkIcon /> {{ formatMessage(messages.unlistedModeratorLabel) }}
     </template>
     <template v-else-if="type === 'private'">
       <LockIcon /> {{ formatMessage(messages.privateLabel) }}
@@ -61,12 +61,12 @@
       <XIcon /> {{ formatMessage(messages.failedLabel) }}
     </template>
     <template v-else-if="type === 'returned'">
-      <XIcon /> {{ formatMessage(messages.returnedLabel) }}
+      <UndoIcon /> {{ formatMessage(messages.returnedLabel) }}
     </template>
 
     <!-- Report status -->
     <template v-else-if="type === 'closed'">
-      <XIcon /> {{ formatMessage(messages.closedLabel) }}
+      <CheckCircleIcon /> {{ formatMessage(messages.closedLabel) }}
     </template>
 
     <!-- Other -->
@@ -79,15 +79,17 @@ import {
   ModrinthIcon,
   ScaleIcon,
   BoxIcon,
-  ListIcon,
-  EyeOffIcon,
   FileTextIcon,
   XIcon,
   ArchiveIcon,
   UpdatedIcon,
   CheckIcon,
   LockIcon,
+  LinkIcon,
+  WorldIcon,
   CalendarIcon,
+  UndoIcon,
+  CheckCircleIcon,
   capitalizeString,
 } from '@'
 
@@ -121,9 +123,9 @@ const messages = defineMessages({
     id: 'omorphia.component.badge.label.failed',
     defaultMessage: 'Failed',
   },
-  listedLabel: {
-    id: 'omorphia.component.badge.label.listed',
-    defaultMessage: 'Listed',
+  publicLabel: {
+    id: 'omorphia.component.badge.label.public',
+    defaultMessage: 'Public',
   },
   moderatorLabel: {
     id: 'omorphia.component.badge.label.moderator',
@@ -165,9 +167,9 @@ const messages = defineMessages({
     id: 'omorphia.component.badge.label.unlisted',
     defaultMessage: 'Unlisted',
   },
-  withheldLabel: {
-    id: 'omorphia.component.badge.label.withheld',
-    defaultMessage: 'Withheld',
+  unlistedModeratorLabel: {
+    id: 'omorphia.component.badge.label.unlisted-moderator',
+    defaultMessage: 'Unlisted (moderator)',
   },
 })
 const { formatMessage } = useVIntl()
diff --git a/lib/components/icons.js b/lib/components/icons.js
index 3efe2ef6..b69eaf1a 100644
--- a/lib/components/icons.js
+++ b/lib/components/icons.js
@@ -129,6 +129,8 @@ import _GitHubIcon from '@/assets/icons/github.svg?component'
 export const GitHubIcon = _GitHubIcon
 import _GlobeIcon from '@/assets/icons/globe.svg?component'
 export const GlobeIcon = _GlobeIcon
+import _WorldIcon from '@/assets/icons/world.svg?component'
+export const WorldIcon = _WorldIcon
 import _GridIcon from '@/assets/icons/grid.svg?component'
 export const GridIcon = _GridIcon
 import _HamburgerIcon from '@/assets/icons/hamburger.svg?component'