django-unfold 0.43.0__py3-none-any.whl → 0.44.0__py3-none-any.whl

unfold/templates/unfold/helpers/navigation_header.html

@@ -0,0 +1,13 @@
+<div class="border-b border-base-200 mb-5 py-3 dark:border-base-800">
+    <div class="flex font-semibold gap-3 h-10 items-center px-6">
+        {% if site_logo %}
+            {% include "unfold/helpers/site_logo.html" %}
+        {% elif branding %}
+            {% include "unfold/helpers/site_icon.html" %}
+        {% endif %}
+
+        <div class="block cursor-pointer h-4.5 ml-auto xl:!hidden hover:text-base-700 dark:hover:text-base-200" x-on:click="sidebarMobileOpen = !sidebarMobileOpen">
+            <span class="material-symbols-outlined">close</span>
+        </div>
+    </div>
+</div>

unfold/templates/unfold/helpers/pagination_ellipsis.html

@@ -1,3 +1,3 @@
-<span class="text-gray-400">
+<span class="text-base-400">
     {{ ellipsis }}
 </span>

unfold/templates/unfold/helpers/search.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
 {% if sidebar_show_search %}
-    <div class="mb-5 mx-3 relative" x-data="{openSearchResults: false}">
-        <div class="bg-white border flex items-center overflow-hidden rounded-md shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
-            <span class="material-symbols-outlined md-18 pl-3 text-gray-400">manage_search</span>
+    <div class="mb-2.5 mx-3 relative" x-data="{openSearchResults: false}">
+        <div class="bg-white border border-base-200 flex items-center overflow-hidden rounded shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-base-900 dark:border-base-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
+            <span class="material-symbols-outlined md-18 pl-3 text-base-400">manage_search</span>
 
             <input type="search"
                    id="nav-filter"
@@ -14,10 +14,10 @@
                    hx-trigger="keyup changed delay:500ms, search"
                    hx-target="#search-results"
                    hx-indicator=".htmx-indicator"
-                   class="flex-grow font-medium overflow-hidden pl-2 pr-3 py-2 text-font-default-light text-sm focus:outline-none dark:bg-gray-900 dark:text-font-default-dark"
+                   class="flex-grow font-medium overflow-hidden pl-2 pr-3 py-2 text-font-default-light text-sm placeholder-base-400 focus:outline-none dark:bg-base-900 dark:text-font-default-dark"
                    placeholder="{% translate 'Search apps and models...' %}" aria-label="{% translate 'Filter navigation items' %}" />
             <div class="absolute opacity-0 htmx-indicator mt-0.5 right-2 top-2">
-                <span class="animate-spin material-symbols-outlined md-18 text-gray-300">sync</span>
+                <span class="animate-spin material-symbols-outlined md-18 text-base-300">sync</span>
             </div>
         </div>
 

unfold/templates/unfold/helpers/search_results.html

@@ -1,9 +1,9 @@
 {% if results %}
-    <ul class="absolute bg-white border left-0 mt-12 right-0 rounded top-0 shadow-sm text-sm z-10 dark:bg-gray-800 dark:border-gray-700">
+    <ul class="absolute bg-white border border-base-200 left-0 mt-12 right-0 rounded top-0 shadow-sm text-sm z-10 dark:bg-base-800 dark:border-base-700">
         {% for app in results %}
             {% for model in app.models %}
                 <li>
-                    <a href="{{ model.admin_url }}" class="block px-3 py-2 truncate hover:text-gray-700 dark:hover:text-gray-200">
+                    <a href="{{ model.admin_url }}" class="block px-3 py-2 truncate hover:text-base-700 dark:hover:text-base-200">
                         {{ app.name }} <span class="align-text-top material-symbols-outlined md-18">arrow_right_alt</span> {{ model.name }}
                     </a>
                 </li>

unfold/templates/unfold/helpers/site_icon.html

@@ -3,17 +3,19 @@
 {% if site_icon %}
     <a href="{% url "admin:index" %}">
         {% if site_icon.light and site_icon.dark %}
-            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden mr-4 dark:block"/>
+            <img src="{{ site_icon.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden dark:block"/>
 
-            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 mr-4 dark:hidden" />
+            <img src="{{ site_icon.light }}" alt="{% trans 'Home' %}" class="block h-8 dark:hidden" />
         {% else %}
