begin redesign of tree module.

html/extra-networks-card-minimal.html

@@ -1,3 +1,4 @@
 <div class="card-minimal" onclick={card_clicked} data-name="{name}">
-    {name}<span class="button-column">{copy_path_button}{metadata_button}{edit_button}</span>
+    <span class="name">{name}</span>
+    <span class="button-row">{copy_path_button}{metadata_button}{edit_button}</span>
 </div>

html/extra-networks-pane.html

@@ -0,0 +1,11 @@
+<div id='{tabname}_{network_type_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>
+    {subdirs_html}
+</div>
+<div id='{tabname}_{network_type_id}_pane' class='extra-network-pane'>
+    <div id='{tabname}_{network_type_id}_tree' class='extra-network-tree'>
+        {tree_html}
+    </div>
+    <div id='{tabname}_{network_type_id}_cards' class='extra-network-cards'>
+        {items_html}
+    </div>
+</div>

html/extra-networks-tree-directory.html

@@ -0,0 +1,4 @@
+<details {attributes} class='folder-item' ontoggle='extraNetworksFolderClick(event, "{tabname}_extra_search");'>
+<summary class='folder-item-summary'>{folder_name}</summary>
+{content}
+</details>

html/extra-networks-tree-file.html

@@ -0,0 +1 @@
+

javascript/extraNetworks.js

@@ -253,6 +253,28 @@ function saveCardPreview(event, tabname, filename) {
     event.preventDefault();
 }
 
+function extraNetworksFolderClick(event, tabs_id) {
+    var els = document.querySelectorAll(".folder-item-summary.selected");
+    [...els].forEach(el => {
+        el.classList.remove("selected");
+    });
+    event.target.classList.add("selected");
+
+    var searchTextArea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
+    var text = event.target.classList.contains("search-all") ? "" : event.target.firstChild.textContent.trim();
+    searchTextArea.value = text;
+    updateInput(searchTextArea);
+
+    if (event.target.parentElement.open) {
+        // before close
+        console.log("closed");
+    } else {
+        // before open
+        console.log("opened");
+        //console.log("Opened:", event.target.parentElement);
+    }
+}
+
 function extraNetworksSearchButton(tabs_id, event) {
     var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
     var button = event.target;

modules/shared_options.py

@@ -238,7 +238,6 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_dir_button_function": OptionInfo(False, "Add a '/' to the beginning of directory buttons").info("Buttons will display the contents of the selected directory without acting as a search filter."),
     "extra_networks_hidden_models": OptionInfo("When searched", "Show cards for models in hidden directories", gr.Radio, {"choices": ["Always", "When searched", "Never"]}).info('"When searched" option will only show the item when the search string has 4 characters or more'),
     "extra_networks_default_multiplier": OptionInfo(1.0, "Default multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}),
-    "extra_networks_tree_view": OptionInfo(False, "Show extra networks using a directory tree view.").needs_reload_ui(),
     "extra_networks_card_width": OptionInfo(0, "Card width for Extra Networks").info("in pixels"),
     "extra_networks_card_height": OptionInfo(0, "Card height for Extra Networks").info("in pixels"),
     "extra_networks_card_text_scale": OptionInfo(1.0, "Card text scale", gr.Slider, {"minimum": 0.0, "maximum": 2.0, "step": 0.01}).info("1 = original size"),

modules/ui_extra_networks.py

@@ -73,10 +73,11 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem])
     # the value can be an empty dict if the directory is empty. We want these
     # placeholders for empty dirs so we can inform the user later.
     for path in paths:
+        short_path = os.path.basename(path)
         # Wrap the path in a list since that is what the `_get_tree` expects.
-        res[path] = _get_tree([path])
+        res[short_path] = _get_tree([path])
-        if res[path]:
+        if res[short_path]:
-            res[path] = res[path][os.path.basename(path)]
+            res[short_path] = res[short_path][os.path.basename(path)]
 
     return res
 
@@ -153,10 +154,9 @@ class ExtraNetworksPage:
         self.title = title
         self.name = title.lower()
         self.id_page = self.name.replace(" ", "_")
-        if shared.opts.extra_networks_tree_view:
+        self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
-            self.card_page = shared.html("extra-networks-card-minimal.html")
+        self.card_page_template = shared.html("extra-networks-card.html")
-        else:
+        self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
-            self.card_page = shared.html("extra-networks-card.html")
         self.allow_prompt = True
         self.allow_negative_prompt = False
         self.metadata = {}
