change brand color (#1916)

* change brand color

* update illustrations in new brand color

* icons fixes

* build test

* build test

_config.yml

@@ -14,7 +14,7 @@ rtl: false
 
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
-theme-color: "#0054a6"
+theme-color: "#066fd1"
 
 email: [email protected]
 homepage: https://tabler.io
@@ -78,7 +78,7 @@ defaults:
 colors:
   blue:
     class: blue
-    hex: '#0054a6'
+    hex: '#066fd1'
     title: Blue
   azure:
     class: azure

docs/forms/form-color-check.mdx

@@ -173,7 +173,7 @@ Add an color picker to your form to let users customise it according to their pr
 ```html example code centered
 <div class="mb-3">
   <label class="form-label">Color picker</label>
-  <input type="color" class="form-control form-control-color" value="#0054a6" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
 </div>
 ```
 

src/pages/_data/colors.json

@@ -3,7 +3,7 @@
     {
       "name": "blue",
       "variable": "var(--tblr-blue)",
-      "value": "#0054a6"
+      "value": "#066fd1"
     },
     {
       "name": "azure",
@@ -212,7 +212,7 @@
     },
     {
       "name": "tabler",
-      "value": "#0054a6"
+      "value": "#066fd1"
     }
   ]
 }

src/pages/_data/illustrations.json

@@ -1 +1 @@
-["weightlifting","wait","video","to-do","telescope","snowman","shield","search","project","not-found","neutral-info","music","mobile-computer","message","map-destination","loading","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","ice-skates","good-news","girl-refresh","girl-phone","gift","folders","flowers","fingerprint","exit","error","email","dart","dance","conversation","computer-fix","clock-and-cat","chart","chart-circle","calendar","building","boy","boy-with-key","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","ai"]
+["weightlifting","wait","video","to-do","telescope","snowman","shield","search","project","not-found","neutral-info","music","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","guitar","good-news","girl-refresh","girl-phone","gift","folders","flowers","fingerprint","exit","error","email","electric-scooter","dart","dance","conversation","computer-fix","clock-and-cat","chart","chart-circle","calendar","building","boy","boy-with-key","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai"]

src/pages/_includes/cards/icons-banner.html

@@ -1,4 +1,4 @@
-{% assign icons-count = site.data.icons | size %}
+{% assign icons-count = site.data.icons-info.count %}
 
 <div class="card card-md sticky-top{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-stamp card-stamp-lg">
@@ -16,7 +16,10 @@
 					download any of the {{ icons-count }} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.
 				</div>
 				<div class="mt-3">
-					<a href="{{ site.icons.link }}" class="btn btn-primary" target="_blank" rel="noopener">Download icons</a>
+					<a href="{{ site.icons.link }}" class="btn btn-primary" target="_blank" rel="noopener">
+						{% include ui/icon.html icon="download" %}
+						Download icons
+					</a>
 				</div>
 			</div>
 		</div>

src/pages/_includes/ui/colorpicker.html

@@ -19,7 +19,7 @@
 			{% if format %}format: "{{ format }}",{% endif %}
 			{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
 			swatches: [
-				"#0054a6",
+				"#066fd1",
 				"#45aaf2",
 				"#6574cd",
 				"#a55eea",

src/pages/colorpicker.html

@@ -5,7 +5,7 @@ menu: base.colorpicker
 libs: coloris.js
 ---
 
-{% assign colors = "#0054a6,#45aaf2,#6574cd,#a55eea,#f66d9b,#fa4654,#fd9644,#f1c40f,#7bd235,#5eba00,#2bcbba,#17a2b8" | split: "," %}
+{% assign colors = "#066fd1,#45aaf2,#6574cd,#a55eea,#f66d9b,#fa4654,#fd9644,#f1c40f,#7bd235,#5eba00,#2bcbba,#17a2b8" | split: "," %}
 
 <div class="card">
 	<div class="card-body">

src/pages/illustrations.html

@@ -92,7 +92,10 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
 							Access a wide range of SVG illustrations for various projects. Effortlessly customize any illustration to align perfectly with your chosen color scheme!
 						</div>
 						<div class="mt-3">
-							<a href="{{ site.illustrations.buy_link }}" class="btn btn-primary" target="_blank" rel="noopener">Get lifetime access</a>
+							<a href="{{ site.illustrations.buy_link }}" class="btn btn-primary" target="_blank" rel="noopener">
+								{% include ui/icon.html icon="download" %}
+								Get lifetime access
+							</a>
 						</div>
 					</div>
 				</div>

src/scss/_variables.scss

@@ -166,7 +166,7 @@ $body-emphasis-color: $gray-700 !default;
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
 
-$blue: #206bc4 !default;
+$blue: #066fd1 !default;
 $azure: #4299e1 !default;
 $indigo: #4263eb !default;
 $purple: #ae3ec9 !default;
@@ -179,7 +179,7 @@ $green: #2fb344 !default;
 $teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 
-$color-blue: #206bc4;
+$color-blue: #066fd1;
 $color-azure: #3586c9;
 $color-indigo: #4263eb;
 $color-purple: #ae3ec9;
@@ -266,7 +266,7 @@ $social-colors: (
   "rss": #ffa500,
   "flickr": #0063dc,
   "bitbucket": #0052cc,
-  "tabler": #0054a6,
+  "tabler": #066fd1,
 ) !default;
 
 $gray-colors: (