refactor: remove hard-coded styles

sepal_ui/frontend/json/file_icons.json

@@ -1,21 +1,21 @@
 {
-  "": { "color": ["#ffca28", "#ffc107"], "icon": "fa-regular fa-folder" },
-  ".csv": { "color": ["#4caf50", "#00c853"], "icon": "fa-solid fa-table" },
-  ".txt": { "color": ["#4caf50", "#00c853"], "icon": "fa-solid fa-table" },
-  ".tif": { "color": ["#9c27b0", "#673ab7"], "icon": "fa-regular fa-image" },
-  ".tiff": { "color": ["#9c27b0", "#673ab7"], "icon": "fa-regular fa-image" },
-  ".vrt": { "color": ["#9c27b0", "#673ab7"], "icon": "fa-regular fa-image" },
+  "": { "color": "primary_contrast", "icon": "fa-regular fa-folder" },
+  ".csv": { "color": "secondary_contrast", "icon": "fa-solid fa-table" },
+  ".txt": { "color": "secondary_contrast", "icon": "fa-solid fa-table" },
+  ".tif": { "color": "secondary_contrast", "icon": "fa-regular fa-image" },
+  ".tiff": { "color": "secondary_contrast", "icon": "fa-regular fa-image" },
+  ".vrt": { "color": "secondary_contrast", "icon": "fa-regular fa-image" },
   ".shp": {
-    "color": ["#9c27b0", "#673ab7"],
+    "color": ["secondary_contrast"],
     "icon": "fa-solid fa-vector-square"
   },
   ".geojson": {
-    "color": ["#9c27b0", "#673ab7"],
+    "color": ["secondary_contrast"],
     "icon": "fa-solid fa-vector-square"
   },
-  "DEFAULT": { "color": ["#00bcd4", "#03a9f4"], "icon": "fa-regular fa-file" },
+  "DEFAULT": { "color": "anchor", "icon": "fa-regular fa-file" },
   "PARENT": {
-    "color": ["#424242", "#ffffff"],
+    "color": "anchor",
     "icon": "fa-regular fa-folder-open"
   }
 }

sepal_ui/frontend/styles.py