-            <img src="{{ site_icon }}" class="h-8 mr-4" alt="{% trans 'Home' %}" />
+            <img src="{{ site_icon }}" class="h-8" alt="{% trans 'Home' %}" />
         {% endif %}
     </a>
 {% else %}
-    <a href="{% url "admin:index" %}" class="bg-primary-600 flex h-8 items-center justify-center rounded-md mr-4 text-white text-xs w-8">
+    <a href="{% url "admin:index" %}" class="bg-primary-600 flex h-8 items-center justify-center rounded text-white text-xs w-8">
         <span class="material-symbols-outlined md-18">{% if site_symbol %}{{ site_symbol }}{% else %}settings{% endif %}</span>
     </a>
 {% endif %}
 
-{{ branding }}
+<span class="text-font-important-light tracking-tight dark:text-font-important-dark xl:text-base">
+    {{ branding }}
+</span>

unfold/templates/unfold/helpers/site_logo.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<a  href="{% url "admin:index" %}">
+<a href="{% url "admin:index" %}">
     {% if site_logo.light and site_logo.dark %}
         <img src="{{ site_logo.dark }}" alt="{% trans 'Home' %}" class="h-8 hidden mr-4 dark:block"/>
 

unfold/templates/unfold/helpers/submit.html

@@ -1,3 +1,3 @@
-<button type="submit" {% if name %}name="{{ name}}"{% endif %} class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md self-end text-sm text-white">
+<button type="submit" {% if name %}name="{{ name}}"{% endif %} class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded self-end text-sm text-white">
     {{ title }}
 </button>

unfold/templates/unfold/helpers/tab_action.html

@@ -1,5 +1,5 @@
-<li class="border-b flex-grow text-center md:border-b-0 md:border-r last:border-0 dark:border-gray-800">
-    <a href="{{ link }}" class="block px-4 py-2 text-left whitespace-nowrap"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
+<li class="border-b flex-grow text-center md:border-b-0 md:border-r last:border-0 dark:border-base-700">
+    <a href="{{ link }}" class="block px-4 py-2 text-left whitespace-nowrap hover:text-primary-600 dark:hover:text-primary-500"{% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}>
         {{ title }}
     </a>
 </li>

unfold/templates/unfold/helpers/tab_list.html

@@ -2,13 +2,13 @@
 
 {% if not is_popup %}
     {% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
-        <div class="flex items-start flex-col mb-4 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end">
+        <div class="flex items-start flex-col mb-4 text-sm w-full md:border-b dark:md:border-base-800 md:border-l-0 md:flex-row md:items-center md:justify-end">
             {% if inlines_list or tabs_list %}
-                <ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
+                <ul class="border rounded flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-base-800">
                     {% for item in tabs_list %}
                         {% if item.has_permission %}
-                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
-                                <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}" class="block px-3 py-2 md:py-4 md:px-0 dark:border-gray-800 {% if item.active %} border-b font-semibold -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 md:border-primary-500 dark:md:!border-primary-600{% else %}font-medium hover:text-primary-600 dark:hover:text-primary-500{% endif %}">
+                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
+                                <a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}" class="block px-3 py-2 md:py-4 md:px-0 dark:border-base-800 {% if item.active %} border-b font-semibold -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 md:border-primary-500 dark:md:!border-primary-600{% else %}font-medium hover:text-primary-600 dark:hover:text-primary-500{% endif %}">
                                     {{ item.title }}
                                 </a>
                             </li>
@@ -16,21 +16,21 @@
                     {% endfor %}
 
                     {% if inlines_list %}
-                        <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
+                        <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
                             <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
                                href="#general"
                                x-on:click="activeTab = 'general'"
-                               x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-gray-800': activeTab != 'general'}">
+                               x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != 'general'}">
                                 {% trans "General" %}
                             </a>
                         </li>
 
                         {% for inline in inlines_list %}
-                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-gray-800">
+                            <li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
                                 <a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
                                    href="#{{ inline.opts.verbose_name|slugify }}"
                                    x-on:click="activeTab = '{{ inline.opts.verbose_name|slugify }}'"
