Refactor color configuration and update color usage in templates

_config.yml

@@ -78,54 +78,18 @@ defaults:
       layout: default
 
 colors:
-  blue:
-    class: blue
-    hex: '#066fd1'
-    title: Blue
-  azure:
-    class: azure
-    hex: '#45aaf2'
-    title: Azure
-  indigo:
-    class: indigo
-    hex: '#6574cd'
-    title: Indigo
-  purple:
-    class: purple
-    hex: '#a55eea'
-    title: Purple
-  pink:
-    class: pink
-    hex: '#f66d9b'
-    title: Pink
-  red:
-    class: red
-    hex: '#fa4654'
-    title: Red
-  orange:
-    class: orange
-    hex: '#fd9644'
-    title: Orange
-  yellow:
-    class: yellow
-    hex: '#f1c40f'
-    title: Yellow
-  lime:
-    class: lime
-    hex: '#7bd235'
-    title: Lime
-  green:
-    class: green
-    hex: '#5eba00'
-    title: Green
-  teal:
-    class: teal
-    hex: '#2bcbba'
-    title: Teal
-  cyan:
-    class: cyan
-    hex: '#17a2b8'
-    title: Cyan
+  - blue
+  - azure
+  - indigo
+  - purple
+  - pink
+  - red
+  - orange
+  - yellow
+  - lime
+  - green
+  - teal
+  - cyan
 
 skin-colors: 
   rose:
@@ -162,15 +126,9 @@ skin-colors:
     class: gray
 
 colors-extra:
-  white:
-    hex: '#ffffff'
-    title: White
-  dark:
-    hex: '#303645'
-    title: Dark
-  gray:
-    hex: '#868e96'
-    title: Gray
+  - white
+  - dark
+  - gray
 
 variants:
   - name: success

src/pages/_includes/parts/form/input-colorpicker.html

@@ -1,4 +1,4 @@
 <div class="mb-3">
    <label class="form-label">{{ include.label | default: 'Color picker' }}</label>
-   <input type="color" class="form-control form-control-color" value="{{ include.color | default: site.colors.blue.hex }}" title="Choose your color">
+   <input type="color" class="form-control form-control-color" value="{{ include.color | default: site.theme-color }}" title="Choose your color">
 </div>

src/pages/_includes/ui/chart-heatmap.html

@@ -55,7 +55,7 @@
 	 			}
 			},
 			{% else %}
-			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
+			colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color }}"), {% endfor %}{% endif %}],
 			{% endif %}
 			series: [
 				{% for i in site.months-short limit: 12 %}

src/pages/badges.html

@@ -24,7 +24,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="badges-list">
 							{% for color in site.colors %}
-							<span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg">{{ color[1].title }}</span>
+							<span class="badge bg-{{ color }} text-{{ color }}-fg">{{ color | capitalize  }}</span>
 							{% endfor %}
 						</div>
 					</div>
@@ -35,7 +35,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="badges-list">
 							{% for color in site.colors %}
-							<span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span>
+							<span class="badge bg-{{ color }}-lt">{{ color | capitalize  }}</span>
 							{% endfor %}
 						</div>
 					</div>
@@ -46,7 +46,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="badges-list">
 							{% for color in site.colors %}
-							<span class="badge badge-outline text-{{ color[0] }}">{{ color[1].title }}</span>
+							<span class="badge badge-outline text-{{ color }}">{{ color | capitalize  }}</span>
 							{% endfor %}
 						</div>
 					</div>
@@ -64,7 +64,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="btn-list">
 							{% for color in site.colors %}
-							<button class="btn">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg ms-2">{{ forloop.index }}</span></button>
+							<button class="btn">{{ color | capitalize }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg ms-2">{{ forloop.index }}</span></button>
 							{% endfor %}
 						</div>
 					</div>
@@ -75,7 +75,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="btn-list">
 							{% for color in site.colors %}
-							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} text-{{ color[0] }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button>
+							<button class="btn position-relative">{{ color | capitalize }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg badge-notification badge-pill">{{ forloop.index }}</span></button>
 							{% endfor %}
 						</div>
 					</div>
@@ -86,7 +86,7 @@ menu: base.badges
 					<div class="card-body">
 						<div class="btn-list">
 							{% for color in site.colors %}
-							<button class="btn position-relative">{{ color[1].title }} badge <span class="badge bg-{{ color[0] }} badge-notification badge-blink"></span></button>
+							<button class="btn position-relative">{{ color | capitalize  }} badge <span class="badge bg-{{ color }} badge-notification badge-blink"></span></button>
 							{% endfor %}
 						</div>
 					</div>

src/pages/tags.html

@@ -27,7 +27,7 @@ menu: base.tags
 				<h3 class="card-title">Tags with flag</h3>
 				<div class="tags-list">   
 					{% for country in site.data.flags limit: 9 %}     
-					{% include ui/tag.html text=country.name flag=country.code %}
+					{% include ui/tag.html text=country.name flag=country.flag %}
 					{% endfor %}
 				</div>
 			</div>
@@ -66,9 +66,7 @@ menu: base.tags
 				<h3 class="card-title">Tags with status</h3>
 				<div class="tags-list">   
 					{% for color in site.colors %}
-					{% capture status %}{{ color[1].class }}{% endcapture %}
-					{% capture text %}{{ color[1].title }}{% endcapture %}
-					{% include ui/tag.html text=text status=status %}
+					{% include ui/tag.html text=color status=color %}
 					{% endfor %}
 				</div>
 			</div>
@@ -81,9 +79,7 @@ menu: base.tags
 				<h3 class="card-title">Tags with legend</h3>
 				<div class="tags-list">   
 					{% for color in site.colors %}
-					{% capture status %}{{ color[1].class }}{% endcapture %}
-					{% capture text %}{{ color[1].title }}{% endcapture %}
-					{% include ui/tag.html text=text legend=status %}
+					{% include ui/tag.html text=color legend=color %}
 					{% endfor %}
 				</div>
 			</div>
@@ -93,7 +89,7 @@ menu: base.tags
 	<div class="col">
 		<div class="card">
 			<div class="card-body">
-				<h3 class="card-title">Default tags</h3>
+				<h3 class="card-title">Tags with checkbox</h3>
 				<div class="tags-list">   
 					{% for i in (1..6) %}     
 					{% capture text %}Label {{ i }}{% endcapture %}
@@ -111,7 +107,7 @@ menu: base.tags
 	<div class="col">
 		<div class="card">
 			<div class="card-body">
-				<h3 class="card-title">Default tags</h3>
+				<h3 class="card-title">Tags with badge</h3>
 				<div class="tags-list">   
 					{% for i in (1..12) %}     
 					{% include ui/tag.html text="Label" badge=i %}