@@ -182,15 +182,14 @@ class ExtraNetworksPage:
 
     def search_terms_from_path(self, filename, possible_directories=None):
         abspath = os.path.abspath(filename)
-
         for parentdir in (possible_directories if possible_directories is not None else self.allowed_directories_for_previews()):
-            parentdir = os.path.abspath(parentdir)
+            parentdir = os.path.dirname(os.path.abspath(parentdir))
             if abspath.startswith(parentdir):
-                return abspath[len(parentdir):].replace('\\', '/')
+                return os.path.relpath(abspath, parentdir)
 
         return ""
 
-    def create_item_html(self, tabname: str, item: dict) -> str:
+    def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
         """Generates HTML for a single ExtraNetworks Item
 
         Args:
@@ -265,7 +264,10 @@ class ExtraNetworksPage:
             "tabname": quote_js(tabname),
         }
 
-        return self.card_page.format(**args)
+        if template:
+            return template.format(**args)
+        else:
+            return self.card_page.format(**args)
 
     def create_tree_view_html(self, tabname: str) -> str:
         """Generates HTML for displaying folders in a tree view.
@@ -276,53 +278,67 @@ class ExtraNetworksPage:
         Returns:
             HTML string generated for this tree view.
         """
-        self_name_id = self.name.replace(" ", "_")
+        res = f""
-        res = f"<div id='{tabname}_{self_name_id}_tree_view' class='extra-network-cards'>"
-
-        self.metadata = {}
-        self.items = {x["name"]: x for x in self.list_items()}
 
+        # Generate HTML for the tree.
         roots = self.allowed_directories_for_previews()
         tree_items = {v["filename"]: ExtraNetworksItem(v) for v in self.items.values()}
         tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
 
         if not tree:
-            return res + "</div>"
+            return res
 
-        file_template = "<li class='file-item'>{}</li>"
+        file_template = "<li class='file-item'>{card}</li>"
         dir_template = (
-            "<details {} class='folder-item'>"
+            "<details {attributes} class='folder-item'>"
-            "<summary class='folder-item-summary'>{}</summary>"
+            "<summary class='folder-item-summary' onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
-            "{}</ul>"
+            "{folder_name}"
+            "</summary>"
+            "<ul class='folder-container'>{content}</ul>"
             "</details>"
         )
 
         def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
             """Recursively builds HTML for a tree."""
-            _res = "<ul class='folder-container'>"
+            _res = ""
             if not data:
-                return "<ul style='list-style-type: \"⚠️\";'><li>DIRECTORY IS EMPTY</li></ul>"
+                return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
 
             for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
                 if isinstance(v, (ExtraNetworksItem,)):
-                    _res += file_template.format(self.create_item_html(tabname, v.item))
+                    item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
+                    _res += file_template.format(**{"card": item_html})
                 else:
-                    _res += dir_template.format("", k, _build_tree(v))
+                    tmp = dir_template.format(
+                        **{
+                            "attributes": "",
+                            "tabname": tabname,
+                            "folder_name": k,
+                            "content": _build_tree(v),
+                        }
+                    )
+                    _res += tmp
+                    
             return _res
 
-        res += "<ul class='folder-container'>"
         # Add each root directory to the tree.
         for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
             # If root is empty, append the "disabled" attribute to the template details tag.
-            res += dir_template.format("open" if v else "open disabled", k, _build_tree(v))
+            res += "<ul class='folder-container'>"
+            res += dir_template.format(
+                **{
+                    "attributes": "open" if v else "open",
+                    "tabname": tabname,
+                    "folder_name": k,
+                    "content": _build_tree(v),
+                }
+            )
+            res += "</ul>"
         res += "</ul>"
-        res += "</div>"
 
         return res
 
-    def create_card_view_html(self, tabname):
+    def create_subdirs_html(self, tabname):
-        items_html = ""
-        self.metadata = {}
         subdirs = {}
 
         for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
@@ -355,43 +371,53 @@ class ExtraNetworksPage:
             subdirs = {"": 1, **subdirs}
 
         subdirs_html_template = (
-            "<button class='lg secondary gradio-button custom-button{}' "
+            "<button class='lg secondary gradio-button custom-button {classes}' "
-            "onclick='extraNetworksSearchButton(\"{}_extra_search\", event)'>"
+            "onclick='extraNetworksSearchButton(\"{tabname}_extra_search\", event)'>"
-            "{}"
+            "{content}"
             "</button>"
         )
-        subdirs_html = "".join(
+        return "".join(
             [
                 subdirs_html_template.format(
-                    " search-all" if subdir == "" else "",
+                    **{
-                    tabname,
+                        "classes": "search-all" if not subdir else "",
-                    html.escape(subdir if subdir != "" else "all"),
+                        "tabname": tabname,
+                        "content": html.escape(subdir if subdir else "all"),
+                    }
                 ) for subdir in subdirs
             ]
         )
 
+    def create_card_view_html(self, tabname):
+        res = ""
         self.items = {x["name"]: x for x in self.list_items()}
         for item in self.items.values():
-            items_html += self.create_item_html(tabname, item)
+            res += self.create_item_html(tabname, item, self.card_page_template)
 
-        if items_html == "":
+        if res == "":
             dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
-            items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
+            res = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
-
-        self_name_id = self.name.replace(" ", "_")
-
-        res = (
-            f"<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>{subdirs_html}</div>"
-            f"<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>{items_html}</div>"
-        )
 
         return res
 
     def create_html(self, tabname):
-        if shared.opts.extra_networks_tree_view:
+        self.metadata = {}
-            return self.create_tree_view_html(tabname)
+        self.items = {x["name"]: x for x in self.list_items()}
-        else:
+
-            return self.create_card_view_html(tabname)
+        tree_view_html = self.create_tree_view_html(tabname)
+        subdirs_html = self.create_subdirs_html(tabname)
+        card_view_html = self.create_card_view_html(tabname)
+        network_type_id = self.name.replace(" ", "_")
+
+        return self.extra_networks_pane_template.format(
+            **{
+                "tabname": tabname,
+                "network_type_id": network_type_id,
+                "tree_html": tree_view_html,
+                "subdirs_html": subdirs_html,
+                "items_html": card_view_html,
+            }
+        )
 
     def create_item(self, name, index=None):
         raise NotImplementedError()
@@ -516,19 +542,19 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
             related_tabs.append(tab)
 
-    tab_controls = {}
-
     edit_search = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
     dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
     button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
     button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
     checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
 
-    tab_controls["edit_search"] = edit_search
+    tab_controls = [
-    tab_controls["dropdown_sort"] = dropdown_sort
+        edit_search,
-    tab_controls["button_sortorder"] = button_sortorder
+        dropdown_sort,
-    tab_controls["button_refresh"] = button_refresh
+        button_sortorder,
-    tab_controls["checkbox_show_dirs"] = checkbox_show_dirs
+        button_refresh,
+        checkbox_show_dirs,
+    ]
 
     ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
     ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
@@ -538,32 +564,28 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             fn=lambda: [gr.update(visible=False) for _ in tab_controls],
             _js="function(){ extraNetworksUrelatedTabSelected('" + tabname + "'); }",
             inputs=[],
-            outputs=list(tab_controls.values()),
+            outputs=tab_controls,
             show_progress=False,
         )
 
-    visible_controls = list(tab_controls.keys())
-    if shared.opts.extra_networks_tree_view:
-        visible_controls = ["button_refresh"]
-
     for page, tab in zip(ui.stored_extra_pages, related_tabs):
         allow_prompt = "true" if page.allow_prompt else "false"
         allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
 
         jscode = (
             "extraNetworksTabSelected("
-                f"'{tabname}', "
+            f"'{tabname}', "
-                f"'{tabname}_{page.id_page}_prompts', "
+            f"'{tabname}_{page.id_page}_prompts', "
-                f"'{allow_prompt}', "
+            f"'{allow_prompt}', "
-                f"'{allow_negative_prompt}'"
+            f"'{allow_negative_prompt}'"
             ");"
         )
 
         tab.select(
-            fn=lambda: [gr.update(visible=k in visible_controls) for k in tab_controls],
+            fn=lambda: [gr.update(visible=True) for _ in tab_controls],
             _js="function(){ " + jscode + " }",
             inputs=[],
-            outputs=list(tab_controls.values()),
+            outputs=tab_controls,
             show_progress=False,
         )
 

style.css

@@ -863,7 +863,7 @@ footer {
     margin-bottom: 1em;
 }
 
-.extra-network-cards{
+.extra-network-pane{
     height: calc(100vh - 24rem);
     overflow: clip scroll;
     resize: vertical;
@@ -908,53 +908,75 @@ footer {
     width: auto;
 }
 
-.extra-network-cards .nocards{
+.extra-network-pane .nocards{
     margin: 1.25em 0.5em 0.5em 0.5em;
 }
 
-.extra-network-cards .nocards h1{
+.extra-network-pane .nocards h1{
     font-size: 1.5em;
     margin-bottom: 1em;
 }
 
-.extra-network-cards .nocards li{
+.extra-network-pane .nocards li{
     margin-left: 0.5em;
 }
 
+.extra-network-pane :is(.card, .card-minimal) .button-row{
+    display: inline-flex;
+    visibility: hidden;
+    color: white;
+}
 
-.extra-network-cards .card .button-row{
+.extra-network-pane .card .button-row {
-    display: none;
     position: absolute;
-    color: white;
     right: 0;
-    z-index: 1
+    z-index: 1;
-}
-.extra-network-cards .card:hover .button-row{
-    display: flex;
 }
 
-.extra-network-cards .card .card-button{
+.extra-network-pane .card-minimal .button-row {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    align-items: center;
+}
+
+.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
+    visibility: visible;
+}
+
+.extra-network-pane .card-button{
     color: white;
 }
 
-.extra-network-cards .card .metadata-button:before{
+.extra-network-pane .copy-path-button:before {
+    content: "⎘";
+}
+
+.extra-network-pane .metadata-button:before{
     content: "🛈";
 }
 
-.extra-network-cards .card .edit-button:before{
+.extra-network-pane .edit-button:before{
     content: "🛠";
 }
 
-.extra-network-cards .card .card-button {
+.extra-network-pane .card-button {
-    text-shadow: 2px 2px 3px black;
-    padding: 0.25em 0.1em;
-    font-size: 200%;
     width: 1.5em;
+    text-shadow: 2px 2px 3px black;
+    color: white;
+    padding: 0.25em 0.1em;
 }
-.extra-network-cards .card .card-button:hover{
+
+.extra-network-pane .card-button:hover{
     color: red;
 }
 
+.extra-network-pane .card .card-button {
+    font-size: 2rem;
+}
+
+.extra-network-pane .card-minimal .card-button {
+    font-size: 1rem;
+}
 
 .standalone-card-preview.card .preview{
     position: absolute;
@@ -963,7 +985,7 @@ footer {
     height:100%;
 }
 
-.extra-network-cards .card, .standalone-card-preview.card{
+.extra-network-pane .card, .standalone-card-preview.card{
     display: inline-block;
     margin: 0.5rem;
     width: 16rem;
@@ -980,15 +1002,15 @@ footer {
     background-image: url('./file=html/card-no-preview.png')
 }
 
-.extra-network-cards .card:hover{
+.extra-network-pane .card:hover{
     box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
 }
 
-.extra-network-cards .card .actions .additional{
+.extra-network-pane .card .actions .additional{
     display: none;
 }
 
-.extra-network-cards .card .actions{
+.extra-network-pane .card .actions{
     position: absolute;
     bottom: 0;
     left: 0;
@@ -999,45 +1021,45 @@ footer {
     text-shadow: 0 0 0.2em black;
 }
 
-.extra-network-cards .card .actions *{
+.extra-network-pane .card .actions *{
     color: white;
 }
 
-.extra-network-cards .card .actions .name{
+.extra-network-pane .card .actions .name{
     font-size: 1.7em;
     font-weight: bold;
     line-break: anywhere;
 }
 
-.extra-network-cards .card .actions .description {
+.extra-network-pane .card .actions .description {
     display: block;
     max-height: 3em;
     white-space: pre-wrap;
     line-height: 1.1;
 }
 
-.extra-network-cards .card .actions .description:hover {
+.extra-network-pane .card .actions .description:hover {
     max-height: none;
 }
 
-.extra-network-cards .card .actions:hover .additional{
+.extra-network-pane .card .actions:hover .additional{
     display: block;
 }
 
-.extra-network-cards .card ul{
+.extra-network-pane .card ul{
     margin: 0.25em 0 0.75em 0.25em;
     cursor: unset;
 }
 
-.extra-network-cards .card ul a{
+.extra-network-pane .card ul a{
     cursor: pointer;
 }
 
-.extra-network-cards .card ul a:hover{
+.extra-network-pane .card ul a:hover{
     color: red;
 }
 
-.extra-network-cards .card .preview{
+.extra-network-pane .card .preview{
     position: absolute;
     object-fit: cover;
     width: 100%;
@@ -1158,48 +1180,9 @@ body.resizing .resize-handle {
     border-left: 1px dashed var(--border-color-primary);
 }
 
-.extra-network-cards .card .copy-path-button:before {
+.extra-network-pane .card-minimal {
-    content: "⎘";
-}
-
-.extra-network-cards .card-minimal .button-column {
-    display: inline-flex;
-    visibility: hidden;
-    color: white;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    align-items: center;
-}
-
-.extra-network-cards .card-minimal:hover .button-column {
-    visibility: visible;
-}
-
-.extra-network-cards .card-minimal .copy-path-button:before {
-    content: "⎘";
-}
-
-.extra-network-cards .card-minimal .metadata-button:before{
-    content: "🛈";
-}
-
-.extra-network-cards .card-minimal .edit-button:before{
-    content: "🛠";
-}
-
-.extra-network-cards .card-minimal .card-button {
-    color: white;
-    text-shadow: 2px 2px 3px black;
-    font-size: 1rem;
-    width: 1.5rem;
-}
-
-.extra-network-cards .card-minimal .card-button:hover {
-    color: red;
-}
-
-.extra-network-cards .card-minimal {
     display: inline-flex;
+    flex-grow: 1;
     position: relative;
     overflow: hidden;
     cursor: pointer;
@@ -1208,44 +1191,87 @@ body.resizing .resize-handle {
     line-break: anywhere;
 }
 
-.file-item {
+/* Pushes buttons to right */
-    list-style-type: '📄';
+.extra-network-pane .card-minimal .name {
-}
+    flex-grow: 1;
-
-/* prevents clicking/collapsing of details tags when disabled attribute is used*/
-details[disabled] summary {
-    pointer-events: none;
-    user-select: none;
-}
-
-details.folder-item > summary {
-    list-style-type: '📁';
-}
-
-details.folder-item[open] > summary {
-    list-style-type: '📂';
 }
 
 .file-item,
 .folder-item,
 .folder-item-summary {
-    display: block;
+    padding-left: 0.05rem;
-    font-size: 1rem;
-    padding: 0.05rem;
     cursor: pointer;
     user-select: none;
+    font-size: 1rem;
 }
 
-.folder-item-summary:hover,
+.extra-network-pane .extra-network-tree .folder-item-summary:hover,
-.file-item:hover {
+.extra-network-pane .extra-network-tree .file-item:hover {
     -webkit-transition: all 0.1s ease-in-out;
 	transition: all 0.1s ease-in-out;
     background-color: var(--neutral-200);
 }
 
-.dark .folder-item-summary:hover,
+.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
-.dark .file-item:hover {
+.dark .extra-network-pane .extra-network-tree .file-item:hover {
     -webkit-transition: all 0.05s ease-in-out;
 	transition: all 0.05s ease-in-out;
     background-color: var(--neutral-800);
 }
+
+/* prevents clicking/collapsing of details tags when disabled attribute is used*/
+.extra-network-pane .extra-network-tree details[disabled] summary {
+    pointer-events: none;
+    user-select: none;
+}
+
+.extra-network-pane .extra-network-tree details.folder-item > summary {
+    list-style-type: '📁';
+    text-overflow: ellipsis;
+}
+
+.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
+    list-style-type: '📂';
+    text-overflow: ellipsis;
+}
+
+.extra-network-pane .extra-network tree ul.folder-container {
+    list-style: none;
+    font-size: 1rem;
+    text-overflow: ellipsis;
+}
+
+.extra-network-pane .extra-network-tree li.file-item {
+    display: flex;
+    position: relative;
+    align-items: center;
+}
+
+.extra-network-pane .extra-network-tree li.file-item::before {
+    content: '📄';
+    font-size: 0.85rem;
+    vertical-align: middle;
+}
+
+.extra-network-pane {
+    display: flex;
+}
+
+.extra-network-pane .extra-network-subdirs {
+    display: block;
+}
+.extra-network-pane .extra-network-tree {
+    font-size: 1rem;
+    width: 25%;
+}
+.extra-network-pane .extra-network-cards {
+    flex-grow: 1;
+}
+
+.dark .extra-network-tree .folder-item-summary.selected{
+    background-color: var(--neutral-800);
+}
+
+.extra-network-tree .folder-item-summary.selected {
+    background-color: var(--neutral-200);
+}