-                                   x-bind:class="{'border-b border-gray-200 dark:border-gray-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-gray-800': activeTab != '{{ inline.opts.verbose_name|slugify }}'}">
+                                   x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:!border-primary-600 font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.opts.verbose_name|slugify }}', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != '{{ inline.opts.verbose_name|slugify }}'}">
                                     {% if inline.formset.max_num == 1 %}
                                         {{ inline.opts.verbose_name|capfirst }}
                                     {% else %}
@@ -44,7 +44,7 @@
             {% endif %}
 
             {% if actions_list or actions_detail or actions_items or nav_global %}
-                <ul class="border flex flex-col font-medium mb-4 mt-2 rounded-md shadow-sm md:flex-row md:mb-2 md:mt-0 dark:border-gray-800 max-md:w-full">
+                <ul class="border flex flex-col font-medium mb-4 mt-2 rounded shadow-sm md:flex-row md:mb-2 md:mt-0 dark:border-base-700 max-md:w-full">
                     {% for action in actions_list %}
                         {% include "unfold/helpers/tab_action.html" with title=action.title link=action.path %}
                     {% endfor %}

unfold/templates/unfold/helpers/theme_switch.html

@@ -1,28 +1,28 @@
 {% load i18n %}
 
 <div class="relative" x-data="{ openTheme: false }">
-    <a class="block cursor-pointer leading-none hover:text-gray-700  dark:hover:text-gray-200" x-on:click="openTheme = !openTheme">
+    <a class="block cursor-pointer h-4.5 leading-none hover:text-base-700 dark:hover:text-base-200" x-on:click="openTheme = !openTheme">
         <span class="material-symbols-outlined">
             <span x-text="adminTheme == 'dark' && 'dark_mode' || adminTheme == 'light' && 'light_mode' || 'computer'"></span>
         </span>
     </a>
 
-    <nav class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-40 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openTheme" @click.outside="openTheme = false">
-        <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+    <nav class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-40 z-50 dark:bg-base-800 dark:border-base-700" x-cloak x-show="openTheme" @click.outside="openTheme = false">
+        <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
            x-on:click="adminTheme = 'dark'"
            x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
             <span class="material-symbols-outlined mr-2">dark_mode</span>
             <span class="leading-none self-center">{% trans "Dark" %}</span>
         </a>
 
-        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
            x-on:click="adminTheme = 'light'"
            x-bind:class="adminTheme == 'light'  && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
             <span class="material-symbols-outlined mr-2">light_mode</span>
             <span class="leading-none self-center">{% trans "Light" %}</span>
         </a>
 
-        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+        <a class="cursor-pointer flex flex-row mx-1 px-3 py-1.5 rounded hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200"
            x-on:click="adminTheme = 'auto'"
            x-bind:class="adminTheme == 'auto' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">
             <span class="material-symbols-outlined mr-2">computer</span>

unfold/templates/unfold/helpers/userlinks.html

@@ -7,6 +7,10 @@
                 {% include "unfold/helpers/label.html" with text=environment.0 type=environment.1 %}
             {% endif %}
 
+            {% if extra_userlinks %}
+                {{ extra_userlinks }}
+            {% endif %}
+
             {% if show_languages %}
                 {% include "unfold/helpers/language_switch.html" %}
             {% endif %}

unfold/templates/unfold/helpers/welcomemsg.html

@@ -1,13 +1,17 @@
 {% load i18n %}
 
 <div class="flex flex-row flex-grow font-semibold items-center min-w-0 mr-3">
-    <span class="cursor-pointer hidden flex-row items-center text-sm xl:flex">
-        <span class="material-symbols-outlined" hx-get="{% url "admin:toggle_sidebar" %}" hx-swap="none" x-on:click="sidebarDesktopOpen = !sidebarDesktopOpen">
+    <span class="cursor-pointer flex flex-row items-center">
+        <span class="material-symbols-outlined !hidden xl:!block" hx-get="{% url "admin:toggle_sidebar" %}" hx-swap="none" x-on:click="sidebarDesktopOpen = !sidebarDesktopOpen">
+            dock_to_right
+        </span>
+
+        <span class="material-symbols-outlined !block xl:!hidden" x-on:click="sidebarMobileOpen = !sidebarMobileOpen">
             dock_to_right
         </span>
     </span>
 
