feat: base color (#927)

unfoldadmin · Jan 3, 2025 · f0393fa · f0393fa
1 parent b08a8b2
commit f0393fa
Show file tree

Hide file tree

Showing 90 changed files with 405 additions and 379 deletions.
diff --git a/docs/actions/action-form-example.md b/docs/actions/action-form-example.md
@@ -91,7 +91,7 @@ Template displaying the form. Please note that breadcrumbs are empty in this cas
 
 {% block content %}
     <form action="" method="post" novalidate>
-        <div class="aligned border border-gray-200 mb-8 rounded-md pt-3 px-3 shadow-sm dark:border-gray-800">
+        <div class="aligned border border-base-200 mb-8 rounded-md pt-3 px-3 shadow-sm dark:border-base-800">
             {% csrf_token %}
 
             {% for field in form %}

diff --git a/docs/development/index.md b/docs/development/index.md
@@ -46,11 +46,11 @@ Some components like datepickers, calendars or selectors in admin was not possib
 
 | Component                         | Classes                                                |
 | --------------------------------- | ------------------------------------------------------ |
-| Regular text                      | text-gray-600 dark:text-gray-300                       |
-| Hover regular text                | text-gray-700 dark:text-gray-200                       |
-| Headings                          | font-semibold text-gray-900 dark:text-gray-100         |
-| Icon                              | text-gray-400 dark:text-gray-500                       |
-| Hover icon                        | hover:text-gray-500 dark:hover:text-gray-400           |
+| Regular text                      | text-base-600 dark:text-base-300                       |
+| Hover regular text                | text-base-700 dark:text-base-200                       |
+| Headings                          | font-semibold text-base-900 dark:text-base-100         |
+| Icon                              | text-base-400 dark:text-base-500                       |
+| Hover icon                        | hover:text-base-500 dark:hover:text-base-400           |
 
 ## Using VS Code with containers
 

diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html
@@ -9,11 +9,11 @@ <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important
 
         {% if choice.min is not None and choice.max is not None and choice.step %}
             <div class="admin-numeric-filter-slider-tooltips">
-                <span class="admin-numeric-filter-slider-tooltip-from border cursor-not-allowed flex flex-grow flex-row items-center mr-auto rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
+                <span class="admin-numeric-filter-slider-tooltip-from border cursor-not-allowed flex flex-grow flex-row items-center mr-auto rounded-md shadow-sm px-3 py-2 w-full dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
                     {{ choice.value_from }}
                 </span>
 
-                <span class="admin-numeric-filter-slider-tooltip-to border cursor-not-allowed flex flex-grow flex-row items-center rounded-md shadow-sm px-3 py-2 w-full dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
+                <span class="admin-numeric-filter-slider-tooltip-to border cursor-not-allowed flex flex-grow flex-row items-center rounded-md shadow-sm px-3 py-2 w-full dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
                     {{ choice.value_to }}
                 </span>
             </div>

diff --git a/src/unfold/contrib/forms/templates/unfold/forms/array.html b/src/unfold/contrib/forms/templates/unfold/forms/array.html
@@ -7,7 +7,7 @@
                 {% include widget.template_name %}
             {% endwith %}
 
-            <a x-on:click="$el.parentElement.remove()" class="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 x-on:click="$el.parentElement.remove()" class="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-base-900 dark:border-base-700 dark:text-red-500">
                 <span class="material-symbols-outlined text-sm">delete</span>
             </a>
         </div>
@@ -19,7 +19,7 @@
                 {% include template.template_name %}
             {% endwith %}
 
-            <a x-on:click="items.splice(index, 1)" class="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 x-on:click="items.splice(index, 1)" class="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-base-900 dark:border-base-700 dark:text-red-500">
                 <span class="material-symbols-outlined text-sm">delete</span>
             </a>
         </div>

diff --git a/src/unfold/contrib/forms/templates/unfold/forms/helpers/toolbar.html b/src/unfold/contrib/forms/templates/unfold/forms/helpers/toolbar.html
@@ -1,26 +1,26 @@
 {% load i18n %}
 
 <template id="trix-toolbar">
-    <div class="bg-gray-50 flex flex-row flex-wrap border group-[.errors]:border-t-red-600 gap-4 group-[.errors]:border-x-red-600 px-3 py-2 relative rounded-t-md shadow-sm w-full dark:bg-white/[.02] dark:border-gray-700 dark:group-[.errors]:border-t-red-500 dark:group-[.errors]:border-x-red-500">
-        <div data-trix-button-group="text-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm shrink-0 dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
+    <div class="bg-base-50 flex flex-row flex-wrap border group-[.errors]:border-t-red-600 gap-4 group-[.errors]:border-x-red-600 px-3 py-2 relative rounded-t-md shadow-sm w-full dark:bg-white/[.02] dark:border-base-700 dark:group-[.errors]:border-t-red-500 dark:group-[.errors]:border-x-red-500">
+        <div data-trix-button-group="text-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm shrink-0 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
             {% spaceless %}
-                <button type="button" data-trix-attribute="p" data-trix-key="p" title="{% trans "Paragraph" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="p" data-trix-key="p" title="{% trans "Paragraph" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_paragraph</span>
                 </button>
 
-                <button type="button" data-trix-attribute="underlined" data-trix-key="u" title="{% trans "Underlined" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="underlined" data-trix-key="u" title="{% trans "Underlined" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_underlined</span>
                 </button>
 
-                <button type="button" data-trix-attribute="bold" data-trix-key="b" title="{% trans "Bold" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="bold" data-trix-key="b" title="{% trans "Bold" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_bold</span>
                 </button>
 
-                <button type="button" data-trix-attribute="italic" data-trix-key="i" title="{% trans "Italic" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="italic" data-trix-key="i" title="{% trans "Italic" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_italic</span>
                 </button>
 
-                <button type="button" data-trix-attribute="strike" title="{% trans "Strike" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="strike" title="{% trans "Strike" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_strikethrough</span>
                 </button>
 
@@ -30,45 +30,45 @@
             {% endspaceless %}
         </div>
 
-        <div data-trix-button-group="block-headings" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
+        <div data-trix-button-group="block-headings" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
             {% spaceless %}
-                <button type="button" data-trix-attribute="heading1" title="{% trans "Heading" %} 1" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="heading1" title="{% trans "Heading" %} 1" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_h1</span>
                 </button>
 
-                <button type="button" data-trix-attribute="heading2" title="{% trans "Heading" %} 2" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="heading2" title="{% trans "Heading" %} 2" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_h2</span>
                 </button>
 
-                <button type="button" data-trix-attribute="heading3" title="{% trans "Heading" %} 3" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="heading3" title="{% trans "Heading" %} 3" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_h3</span>
                 </button>
 
-                <button type="button" data-trix-attribute="heading4" title="{% trans "Heading" %} 4" tabindex="-1" class="cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="heading4" title="{% trans "Heading" %} 4" tabindex="-1" class="cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_h4</span>
                 </button>
             {% endspaceless %}
         </div>
 
-        <div data-trix-button-group="block-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
+        <div data-trix-button-group="block-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
             {% spaceless %}
-                <button type="button" data-trix-attribute="quote" title="{% trans "Quote" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="quote" title="{% trans "Quote" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_quote</span>
                 </button>
 
-                <button type="button" data-trix-attribute="code" title="{% trans "Code" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="code" title="{% trans "Code" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">code</span>
                 </button>
 
-                <button type="button" data-trix-attribute="bullet" title="{% trans "Unordered list" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-attribute="bullet" title="{% trans "Unordered list" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_list_bulleted</span>
                 </button>
 
-                <button type="button"  data-trix-attribute="number" title="{% trans "Ordered list" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button"  data-trix-attribute="number" title="{% trans "Ordered list" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_list_numbered</span>
                 </button>
 
-                <button type="button" data-trix-action="increaseNestingLevel" title="{% trans "Indent increase" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                <button type="button" data-trix-action="increaseNestingLevel" title="{% trans "Indent increase" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">format_indent_increase</span>
                 </button>
 
@@ -79,8 +79,8 @@
         </div>
 
         <div class="lg:ml-auto">
-            <div data-trix-button-group="history-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
-                <button type="button" data-trix-action="undo" data-trix-key="z" title="{% trans "Undo" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+            <div data-trix-button-group="history-tools" class="bg-white border border-md flex flex-row rounded-md shadow-sm dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
+                <button type="button" data-trix-action="undo" data-trix-key="z" title="{% trans "Undo" %}" tabindex="-1" class="border-r cursor-pointer flex items-center h-8 justify-center transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                     <span class="material-symbols-outlined">undo</span>
                 </button>
 
@@ -90,16 +90,16 @@
             </div>
 
             <div data-trix-dialogs>
-                <div class="absolute bg-white border-b -bottom-px left-0 px-4 py-2 right-0 shadow-sm translate-y-full dark:bg-gray-900 dark:border-gray-700" data-trix-dialog="href" data-trix-dialog-attribute="href">
+                <div class="absolute bg-white border-b -bottom-px left-0 px-4 py-2 right-0 shadow-sm translate-y-full dark:bg-base-900 dark:border-base-700" data-trix-dialog="href" data-trix-dialog-attribute="href">
                     <div class="flex flex-row">
-                        <input type="url" name="href" class="border bg-white font-medium px-3 rounded-md shadow-sm text-gray-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark dark:focus:ring-primary-600/30 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40" placeholder="{% trans "Enter an URL" %}" required data-trix-input>
+                        <input type="url" name="href" class="border bg-white font-medium px-3 rounded-md shadow-sm text-base-500 text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:focus:ring-primary-600/30 dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40" placeholder="{% trans "Enter an URL" %}" required data-trix-input>
 
-                        <div class="bg-white border border-md flex flex-row ml-4 rounded-md shadow-sm dark:bg-gray-900 dark:border-gray-700 dark:text-font-default-dark">
-                            <button type="button" data-trix-method="setAttribute" title="{% trans "Link" %}" class="border-r cursor-pointer flex items-center h-8 justify-center text-gray-400 transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                        <div class="bg-white border border-md flex flex-row ml-4 rounded-md shadow-sm dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark">
+                            <button type="button" data-trix-method="setAttribute" title="{% trans "Link" %}" class="border-r cursor-pointer flex items-center h-8 justify-center text-base-400 transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                                 <span class="material-symbols-outlined">link</span>
                             </button>
 
-                            <button type="button" data-trix-method="removeAttribute" title="{% trans "Unlink" %}" class="cursor-pointer flex items-center h-8 justify-center text-gray-400 transition-colors w-8 hover:text-primary-600 dark:border-gray-700">
+                            <button type="button" data-trix-method="removeAttribute" title="{% trans "Unlink" %}" class="cursor-pointer flex items-center h-8 justify-center text-base-400 transition-colors w-8 hover:text-primary-600 dark:border-base-700">
                                 <span class="material-symbols-outlined">link_off</span>
                             </button>
                         </div>

diff --git a/src/unfold/contrib/forms/widgets.py b/src/unfold/contrib/forms/widgets.py
@@ -14,18 +14,18 @@
 WYSIWYG_CLASSES = [
     *PROSE_CLASSES,
     "border",
-    "border-gray-200",
+    "border-base-200",
     "border-t-0",
     "group-[.errors]:border-red-600",
     "max-w-none",
     "p-4",
     "rounded-b-md",
     "rounded-t-none",
-    "text-gray-500",
+    "text-base-500",
     "w-full",
     "focus:outline-none",
-    "dark:border-gray-700",
-    "dark:text-gray-300",
+    "dark:border-base-700",
+    "dark:text-base-300",
     "dark:group-[.errors]:border-red-500",
 ]
 

diff --git a/src/unfold/contrib/guardian/templates/admin/guardian/model/obj_perms_manage.html b/src/unfold/contrib/guardian/templates/admin/guardian/model/obj_perms_manage.html
@@ -29,7 +29,7 @@
 {% block content %}
     {% include "unfold/guardian/user_form.html" %}
 
-    <hr class="my-12 dark:border-gray-800"/>
+    <hr class="my-12 dark:border-base-800"/>
 
     {% include "unfold/guardian/group_form.html" %}
 {% endblock %}