@@ -37,7 +37,9 @@
 TYPES: Tuple[str, ...] = (
     "info",
     "primary",
+    "primary_contarst",
     "secondary",
+    "secondary_contrast",
     "accent",
     "error",
     "success",
@@ -64,7 +66,9 @@ class ThemeColors(Widget):
     _theme_name = Unicode().tag(sync=True)
 
     primary = Unicode().tag(sync=True)
+    primary_contrast = Unicode().tag(sync=True)
     secondary = Unicode().tag(sync=True)
+    secondary_contrast = Unicode().tag(sync=True)
     accent = Unicode().tag(sync=True)
     error = Unicode().tag(sync=True)
     info = Unicode().tag(sync=True)
@@ -80,7 +84,9 @@ class ThemeColors(Widget):
 dark_theme_colors = ThemeColors(
     _theme_name="dark",
     primary="#76591e",
+    primary_contrast="#bf8f2d",  # a bit lighter than the primary color
     secondary="#363e4f",
+    secondary_contrast="#5d76ab",
     error="#a63228",
     info="#c5c6c9",
     success="#3f802a",
@@ -96,9 +102,11 @@ class ThemeColors(Widget):
 light_theme_colors = ThemeColors(
     _theme_name="light",
     primary="#5BB624",
+    primary_contrast="#76b353",
     accent="#f3f3f3",
     anchor="#f3f3f3",
-    secondary=v.theme.themes.light.secondary,
+    secondary="#2199C4",
+    secondary_contrast="#5d76ab",
     success=v.theme.themes.light.success,
     info=v.theme.themes.light.info,
     warning=v.theme.themes.light.warning,

sepal_ui/mapping/inspector_control.py

@@ -1,6 +1,5 @@
 """Customized ``Control`` to display the value of all available layers on a specific pixel."""
 
-import json
 from pathlib import Path
 from typing import Optional, Sequence, Union
 
@@ -16,7 +15,6 @@
 from traitlets import Bool
 
 from sepal_ui import sepalwidgets as sw
-from sepal_ui.frontend import styles as ss
 from sepal_ui.mapping.layer import EELayer
 from sepal_ui.mapping.menu_control import MenuControl
 from sepal_ui.message import ms
@@ -60,11 +58,9 @@ def __init__(self, m: Map, open_tree: bool = True, **kwargs) -> None:
 
         # create a loading to place it on top of the card. It will always be visible
         # even when the card is scrolled
-        p_style = json.loads((ss.JSON_DIR / "progress_bar.json").read_text())
         self.w_loading = sw.ProgressLinear(
             indeterminate=False,
             background_color="menu",
-            color=p_style["color"][v.theme.dark],
         )
 
         # set up the content

sepal_ui/mapping/layers_control.py

@@ -1,15 +1,12 @@
 """Extend functionalities of the ipyleaflet layer control."""
 
-import json
 from types import SimpleNamespace
 from typing import Optional
 
-import ipyvuetify as v
 from ipyleaflet import GeoJSON, Map, TileLayer
 from ipywidgets import link
 
 from sepal_ui import sepalwidgets as sw
-from sepal_ui.frontend import styles as ss
 from sepal_ui.mapping.menu_control import MenuControl
 from sepal_ui.message import ms
 
@@ -170,11 +167,9 @@ def __init__(self, m: Map, **kwargs) -> None:
 
         # create a loading to place it on top of the card. It will always be visible
         # even when the card is scrolled
-        p_style = json.loads((ss.JSON_DIR / "progress_bar.json").read_text())
         self.w_loading = sw.ProgressLinear(
             indeterminate=False,
             background_color="menu",
-            color=p_style["color"][v.theme.dark],
         )
         self.tile = sw.Tile("nested", "")
 

sepal_ui/sepalwidgets/app.py

@@ -329,8 +329,8 @@ def __init__(
         icon = icon if icon else "fa-regular fa-folder"
 
         children = [
-            v.ListItemAction(children=[v.Icon(class_="white--text", children=[icon])]),
-            v.ListItemContent(children=[v.ListItemTitle(class_="white--text", children=[title])]),
+            v.ListItemAction(children=[v.Icon(children=[icon])]),
+            v.ListItemContent(children=[v.ListItemTitle(children=[title])]),
         ]
 
         # set default parameters

sepal_ui/sepalwidgets/inputs.py

@@ -248,11 +248,9 @@ def __init__(
             v_model="",
         )
 
-        p_style = json.loads((ss.JSON_DIR / "progress_bar.json").read_text())
         self.loading = v.ProgressLinear(
             indeterminate=False,
             background_color="menu",
-            color=p_style["color"][v.theme.dark],
         )
 
         self.file_list = v.List(
@@ -417,13 +415,13 @@ def _get_items(self) -> List[v.ListItem]:
         for el in list_dir:
             if el.is_dir():
                 icon = self.ICON_STYLE[""]["icon"]
-                color = self.ICON_STYLE[""]["color"][v.theme.dark]
+                color = self.ICON_STYLE[""]["color"]
             elif el.suffix in self.ICON_STYLE.keys():
                 icon = self.ICON_STYLE[el.suffix]["icon"]
-                color = self.ICON_STYLE[el.suffix]["color"][v.theme.dark]
+                color = self.ICON_STYLE[el.suffix]["color"]
             else:
                 icon = self.ICON_STYLE["DEFAULT"]["icon"]
-                color = self.ICON_STYLE["DEFAULT"]["color"][v.theme.dark]
+                color = self.ICON_STYLE["DEFAULT"]["color"]
 
             children = [
                 v.ListItemAction(children=[v.Icon(color=color, children=[icon])]),
@@ -446,7 +444,7 @@ def _get_items(self) -> List[v.ListItem]:
                 v.ListItemAction(
                     children=[
                         v.Icon(
-                            color=self.ICON_STYLE["PARENT"]["color"][v.theme.dark],
+                            color=self.ICON_STYLE["PARENT"]["color"],
                             children=[self.ICON_STYLE["PARENT"]["icon"]],
                         )
                     ]

sepal_ui/templates/panel_app/component/message/en/app.json

@@ -4,7 +4,8 @@
     "footer": "The sky is the limit \u00A9 {}",
     "banner": "This is a automatically generated application. Remove this banner once your application is ready.",
     "drawer_item": {
-      "about": "About"
+      "about": "About",
+      "widgets": "Widgets"
     }
   }
 }

sepal_ui/templates/panel_app/component/tile/widget_tile.py

@@ -0,0 +1,96 @@
+"""A demo tile showing some of the most frequent widgets available in the sepal_ui library."""
+
+import ipyvuetify as v
+import sepal_ui.sepalwidgets as sw
+from sepal_ui.mapping.sepal_map import SepalMap
+
+
+class WidgetTile(sw.Card):
+    def __init__(self):
+        """A demo tile showing all the widgets available in the sepal_ui library."""
+        # create the card
+        super().__init__(row=True, wrap=True, _metadata={"mount_id": "widget_tile"})
+
+        # Create widgets
+
+        select = sw.Select(
+            label="Select",
+            v_model="option1",
+            items=["option1", "option2", "option3"],
+            outlined=True,
+        )
+
+        slider = sw.Slider(
+            label="Slider",
+            v_model=50,
+            max=100,
+            min=0,
+            thumb_label=True,
+            step=1,
+        )
+
+        btn = sw.Btn("Button", color="primary", outlined=True)
+        btn1 = sw.Btn("Button", color="secondary", outlined=True)
+        btn2 = sw.Btn("Button", color="primary")
+        btn3 = sw.Btn("Button", color="secondary")
+        file_input = sw.FileInput()
+        map_ = SepalMap(zoom=10)
+
+        title = v.CardTitle(children=["test widgets tile"])
+
+        card = v.Card(class_="mb-4 pa-2", raised=True, xs12=True, children=[title, map_])
+
+        loading_card = v.Card(
+            class_="mb-6 pa-2",
+            raised=True,
+            xs12=True,
+            children=[title] + ["content " * 100],
+            loading=True,
+        )
+
+        warning_alert = sw.Alert().add_msg("This is a warning alert", type_="warning")
+        error_alert = sw.Alert().add_msg("This is an error alert", type_="error")
+        info_alert = sw.Alert().add_msg("This is an info alert", type_="info")
+        success_alert = sw.Alert().add_msg("This is a success alert", type_="success")
+
+        # Add widgets to the layout
+
+        self.children = [
+            card,
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[select]),
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[file_input]),
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[slider]),
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[btn]),
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[btn1]),
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[btn2]),
+            v.Flex(class_="mb-2", xs12=True, lg6=True, xl4=True, children=[btn3]),
+            v.Flex(
+                class_="mb-2",
+                xs12=True,
+                lg6=True,
+                xl4=True,
+                children=[warning_alert],
+            ),
+            v.Flex(
+                class_="mb-2",
+                xs12=True,
+                lg6=True,
+                xl4=True,
+                children=[error_alert],
+            ),
+            v.Flex(
+                class_="mb-2",
+                xs12=True,
+                lg6=True,
+                xl4=True,
+                children=[info_alert],
+            ),
+            v.Flex(
+                class_="mb-2",
+                xs12=True,
+                lg6=True,
+                xl4=True,
+                children=[success_alert],
+            ),
+            loading_card,
+        ]