-    <span class="hidden bg-gray-200 h-5 mx-3 w-px xl:block dark:bg-gray-700"></span>
+    <span class="block bg-base-200 h-5 mx-3 w-px dark:bg-base-700"></span>
 
     <h1 class="overflow-hidden text-ellipsis text-sm whitespace-nowrap xl:text-base text-font-important-light dark:text-font-important-dark">
         {% if content_title %}

unfold/templates/unfold/layouts/base_simple.html

@@ -3,14 +3,14 @@
 {% load i18n %}
 
 {% block base %}
-    <div class="flex min-h-screen">
+    <div id="page" class="flex min-h-screen">
         {% if not is_popup and is_nav_sidebar_enabled %}
             {% block nav-sidebar %}
                 {% include "admin/nav_sidebar.html" %}
             {% endblock %}
         {% endif %}
 
-        <div id="main" class="shadow flex-grow min-w-0">
+        <div id="main" class="flex-grow min-w-0" x-resize="mainWidth = $width">
             {% block content_before %}
                 {% include "unfold/helpers/header.html" %}
             {% endblock %}

unfold/templates/unfold/layouts/skeleton.html

@@ -10,9 +10,10 @@
 {% capture as nav_global silent %}{% block nav-global %}{% endblock %}{% endcapture %}
 {% capture as nav_global_side silent %}{% block nav-global-side %}{% endblock %}{% endcapture %}
 {% capture as actions_items silent %}{% block actions-items %}{% endblock %}{% endcapture %}
+{% capture as extra_userlinks silent %}{% block extra_userlinks %}{% endblock %}{% endcapture %}
 
 <!DOCTYPE html>
-<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr,auto" }}" {% if theme %}class="{{ theme }}"{% else %}x-data="{ adminTheme: $persist('auto').as('adminTheme') }" x-bind:class="{'dark': adminTheme === 'dark' || (adminTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)}" x-cloak{% endif %}>
+<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" dir="{{ LANGUAGE_BIDI|yesno:"rtl,ltr,auto" }}" {% if theme %}class="{{ theme }}"{% endif %} x-data="{ adminTheme: {% if theme %}'{{ theme }}'{% else %}$persist('auto').as('adminTheme'){% endif %} }" x-bind:class="{'dark': adminTheme === 'dark' || (adminTheme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)}" x-cloak>
 
     <head>
         <title>{% block title %}{% endblock %}</title>
@@ -34,6 +35,7 @@
         <script src="{% static 'unfold/js/alpine.anchor.js' %}" defer></script>
         <script src="{% static 'unfold/js/alpine.persist.js' %}" defer></script>
         <script src="{% static 'unfold/js/alpine.sort.js' %}" defer></script>
+        <script src="{% static 'unfold/js/alpine.resize.js' %}" defer></script>
         <script src="{% static 'unfold/js/alpine.js' %}" defer></script>
         <script src="{% static 'unfold/js/htmx.js' %}"></script>
         <script src="{% static 'unfold/js/chart.js' %}"></script>
@@ -55,10 +57,16 @@
         {% block blockbots %}
             <meta name="robots" content="NONE,NOARCHIVE">
         {% endblock %}
+    </head>
 
+    <body class="antialiased bg-white font-sans text-font-default-light text-sm dark:bg-base-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ mainWidth: 0, activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = window.location.hash?.replace('#', '') || 'general'">
         {% if colors %}
-            <style>
+            <style id="unfold-theme-colors">
                 :root {
+                    {% if border_radius %}
+                        --border-radius: {{ border_radius }};
+                    {% endif %}
+
                     {% for name, weights in colors.items %}
                         {% for weight, value in weights.items %}
                             --color-{{ name }}-{{ weight }}: {{ value }};
@@ -67,12 +75,10 @@
                 }
             </style>
         {% endif %}
-    </head>
 
-    <body class="antialiased bg-white font-sans text-font-default-light text-sm dark:bg-gray-900 dark:text-font-default-dark {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}" data-admin-utc-offset="{% now "Z" %}" x-data="{ activeTab: 'general', sidebarMobileOpen: false, sidebarDesktopOpen: {% if request.session.toggle_sidebar == False %}false{% else %}true{% endif %} }" x-init="activeTab = window.location.hash?.replace('#', '') || 'general'">
         {% block base %}{% endblock %}
 
