Refactor list-item-icon styles and enhance combobox item rendering

- Updated list-item-icon default and create variants to use CSS variables for better adaptability to light/dark modes.
- Improved icon color contrast in both default and create variants for enhanced visibility.
- Refined combobox item rendering to utilize gap for spacing instead of spaces, ensuring consistent layout.
- Adjusted CSS rules to prevent overriding icon colors in specific contexts, maintaining design integrity.

src/main/frontend/components/combobox/item_renderer.cljs

@@ -204,17 +204,17 @@
                                       (string/starts-with? text-str %))
                                    (:new-item-patterns config)))
             new-text (when pattern (extract-new-item-text item pattern))
-            display-pattern (string/replace pattern #":$" "")]
+            display-pattern (string/replace pattern #":+$" "")] ; Remove one or more trailing colons
         (if (= pattern "Convert")
-          ;; Special styling for "Convert \"text\" to property" - use whitespace-nowrap to prevent awkward breaks
-          [:div {:class (str "flex flex-row items-center " gap-class " whitespace-nowrap")}
-           [:span.text-gray-12 "Convert "]
+          ;; Special styling for "Convert \"text\" to property" - use gap instead of space
+          [:div {:class "flex flex-row items-center whitespace-nowrap gap-1"}
+           [:span.text-gray-12 "Convert"]
            (when new-text
              [:span.text-gray-11 (str "\"" new-text "\"")])
-           [:span.text-gray-12 " to property"]]
-          ;; Regular "New option:" or "New page:" style
-          [:div {:class (str "flex flex-row items-center " gap-class)}
-           [:span.text-gray-12 display-pattern ":"]
+           [:span.text-gray-12 "to property"]]
+          ;; Regular "New option:" or "New page:" style - use gap instead of space
+          [:div {:class "flex flex-row items-center whitespace-nowrap gap-1"}
+           [:span.text-gray-12 (str display-pattern ":")]
            (when new-text
              [:span.text-gray-11 (str "\"" new-text "\"")])]))
       ;; Regular content with optional highlighting and embeds

src/main/frontend/components/list_item_icon.css

@@ -2,21 +2,31 @@
   flex-shrink: 0;
 }
 
-/* Default variant - Dark gray background */
+/* Default variant - Gray background that adapts to light/dark mode */
 .list-item-icon--default {
-  background-color: #2B2F31;
+  background-color: var(--lx-gray-05, var(--rx-gray-05));
   padding: 4px;
   border-radius: 4px;
 }
 
+/* Ensure icon color has good contrast in default variant */
+.list-item-icon--default .ui__icon {
+  color: var(--lx-gray-12, var(--rx-gray-12));
+}
+
 /* Create variant - Blue background with border */
 .list-item-icon--create {
-  background-color: rgba(5, 126, 255, 0.6);
-  border: 1px solid #369EFF;
+  background-color: var(--lx-accent-08-alpha, rgba(5, 126, 255, 0.6));
+  border: 1px solid var(--lx-accent-10, #369EFF);
   padding: 4px;
   border-radius: 4px;
 }
 
+/* Ensure icon color has good contrast in create variant - use accent color */
+.list-item-icon--create .ui__icon {
+  color: var(--lx-accent-12, var(--rx-accent-12, #ffffff));
+}
+
 /* Raw variant - No visible background, icon with opacity */
 .list-item-icon--raw {
   /* Container is 20px (w-5 h-5), icon is 16px with opacity-50 */
@@ -24,6 +34,7 @@
 
 .list-item-icon--raw .ui__icon {
   opacity: 0.5;
+  color: var(--lx-gray-12, var(--rx-gray-12));
 }
 
 /* Checkbox variant - Container for checkbox */

src/main/frontend/components/property/value.css

@@ -157,6 +157,12 @@
   color: var(--lx-gray-12, var(--rx-gray-12)) !important;
 }
 
+/* Don't override icon color in create variant list-item-icon - use accent color */
+.ui__dropdown-menu-content .cp__select-main .item-results-wrap .menu-link.chosen .list-item-icon--create .ui__icon,
+.ui__dropdown-menu-content .ui__combobox .item-results-wrap .menu-link.chosen .list-item-icon--create .ui__icon {
+  color: var(--lx-accent-12, var(--rx-accent-12)) !important;
+}
+
 /* Exception: Preserve gray-11 for quoted text in "New option" */
 .ui__dropdown-menu-content .cp__select-main .item-results-wrap .menu-link .text-gray-11,
 .ui__dropdown-menu-content .ui__combobox .item-results-wrap .menu-link .text-gray-11 {