Settings refactor and redesign (#1669)

* new settings work

* Polishing work on settings refactor

* Run intl:extract

* List view -> Rows view

* Remove current preferred system theme indicator to make the themes fit on one line

* Remove extra margin on top of navstack

assets/styles/components.scss

@@ -25,6 +25,7 @@
     border-radius: var(--size-rounded-card);
     padding: var(--spacing-card-lg);
     gap: var(--spacing-card-md);
+    outline: 1px solid transparent;
 
     .label {
       color: var(--color-heading);
@@ -65,6 +66,7 @@
 
   margin-bottom: var(--spacing-card-md);
   outline: 2px solid transparent;
+  outline-offset: -2px;
 
   box-shadow: var(--shadow-card);
 
@@ -687,7 +689,7 @@ tr.button-transparent {
   }
 
   color: var(--color-text) !important;
-  outline: 2px solid transparent;
+  outline: none !important;
 
   input {
     background: transparent;
@@ -706,6 +708,7 @@ tr.button-transparent {
     cursor: pointer;
     padding-left: 7px;
     padding-top: 10px;
+    outline: 2px solid transparent;
 
     transition: background-color 0.1s ease-in-out;
 
@@ -753,8 +756,13 @@ tr.button-transparent {
     border-bottom-left-radius: var(--size-rounded-sm);
     border-bottom-right-radius: var(--size-rounded-sm);
     box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+    outline: 2px solid transparent;
 
     .multiselect__element {
+      .multiselect__option {
+        outline: 1px solid transparent;
+      }
+
       .multiselect__option--highlight {
         background: var(--color-button-bg-active);
         color: var(--color-text-dark);
@@ -894,31 +902,6 @@ tr.button-transparent {
   }
 }
 
-.card {
-  position: relative;
-  min-height: var(--font-size-2xl);
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-
-  background: var(--color-raised-bg);
-  border-radius: var(--size-rounded-card);
-  outline: 2px solid transparent;
-
-  margin-bottom: var(--spacing-card-md);
-
-  box-shadow: var(--shadow-card);
-
-  .card__overlay {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    grid-gap: 0.5rem;
-    z-index: 2;
-  }
-}
-
 .card-divider {
   background-color: var(--color-divider);
   border: none;
@@ -1082,6 +1065,7 @@ button {
   transition: box-shadow 0.1s ease-in-out;
   overflow: hidden;
   max-width: 100%;
+  outline: 2px solid transparent;
 
   .text-input-wrapper__before {
     display: flex;
@@ -1102,9 +1086,10 @@ button {
   textarea {
     border-radius: 0;
     background-color: transparent;
-    box-shadow: unset;
+    box-shadow: unset !important;
     padding-left: 0;
     flex-grow: 1;
+    outline: none !important;
   }
 
   &:focus,

assets/styles/global.scss

@@ -288,6 +288,29 @@ html {
   --color-ad: #0d1828;
 }
 
+.retro-mode {
+  --color-bg: #191917;
+  --color-raised-bg: #1d1e1b;
+  --color-button-bg: #3a3b38;
+  --color-base: #c3c4b3;
+  --color-secondary: #777a74;
+  --color-contrast: #e6e2d1;
+
+  --color-brand: #4d9227;
+  --color-brand-highlight: #25421e;
+  --color-ad: var(--color-brand-highlight);
+  --color-ad-raised: var(--color-brand);
+  --color-ad-contrast: black;
+  --color-ad-highlight: var(--color-brand);
+
+  --color-red: rgb(232, 32, 13);
+  --color-orange: rgb(232, 141, 13);
+  --color-green: rgb(60, 219, 54);
+  --color-blue: rgb(9, 159, 239);
+  --color-purple: rgb(139, 129, 230);
+  --color-gray: #718096;
+}
+
 body {
   // Defaults
   background-color: var(--color-bg);
@@ -457,3 +480,21 @@ a:focus-visible,
   outline: 0.25rem solid #ea80ff;
   border-radius: 0.25rem;
 }
+
+// OMORPHIA FIXES
+.card {
+  outline-offset: -2px;
+}
+
+input {
+  outline: 2px solid transparent !important;
+}
+
+.button-animation {
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+    outline-width 0.2s ease-in-out;
+}
+
+.button-transparent {
+  box-shadow: none;
+}

components/ui/Checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="checkbox-outer button-within"
-    :class="{ disabled }"
+    :class="{ disabled, checked: modelValue }"
     role="presentation"
     @click="toggle"
   >
@@ -82,6 +82,12 @@ export default {
   &.disabled {
     cursor: not-allowed;
   }
+
+  &.checked {
+    outline: 2px solid transparent;
+    outline-offset: 4px;
+    border-radius: 0.25rem;
+  }
 }
 
 .checkbox {

components/ui/MessageBanner.vue

@@ -24,6 +24,7 @@ const ariaLabelByType = computed(() => `Banner with ${props.messageType} message
   border-radius: var(--size-rounded-card);
   overflow: hidden;
   outline: 2px solid transparent;
+  outline-offset: -2px;
 
   margin-bottom: var(--spacing-card-md);
 

components/ui/Modal.vue

@@ -119,6 +119,7 @@ export default {
     overflow-y: auto;
     width: 600px;
     pointer-events: auto;
+    outline: 3px solid transparent;
 
     .header {
       display: flex;

components/ui/NavRow.vue

@@ -134,6 +134,12 @@ export default {
     &.router-link-exact-active {
       color: var(--color-text);
 
+      &:not(:focus-visible) {
+        outline: 2px solid transparent;
+        outline-offset: 6px;
+        border-radius: 0.25rem;
+      }
+
       &::after {
         opacity: 1;
       }
@@ -157,6 +163,8 @@ export default {
     transition: all ease-in-out 0.2s;
     border-radius: var(--size-rounded-max);
     background-color: var(--color-brand);
+    outline: 2px solid transparent;
+    outline-offset: -2px;
 
     @media (prefers-reduced-motion) {
       transition: none !important;

components/ui/NavStack.vue

@@ -19,6 +19,10 @@ ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
+
+  > :first-child {
+    margin-top: 0;
+  }
 }
 
 li {

components/ui/NavStackItem.vue

@@ -70,6 +70,7 @@ export default {
   box-shadow: none;
   padding: 0;
   width: 100%;
+  outline: none;
 
   :where(.nav-link) {
     --text-color: var(--color-text);
@@ -94,6 +95,9 @@ export default {
   }
 
   &.router-link-exact-active {
+    outline: 2px solid transparent;
+    border-radius: 0.25rem;
+
     .nav-content {
       color: var(--color-button-text-active);
       background-color: var(--color-button-bg);

components/ui/Pagination.vue

@@ -133,6 +133,7 @@ a {
     background: var(--color-brand);
     color: var(--color-brand-inverted);
     cursor: default;
+    outline: 2px solid transparent;
   }
 
   &.paginate.disabled {

composables/cosmetics.js

@@ -17,6 +17,7 @@ export const useCosmetics = () =>
         developerMode: false,
         notUsingBlockers: false,
         hideModrinthAppPromos: false,
+        preferredDarkTheme: 'dark',
         searchDisplayMode: {
           mod: 'list',
           plugin: 'list',

composables/theme.js

@@ -24,6 +24,7 @@ export const useTheme = () =>
 
 export const updateTheme = (value, updatePreference = false) => {
   const theme = useTheme()
+  const cosmetics = useCosmetics()
 
   const themeCookie = useCookie('color-mode', {
     maxAge: 60 * 60 * 24 * 365 * 10,
@@ -40,7 +41,7 @@ export const updateTheme = (value, updatePreference = false) => {
     if (colorSchemeQueryList.matches) {
       theme.value.value = 'light'
     } else {
-      theme.value.value = 'dark'
+      theme.value.value = cosmetics.value.preferredDarkTheme
     }
   } else {
     theme.value.value = value
@@ -53,3 +54,5 @@ export const updateTheme = (value, updatePreference = false) => {
 
   themeCookie.value = theme.value
 }
+
+export const DARK_THEMES = ['dark', 'oled', 'retro']

layouts/default.vue

@@ -433,6 +433,7 @@ import ModalCreation from '~/components/ui/ModalCreation.vue'
 import Avatar from '~/components/ui/Avatar.vue'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 import { commonMessages } from '~/utils/common-messages.ts'
+import { DARK_THEMES } from '~/composables/theme.js'
 
 const { formatMessage } = useVIntl()
 
@@ -724,7 +725,10 @@ function toggleBrowseMenu() {
   }
 }
 function changeTheme() {
-  updateTheme(app.$colorMode.value === 'dark' ? 'light' : 'dark', true)
+  updateTheme(
+    DARK_THEMES.includes(app.$colorMode.value) ? 'light' : cosmetics.value.preferredDarkTheme,
+    true
+  )
 }
 
 function hideStagingBanner() {
@@ -781,6 +785,15 @@ function hideStagingBanner() {
         a {
           align-items: center;
           display: flex;
+
+          &:not(:focus-visible) {
+            outline: none;
+
+            &.router-link-exact-active {
+              outline: 2px solid transparent;
+              border-radius: 0.25rem;
+            }
+          }
         }
 
         .small-logo {
@@ -909,6 +922,7 @@ function hideStagingBanner() {
               display: flex;
               justify-content: center;
               padding: 0;
+              outline: none;
 
               .user-icon {
                 height: 2rem;
@@ -959,6 +973,7 @@ function hideStagingBanner() {
                 display: flex;
                 padding: 0.5rem 0.75rem;
                 width: 100%;
+                outline: none;
 
                 .icon {
                   margin-right: 0.5rem;
@@ -969,6 +984,7 @@ function hideStagingBanner() {
                 &.router-link-exact-active {
                   color: var(--color-button-text-active);
                   background-color: var(--color-button-bg);
+                  outline: 2px solid transparent;
 
                   &.primary-color {
                     color: var(--color-button-text-active);