-        <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
+        <div id="modal-overlay" class="backdrop-blur-sm bg-opacity-80 bg-base-900 bottom-0 fixed hidden left-0 mr-1 right-0 top-0 z-50"></div>
         <script src="{% static 'unfold/js/simplebar.js' %}"></script>
     </body>
 

unfold/templates/unfold/widgets/clearable_file_input.html

@@ -8,9 +8,9 @@
     </div>
 {% endif %}
 
-<div class="border flex items-center overflow-hidden rounded-md shadow-sm text-sm max-w-2xl dark:border-gray-700">
+<div class="border border-base-200 flex items-center overflow-hidden rounded shadow-sm text-sm max-w-2xl dark:border-base-700">
     {% if widget.is_initial and not widget.required %}
-        <div class="bg-gray-50 border-r flex flex-none items-center self-stretch px-3 dark:bg-white/[.02] dark:border-gray-700 dark:text-font-default-dark">
+        <div class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-white/[.02] dark:border-base-700 dark:text-font-default-dark">
             <label for="{{ widget.checkbox_id }}" class="flex items-center">
                 <input type="checkbox"{% if widget.class %} class="{{ widget.class }}"{% endif %} name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" />
 
@@ -21,20 +21,20 @@
         </div>
     {% endif %}
 
-    <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-gray-900">
+    <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
-    <div class="flex flex-none items-center leading-none self-stretch">
+    <div class="bg-white flex flex-none items-center leading-none self-stretch dark:bg-base-900">
         <div class="hidden">
             <input type="{{ widget.type }}" name="{{ widget.name }}" {% include "django/forms/widgets/attrs.html" %} />
         </div>
 
         {% if widget.is_initial %}
-            <a href="{{ widget.value.url }}" class="border-r cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" target="_blank">
+            <a href="{{ widget.value.url }}" class="border-r border-base-200 cursor-pointer text-base-400 px-3 hover:text-base-700 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200" target="_blank">
                 <span class="material-symbols-outlined">download</span>
             </a>
         {% endif %}
 
-        <label for="{{ widget.attrs.id }}" class="cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200">
+        <label for="{{ widget.attrs.id }}" class="cursor-pointer text-base-400 px-3 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200">
             <span class="material-symbols-outlined">upload</span>
         </label>
     </div>

unfold/templates/unfold/widgets/clearable_file_input_small.html

@@ -1,9 +1,9 @@
 {% load i18n static %}
 
 <div class="flex flex-row">
-    <div class="border flex items-center overflow-hidden rounded-md shadow-sm text-sm max-w-2xl w-full focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
+    <div class="border border-base-200 flex items-center overflow-hidden rounded shadow-sm text-sm max-w-2xl w-full focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:border-base-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
         {% if widget.is_initial and not widget.required %}
-            <div class="bg-gray-50 border-r flex flex-none items-center self-stretch px-3 dark:bg-gray-900 dark:border-r-gray-700">
+            <div class="bg-base-50 border-r border-base-200 flex flex-none items-center self-stretch px-3 dark:bg-base-900 dark:border-r-gray-700">
                 <label for="{{ widget.checkbox_id }}" class="flex items-center">
                     <input type="checkbox"{% if widget.class %} class="{{ widget.class }}"{% endif %} name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}" />
 
@@ -14,7 +14,7 @@
             </div>
         {% endif %}
 
-        <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-gray-900">
+        <input type="text" aria-label="{% trans 'Choose file to upload' %}" value="{% if widget.value %}{{ widget.value.url }}{% else %}{% trans 'Choose file to upload' %}{% endif %}" disabled class="bg-white flex-grow font-medium min-w-0 px-3 py-2 text-ellipsis dark:bg-base-900">
 
         <div class="flex flex-none items-center leading-none self-stretch">
             <div class="hidden">
@@ -22,12 +22,12 @@
             </div>
 
             {% if widget.is_initial %}
-                <a href="{{ widget.value.url }}" class="border-r cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" target="_blank">
+                <a href="{{ widget.value.url }}" class="border-r border-base-200 cursor-pointer text-base-400 px-3 hover:text-base-700 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200" target="_blank">
                     <span class="material-symbols-outlined">download</span>
                 </a>
             {% endif %}
 
