fix: base colors (#1572)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -9,16 +9,17 @@
   }
 }
 
-@source inline("bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] translate-x-1/4 -translate-y-1/4");
-@source inline("{-,}{top,bottom,left,right}-{0..6}");
+@source inline("aspect-square bg-white/[.06] border-white/40 h-3 w-3 h-[64px] w-[65px]! left-[65px] {dark:,}text-base-{50,{100..900},950} dark:hover:bg-white/[.06] {-,}translate-{x,y}-{1/2}");
+@source inline("{-,}{top,bottom,left,right}-{1/2,0..6} {!,}leading-[38px]");
+@source inline("bg-linear-to-{t,r,b,l} from-primary-{50,{100..900..100},950} to-primary-{50,{100..900..100},950}");
 @source inline("rounded rounded-{t,r,b,l} rounded-{t,r,b,l}-default");
 @source inline("{md:,lg:,2xl:,}relative {md:,lg:,2xl:,}flex {md:,lg:,2xl:,}absolute {md:,lg:,2xl:,}sticky");
-@source inline("{-,}m{t,r,b,l,x,y,}-{0..6} {-,}p{t,r,b,l,x,y,}-{0..6}");
+@source inline("{-,}m{t,r,b,l,x,y,}-{0..24} {-,}p{t,r,b,l,x,y,}-{0..24}");
 @source inline("{md:,lg:,}border-{0,2} {md:,lg:,}border-{t,r,b,l}-{0,2}");
 @source inline("{hover:,dark:,}bg-primary-{50,{100..900..100},950}");
 @source inline("{hover:,dark:,}border-base-{50,{100..900..100},950} {hover:,dark:,}border-transparent");
 @source inline("{hover:,dark:,}bg-base-{50,{100..900..100},950}");
-@source inline("{md:,lg:,}w-{1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
+@source inline("{md:,lg:,}w-{1,1/2,1/3,2/3,1/4,2/4,3/4,1/5,2/5,3/5,4/5,1/6,2/6,3/6,4/6,5/6,1/7,2/7,3/7,4/7,5/7,6/7}");
 @source inline("{md:,lg:,}gap-{0.5,{1..12}}");
 @source inline("{md:,lg:,}grid-cols-{1..12}");
 @source inline("{md:,lg:,}col-span-{1..12}");
@@ -29,7 +30,7 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
+    border-color: var(--color-base-200, currentColor);
   }
 }
 
@@ -99,7 +100,7 @@
 }
 
 @utility scrollable-top {
-  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-gray-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
+  @apply after:absolute after:content-[''] after:bg-linear-to-t after:from-base-100 after:h-4 after:left-0 after:right-0 after:-top-px after:-translate-y-full dark:after:bg-none;
 }
 
 @utility md-16 {

src/unfold/styles.css

@@ -2,7 +2,7 @@
 
 <div class="relative z-50">
     <div class="fixed hidden xl:relative xl:block w-[288px] {% element_classes 'navigation_wrapper' %}" x-bind:class="{'xl:hidden!': !sidebarDesktopOpen, 'block!': sidebarMobileOpen}">
-        <div class="bg-gray-50 relative z-30 dark:bg-gray-900">
+        <div class="bg-base-50 relative z-30 dark:bg-base-900">
             <div id="nav-sidebar" class="bg-base-50 border-r border-base-200 bottom-0 fixed max-h-screen top-0 w-[288px] dark:border-base-800 dark:bg-base-900 {% element_classes 'navigation' %}">
                 {% if templates.navigation %}
                     {% include templates.navigation %}

src/unfold/templates/admin/nav_sidebar.html

@@ -3,7 +3,7 @@
 {% if variant == "default" %}
     border border-base-200 bg-white text-font-important-light dark:border-base-700 dark:bg-transparent dark:text-font-important-dark
 {% elif variant == "secondary" %}
-    bg-gray-100 border border-transparent dark:bg-base-800
+    bg-base-100 border border-transparent dark:bg-base-800
 {% elif variant == "ghost" %}
     bg-transparent text-font-important-light dark:text-font-important-dark
 {% else %}

src/unfold/templates/unfold/components/button.html

@@ -1,11 +1,11 @@
-<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block border border-base-200 flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md hover:shadow-base-200 dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
+<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if not disable_border %}border border-base-200 {% else %}shadow-base-500/20{% endif %} {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
 {% if title %}
     <h2 class="border-b border-base-200 font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-[15px] text-font-important-light dark:text-font-important-dark dark:border-base-800">
         {{ title }}
     </h2>
 {% endif %}
 
-<div class="grow relative {% if icon %} pl-6{% endif %}">
+<div class="grow relative{% if icon %} pl-8{% endif %}">
     {{ children }}
 
     {% if label %}
@@ -15,7 +15,7 @@ <h2 class="border-b border-base-200 font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 tex
     {% endif %}
 
     {% if icon %}
-        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500">{{ icon }}</span>
+        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500 {{ icon_class }}">{{ icon }}</span>
     {% endif %}
 </div>
 

src/unfold/templates/unfold/components/card.html

@@ -1,23 +1,21 @@
-<div class="{% if class %}{{ class }}{% endif %}">
-    <div class="flex flex-col gap-2 relative">
-        <div class="flex flex-row relative z-20">
-            {% if title %}
-                <h3 class="text-font-important-light dark:text-font-important-dark text-sm">
-                    {{ title }}
-                </h3>
-            {% endif %}
-
-            {% if description %}
-                <strong class="bg-base-100 font-medium text-font-important-light ml-auto px-1.5 py-1 rounded-default text-xs dark:text-font-important-dark dark:bg-base-800">
-                    {{ description }}
-                </strong>
-            {% endif %}
-        </div>
+<div class="flex flex-col gap-2 relative w-full {% if class %}{{ class }}{% endif %}">
+    <div class="flex flex-row relative z-20">
+        {% if title %}
+            <h3 class="text-font-important-light dark:text-font-important-dark text-sm">
+                {{ title }}
+            </h3>
+        {% endif %}
 
-        {% if value %}
-            <div class="bg-gray-100 overflow-hidden rounded-default dark:bg-base-800">
-                <div class="h-1.5 bg-primary-600 rounded-default z-10 dark:bg-primary-500" title="{{ value }}%" style="width: {{ value }}%"></div>
-            </div>
+        {% if description %}
+            <strong class="bg-base-100 font-medium text-font-important-light ml-auto px-1.5 py-1 rounded-default text-xs dark:text-font-important-dark dark:bg-base-800">
+                {{ description }}
+            </strong>
         {% endif %}
     </div>
+
+    {% if value %}
+        <div class="bg-base-100 overflow-hidden rounded-default dark:bg-base-800">
+            <div class="h-1.5 bg-primary-600 rounded-default z-10 dark:bg-primary-500 {{ progress_class }}" title="{{ value }}%" style="width: {{ value }}%"></div>
+        </div>
+    {% endif %}
 </div>

src/unfold/templates/unfold/components/progress.html

@@ -3,7 +3,7 @@
 <div class="flex flex-row">
     <div class="{{ widget.file_wrapper_class }}">
         {% if widget.is_initial and not widget.required %}
-            <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">
+            <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-base-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 }}" />