Various changes to fix up properties a bit more, making the vault nam…

…e visible, and suggestion dropdowns more visible.

manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Red Graphite",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "minAppVersion": "1.0.0",
     "author": "Sean Williams",
     "authorUrl": "https://github.com/seanwcom/Red-Graphite-for-Obsidian"

src/scss/app/misc.scss

@@ -4,66 +4,6 @@
   color: var(--color-base-20);
 }
 
-.suggestion-container.mod-search-suggestion {
-  // border: none;
-  // border-color: var(--interactive-accent);
-  border-color: var(--ribbon-background);
-}
-
-// search suggestions dropdown
-.suggestion-container {
-  .suggestion {
-
-    // -----------------------------------------------------------------
-    // highlighted (mouseover) styles
-    // -----------------------------------------------------------------
-    // text styles
-    .suggestion-item.mod-complex.search-suggest-item.is-selected {
-
-      // section title - keep same color as non hovered
-      .suggestion-title.list-item-part.mod-extended {
-        color: white;
-      }
-
-      // normal line of text
-      .suggestion-title {
-        // text before colon
-        color: var(--interactive-accent);
-        // text after colon
-        .search-suggest-info-text {
-          color: white;
-        }
-      }
-    }
-
-    // -----------------------------------------------------------------
-    // normal, non-highlighted (non-mouseover) item styles
-    // -----------------------------------------------------------------
-    .suggestion-item {
-      .suggestion-content {
-
-        // section title
-        .suggestion-title.list-item-part.mod-extended {
-          color: white;
-        }
-
-        // normal line of text
-        .suggestion-title {
-          // text before colon
-          color: var(--interactive-accent);
-
-          // text after colon
-          .search-suggest-info-text {
-            color: var(--text-muted);
-          }
-        }
-      }
-      // icons on right of suggestion title
-      // .suggestion-aux {}
-    }
-  }
-}
-
 // search settings
 .search-params {
   .setting-item {
@@ -74,3 +14,12 @@
     }
   }
 }
+
+// Vault text color fix, thanks @WAS-D
+// https://github.com/seanwcom/Red-Graphite-for-Obsidian/pull/37
+.theme-light {
+  --vault-profile-color: var(--nav-item-color);
+}
+.theme-dark {
+  --vault-profile-color: var(--nav-item-color);
+}

src/scss/app/properties.scss

@@ -43,9 +43,28 @@ body {
 
                 // focused item
                 .metadata-property:focus-within {
-                    box-shadow: 0 0 0 2px var(--color-accent);
+                    box-shadow: 0 0 0 2px var(--color-base-80);
+
+                    .metadata-property-value:focus-within {
+                        background-color:  var(--color-base-95);
+
+                        // example: aliases property while focused
+                        .multi-select-input {
+                            color: var(--color-base-20);
+                        }
+                    }
+                }
+
+                // example: aliases property
+                .multi-select-input {
+                    color: var(--color-base-20);
+                }
+                // example: aliases property on hover
+                .multi-select-pill:hover {
+                    color: var(--color-accent);
                 }
 
+
                 .metadata-input-longtext {
                     color: var(--color-base-40);
                 }
@@ -56,6 +75,11 @@ body {
                 .metadata-property:not([data-property-key="tags"]) {
                     --pill-color: var(--color-base-40);
                 }
+
+                .metadata-add-button:hover {
+                    color: var(--color-base-40);
+                    background-color: var(--color-base-90);
+                }
             }
         }
     }

src/scss/app/suggestion-dropdown.scss

@@ -0,0 +1,76 @@
+// search suggestions dropdown
+// .suggestion-container.mod-search-suggestion {
+//   border-color: red;
+// }
+.theme-light {
+  // border between search options and history in dropdown
+  .search-suggest-item.mod-group:not(:first-child) {
+    border-top: 1px solid var(--color-base-90);
+  }
+
+  // this styles the search dropdown and other suggestion dropdowns (like while
+  // filling in property details
+  .suggestion-container,
+  .suggestion-container.mod-search-suggestion {
+    // ??????????????????????????
+    background-color: var(--background-secondary);
+    border: 1px solid var(--color-base-90);
+    color: var(--color-base-40);
+
+    .suggestion {
+      background-color: var(--background-secondary);
+
+      // ??????????????????????????
+      .suggestion-item.is-selected {
+        background-color: var(--color-accent);
+        color: var(--color-base-20);
+      }
+
+      // -----------------------------------------------------------------
+      // highlighted (mouseover) styles
+      // -----------------------------------------------------------------
+      // text styles
+      .suggestion-item.mod-complex.search-suggest-item.is-selected {
+        // section title - keep same color as non hovered
+        .suggestion-title.list-item-part.mod-extended {
+          color: var(--color-base-20);
+        }
+
+        // normal line of text
+        .suggestion-title {
+          // text before colon
+          color: var(--color-base-00);
+          // text after colon
+          .search-suggest-info-text {
+            color: var(--color-base-20);
+          }
+        }
+      }
+
+      // -----------------------------------------------------------------
+      // normal, non-highlighted (non-mouseover) item styles
+      // -----------------------------------------------------------------
+      .suggestion-item {
+        .suggestion-content {
+          // section title
+          .suggestion-title.list-item-part.mod-extended {
+            color: white;
+          }
+
+          // normal line of text
+          .suggestion-title {
+            // text before colon
+            color: var(--color-base-40);
+
+            // text after colon
+            .search-suggest-info-text {
+              color: var(--color-base-60);
+            }
+          }
+        }
+        // icons on right of suggestion title
+        // .suggestion-aux {}
+      }
+    }
+  }
+}

src/scss/index.scss

@@ -21,6 +21,7 @@
 @use 'app/scrollbars';
 @use 'app/stacked-tabs';
 @use 'app/status-bar';
+@use 'app/suggestion-dropdown';
 @use 'app/tables';
 @use 'app/tabs';
 @use 'app/text';