-            <label for="{{ widget.attrs.id }}" class="cursor-pointer text-gray-400 px-3 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200">
+            <label for="{{ widget.attrs.id }}" class="cursor-pointer text-base-400 px-3 hover:text-base-700 dark:text-base-500 dark:hover:text-base-200">
                 <span class="material-symbols-outlined">file_upload</span>
             </label>
         </div>
@@ -35,11 +35,11 @@
 
     {% if widget.attrs.accept == 'image/*' and widget.is_initial %}
         <div class="h-9.5 ml-3 relative w-9.5">
-            <div class="absolute border flex font-medium h-full items-center left-0 rounded-md justify-center shadow-sm text-gray-400 top-0 w-full z-10 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500">
+            <div class="absolute border flex font-medium h-full items-center left-0 rounded justify-center shadow-sm text-base-400 top-0 w-full z-10 dark:bg-base-900 dark:border-base-700 dark:text-base-500">
                 ?
             </div>
 
-            <a href="{{ widget.value.url }}" target="_blank" class="bg-center bg-cover bg-no-repeat block h-9.5 overflow-hidden relative rounded-md w-9.5 z-20" style="background-image: url('{{ widget.value.url }}')">
+            <a href="{{ widget.value.url }}" target="_blank" class="bg-center bg-cover bg-no-repeat block h-9.5 overflow-hidden relative rounded w-9.5 z-20" style="background-image: url('{{ widget.value.url }}')">
             </a>
         </div>
     {% endif %}

unfold/templates/unfold/widgets/foreign_key_raw_id.html

@@ -2,7 +2,7 @@
     {% include 'django/forms/widgets/input.html' %}
 
     {% if related_url %}
-        <a href="{{ related_url }}" class="related-lookup view-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm w-9.5 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" id="lookup_id_{{ widget.name }}">
+        <a href="{{ related_url }}" class="related-lookup view-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200" id="lookup_id_{{ widget.name }}">
             <span class="material-symbols-outlined text-sm">search</span>
         </a>
     {% endif %}

unfold/templates/unfold/widgets/radio.html

@@ -1,5 +1,5 @@
 {% with id=widget.attrs.id %}
-    <div{% if id %} id="{{ id }}"{% endif %} class="flex gap-2 {% if radio_style == 1 %} flex-row{% else %} flex-col{% endif %}">
+    <div{% if id %} id="{{ id }}"{% endif %} class="flex gap-2 {% if radio_style == 1 %} flex-row gap-4{% else %} flex-col{% endif %}">
         {% for group, options, index in widget.optgroups %}
             {% if group %}
                 <div>

unfold/templates/unfold/widgets/range.html

@@ -3,7 +3,7 @@
         {% include widget.template_name %}
 
         {% if forloop.first %}
-            <div class="px-4 text-gray-300">
+            <div class="px-4 text-base-300">
                 -
             </div>
         {% endif %}

unfold/templates/unfold/widgets/related_widget_wrapper.html

@@ -9,7 +9,7 @@
                 {% if not is_hidden %}
                     {% if can_add_related or can_change_related or can_delete_related or can_view_related%}
                         {% if can_change_related %}
-                            <a class="related-widget-wrapper-link change-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm w-9.5 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200"
+                            <a class="related-widget-wrapper-link change-related bg-white border border-base-200 cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
                                id="change_id_{{ name }}"
                                data-popup="yes"
                                data-href-template="{{ change_related_template_url }}?{{ url_params }}"
@@ -19,7 +19,7 @@
                         {% endif %}
 
                         {% if can_add_related %}
-                            <a class="related-widget-wrapper-link add-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm w-9.5 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200"
+                            <a class="related-widget-wrapper-link add-related bg-white border border-base-200  cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
                                data-popup="yes"
                                id="add_id_{{ name }}"
                                href="{{ add_related_url }}?{{ url_params }}"
@@ -29,7 +29,7 @@
                         {% endif %}
 
                         {% if can_view_related %}