sepal_ui/templates/panel_app/ui.ipynb

@@ -14,6 +14,7 @@
    "outputs": [],
    "source": [
     "from sepal_ui import sepalwidgets as sw\n",
+    "from component.tile.widget_tile import WidgetTile\n",
     "from component.message import cm"
    ]
   },
@@ -45,9 +46,9 @@
    "source": [
     "# load the partial files\n",
     "%run \"about_ui.ipynb\"\n",
-    "\n",
+    "widget_tile = WidgetTile()\n",
     "# Gather all the partial tiles that you created previously\n",
-    "app_content = [about_tile, disclaimer_tile]"
+    "app_content = [about_tile, disclaimer_tile, widget_tile]"
    ]
   },
   {
@@ -60,6 +61,7 @@
     "# fmt: off\n",
     "items = [\n",
     "    sw.DrawerItem(cm.app.drawer_item.about, \"fa-solid fa-question-circle\", card=\"about_tile\"),\n",
+    "    sw.DrawerItem(cm.app.drawer_item.widgets, \"fa-solid fa-wrench\", card=\"widget_tile\"),\n",
     "]\n",
     "# fmt: on\n",
     "\n",
@@ -115,7 +117,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.10"
+   "version": "3.10.12"
   },
   "voila": {
    "theme": "dark"