Use Tabler illustrations instead of the ones from undraw (#1811)

* Use Tabler illustrations instead of undraw library

* Create heavy-ladybugs-grab.md

* illustration fixes

* replace img to svg

---------

Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
Co-authored-by: codecalm <codecalm@gmail.com>

.changeset/heavy-ladybugs-grab.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add Tabler Illustrations

_config.yml

@@ -61,6 +61,9 @@ jekyll_tidy:
   compress_html: false
   ignore_env: development
 
+collections:
+  - illustrations
+
 defaults:
   - scope:
       type: "pages"

gulpfile.js

@@ -367,7 +367,7 @@ gulp.task('mjs', () => {
  */
 gulp.task('watch-jekyll', (cb) => {
 	browserSync.notify('Building Jekyll')
-	return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--incremental', '--destination', demoDir, '--trace'], { stdio: 'inherit' })
+	return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir, '--trace'], { stdio: 'inherit' })
 		.on('close', cb)
 })
 

src/pages/_data/errors.yml

@@ -17,7 +17,7 @@
   title: 503
   description: We are sorry but our service is currently not available
 maintenance:
-  illustration: undraw_bug_fixing_oc7a.svg
+  illustration: computer-fix.svg
   header: Temporarily down for maintenance
   description: Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!
 

src/pages/_includes/layout/navbar-logo.html

@@ -9,17 +9,23 @@
 {% else %}
 	<a href="{{ site.base }}" {{ class-attr }}>
 {% endif %}
-		{% unless include.hide-logo %}
-		{% if include.small-logo %}
-		<img src="{{ site.base }}/static/logo-small.svg" width="32" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
-		{% else %}
-		<img src="{{ site.base }}/static/logo.svg" width="110" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
-		{% endif %}
-		{% endunless %}
+	{% unless include.hide-logo %}
+	{% if include.small-logo %}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68" width="32" height="32" alt="{{ site.title }}" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
+		<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#0054a6" style="fill: var(--tblr-primary, #0054a6)" />
+	</svg>
+	{% else %}
+	<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image{% if include.show-title %} me-3{% endif %}">
+		<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#0054a6" style="fill: var(--tblr-primary, #0054a6)" />
+		<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"/>
+	</svg>
 
-		{% if include.show-title %}
-		Dashboard
-		{% endif %}
+	{% endif %}
+	{% endunless %}
+
+	{% if include.show-title %}
+	Dashboard
+	{% endif %}
 
 {% if include.header %}
 	</a>

src/pages/_includes/ui/empty.html

@@ -2,8 +2,8 @@
 <div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include.illustration %}
-		{% assign illustration-src = include.illustration-src | default: 'undraw_quitting_time_dm8t.svg' %}
-		<div class="empty-img">{% include ui/illustration.html image=illustration-src %}</div>
+		{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
+		<div class="empty-img">{% include ui/illustration.html image=illustration height="256" %}</div>
 	{% elsif include.icon-text %}
 		<div class="empty-header">{{ include.icon-text }}</div>
 	{% else %}

src/pages/_includes/ui/illustration.html

@@ -1 +1,26 @@
-<img src="{{ site.base }}/static/illustrations/{{ include.image }}" height="{{ include.height | default: 128 }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="">
+{% removeemptylines %}
+{% assign image = include.image | replace: '.svg', '' %}
+{% assign height = include.height | default: 128 %}
+{% assign src-light = "/illustrations/light/" | append: image %}
+{% assign src-dark = "/illustrations/dark/" | append: image %}
+
+{% assign illustration-light = site.illustrations | where: "id", src-light | first %}
+{% assign illustration-dark = site.illustrations | where: "id", src-dark | first %}
+
+{% assign replace-to-light = '<svg class="img-light' %}
+{% if include.class %}{% assign replace-to-light = replace-to-light | append: ' ' | append: include.class %}{% endif %}
+{% assign replace-to-light = replace-to-light | append: '" ' %}
+{% assign illustration-light = illustration-light | replace: '<svg ', replace-to-light %}
+
+{% assign replace-to-dark = '<svg class="img-dark' %}
+{% if include.class %}{% assign replace-to-dark = replace-to-dark | append: ' ' | append: include.class %}{% endif %}
+{% assign replace-to-dark = replace-to-dark | append: '" ' %}
+{% assign illustration-dark = illustration-dark | replace: '<svg ', replace-to-dark %}
+
+{% assign replace-to-height = 'height="' | append: height | append: '"' %}
+{% assign illustration-light = illustration-light | replace: 'width="800" height="600"', replace-to-height %}
+{% assign illustration-dark = illustration-dark | replace: 'width="800" height="600"', replace-to-height %}
+
+{{ illustration-light }}
+{{ illustration-dark }}
+{% endremoveemptylines %}

src/pages/_layouts/default.html

@@ -24,7 +24,7 @@
 			{{ content }}
 			{% else %}
 			{% unless no-container %}
-			<div class="container-xl{% if page.container-centered %} d-flex flex-column justify-content-center{% endif %}">
+			<div class="container-xl{% if page.container-centered %} my-auto{% endif %}">
 			{% endunless %}
 				{{ content }}
 			{% unless no-container %}

src/pages/blank.html

@@ -5,4 +5,4 @@
 container-centered: true
 ---
 
-{% include ui/empty.html button-text="Add your first client" button-icon="plus" illustration=true illustration-src="undraw_printing_invoices_5r4r.svg" %}
+{% include ui/empty.html button-text="Add your first client" button-icon="plus" illustration="computer-fix.svg" %}

src/pages/sign-in-illustration.html

@@ -16,7 +16,7 @@
 		</div>
 	</div>
 	<div class="col-lg d-none d-lg-block">
-		{% include ui/illustration.html image="undraw_secure_login_pdn4.svg" class="d-block mx-auto" height=300 %}
+		{% include ui/illustration.html image="boy-with-key.svg" class="d-block mx-auto" height=400 %}
 	</div>
 </div>
 

src/pages/wizard.html

@@ -6,7 +6,7 @@
 
 <div class="card card-md">
 	<div class="card-body text-center py-4 p-sm-5">
-		{% include ui/illustration.html image="undraw_sign_in_e6hj.svg" height="120" class="mb-n2" %}
+		{% include ui/illustration.html image="boy-girl.svg" height="120" class="mb-n2" %}
 		<h1 class="mt-5">Welcome to Tabler!</h1>
 		<p class="text-secondary">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
 	</div>

src/scss/layout/_dark.scss

@@ -5,13 +5,21 @@ body {
     .hide-theme-light {
       display: none !important;
     }
+
+    .img-dark {
+      display: none !important;
+    }
   }
 
   &.theme-dark,
   &[data-bs-theme=dark] {
     .hide-theme-dark {
       display: none !important;
     }
+
+    .img-light {
+      display: none !important;
+    }
   }
 }
 

src/scss/ui/_empty.scss

@@ -28,11 +28,6 @@
 .empty-img {
   margin: 0 0 2rem;
   line-height: 1;
-
-  img {
-    height: 8rem;
-    width: auto;
-  }
 }
 
 .empty-header {