-                            <a class="related-widget-wrapper-link view-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-gray-400 text-sm w-9.5 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200"
+                            <a class="related-widget-wrapper-link view-related bg-white border border-base-200 cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-base-400 text-sm w-9.5 hover:text-base-700 dark:bg-base-900 dark:border-base-700 dark:text-base-500 dark:hover:text-base-200"
                                id="view_id_{{ name }}"
                                data-href-template="{{ change_related_template_url }}?{{ view_related_url_params }}"
                                title="{% blocktranslate %}View selected {{ model }}{% endblocktranslate %}">
@@ -38,7 +38,7 @@
                         {% endif %}
 
                         {% if can_delete_related %}
-                            <a class="related-widget-wrapper-link delete-related bg-white border cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-red-600 text-sm w-9.5 dark:bg-gray-900 dark:border-gray-700 dark:text-red-500"
+                            <a class="related-widget-wrapper-link delete-related bg-white border border-base-200 cursor-pointer flex items-center h-9.5 justify-center ml-2 rounded shadow-sm shrink-0 text-red-600 text-sm w-9.5 dark:bg-base-900 dark:border-base-700 dark:text-red-500"
                                id="delete_id_{{ name }}"
                                data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
                                data-popup="yes"

unfold/templates/unfold/widgets/textarea_expandable.html

@@ -1,5 +1,5 @@
 <div class="relative">
-    <div class="border break-words font-medium invisible max-w-4xl px-3 py-2 text-sm" style="min-height: 64px">
+    <div class="border border-base-200 break-words font-medium invisible max-w-4xl px-3 py-2 text-sm" style="min-height: 64px">
         {% if widget.value %}{{ widget.value|linebreaks }}{% endif %}
     </div>
 

unfold/templatetags/unfold.py

@@ -270,3 +270,107 @@ def preserve_changelist_filters(context: Context) -> Dict[str, Dict[str, str]]:
     }
 
     return {"params": preserved_params}
+
+
+@register.simple_tag(takes_context=True)
+def fieldset_rows_classes(context: Context) -> str:
+    classes = [
+        "aligned",
+    ]
+
+    if not context.get("stacked"):
+        classes.extend(
+            [
+                "border",
+                "border-base-200",
+                "mb-8",
+                "rounded",
+                "shadow-sm",
+                "dark:border-base-800",
+            ]
+        )
+
+    return " ".join(set(classes))
+
+
+@register.simple_tag(takes_context=True)
+def fieldset_row_classes(context: Context) -> str:
+    classes = [
+        "field-row",
+        "group/row",
+    ]
+
+    formset = context.get("inline_admin_formset", None)
+    adminform = context.get("adminform", None)
+    line = context.get("line")
+
+    # Hide the field in case of ordering field for sorting
+    for field in line:
+        if (
+            formset
+            and hasattr(field.field, "name")
+            and field.field.name == formset.opts.ordering_field
+            and formset.opts.hide_ordering_field
+        ):
+            classes.append("hidden")
+
+    # Compressed fields special styling
+    if adminform and adminform.model_admin.compressed_fields:
+        classes.extend(
+            [
+                "lg:border-b",
+                "lg:border-base-200",
+                "dark:lg:border-base-800",
+                "last:lg:border-b-0",
+            ]
+        )
+
+    if len(line.fields) > 1:
+        classes.extend(
+            [
+                "flex",
+                "flex-row",
+                "flex-wrap",
+            ]
+        )
+
+    if not line.has_visible_field:
+        classes.append("hidden")
+
+    return " ".join(set(classes))
+
+
+@register.simple_tag(takes_context=True)
+def fieldset_line_classes(context: Context) -> str:
+    classes = [
+        "field-line",
+        "flex",
+        "flex-col",
+        "flex-grow",
+        "group/line",
+        "p-3",
+    ]
+    field = context.get("field")
+    adminform = context.get("adminform")
+
+    if hasattr(field.field, "name") and field.field.name:
+        classes.append(f"field-{field.field.name}")
+
+    if hasattr(field, "errors") and field.errors():
+        classes.append("errors")
+
+    if adminform.model_admin.compressed_fields:
+        classes.extend(
+            [
+                "border-b",
+                "border-base-200",
+                "group-[.last]/row:border-b-0",
+                "lg:border-b-0",
+                "lg:border-l",
+                "lg:flex-row",
+                "dark:border-base-800",
+                "first:lg:border-l-0",
+            ]
+        )
+
+    return " ".join(set(classes))