Fix colour picker preview page not displaying correctly (#2321)

Co-authored-by: codecalm <[email protected]>
Co-authored-by: Paweł Kuna <[email protected]>

.changeset/dry-mails-fix.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix colour picker preview page not displaying correctly

preview/pages/illustrations.html

@@ -142,8 +142,8 @@ permalink: illustrations.html
 
 {% capture_script %}
 <script>
-	let skinColor = "{{ skin_color[1].hex }}",
-	   primaryColor = "{{ color[1].hex }}";
+	let skinColor = "var({{ skin_color[1].prop }})",
+	   primaryColor = "var({{ color[1].prop }})";
 
 	const illustrations = {
 	{% for illustration in free-illustrations.autodark %}

shared/data/site.json

@@ -38,149 +38,173 @@
   "colors": {
     "blue": {
       "class": "blue",
-      "hex": "var(--tblr-blue)",
+      "prop": "--tblr-blue",
       "title": "Blue",
+      "hex": "#066fd1",
       "abbr": "bl"
     },
     "azure": {
       "class": "azure",
-      "hex": "var(--tblr-azure)",
+      "prop": "--tblr-azure",
       "title": "Azure",
+      "hex": "#4299e1",
       "abbr": "az"
     },
     "indigo": {
       "class": "indigo",
-      "hex": "var(--tblr-indigo)",
+      "prop": "--tblr-indigo",
       "title": "Indigo",
+      "hex": "#4263eb",
       "abbr": "id"
     },
     "purple": {
       "class": "purple",
-      "hex": "var(--tblr-purple)",
+      "prop": "--tblr-purple",
       "title": "Purple",
+      "hex": "#ae3ec9",
       "abbr": "pu"
     },
     "pink": {
       "class": "pink",
-      "hex": "var(--tblr-pink)",
+      "prop": "--tblr-pink",
       "title": "Pink",
+      "hex": "#d6336c",
       "abbr": "pk"
     },
     "red": {
       "class": "red",
-      "hex": "var(--tblr-red)",
+      "prop": "--tblr-red",
       "title": "Red",
+      "hex": "#d63939",
       "abbr": "rd"
     },
     "orange": {
       "class": "orange",
-      "hex": "var(--tblr-orange)",
+      "prop": "--tblr-orange",
       "title": "Orange",
+      "hex": "#f76707",
       "abbr": "or"
     },
     "yellow": {
       "class": "yellow",
-      "hex": "var(--tblr-yellow)",
+      "prop": "--tblr-yellow",
       "title": "Yellow",
+      "hex": "#f59f00",
       "abbr": "yl"
     },
     "lime": {
       "class": "lime",
-      "hex": "var(--tblr-lime)",
+      "prop": "--tblr-lime",
       "title": "Lime",
+      "hex": "#74b816",
       "abbr": "lm"
     },
     "green": {
       "class": "green",
-      "hex": "var(--tblr-green)",
+      "prop": "--tblr-green",
       "title": "Green",
+      "hex": "#2fb344",
       "abbr": "gn"
     },
     "teal": {
       "class": "teal",
-      "hex": "var(--tblr-teal)",
+      "prop": "--tblr-teal",
       "title": "Teal",
+      "hex": "#0ca678",
       "abbr": "tl"
     },
     "cyan": {
       "class": "cyan",
-      "hex": "var(--tblr-cyan)",
+      "prop": "--tblr-cyan",
       "title": "Cyan",
+      "hex": "#17a2b8",
       "abbr": "cy"
     }
   },
   "lightColors": {
     "blue": {
       "class": "blue",
-      "hex": "var(--tblr-blue-lt)",
+      "prop": "--tblr-blue-lt",
       "title": "Blue Light",
-      "abbr": "bl"
+      "abbr": "bl",
+      "hex": "#066fd1"
     },
     "azure": {
       "class": "azure",
-      "hex": "var(--tblr-azure-lt)",
+      "prop": "--tblr-azure-lt",
       "title": "Azure Light",
-      "abbr": "az"
+      "abbr": "az",
+      "hex": "#4299e1"
     },
     "indigo": {
       "class": "indigo",
-      "hex": "var(--tblr-indigo-lt)",
+      "prop": "--tblr-indigo-lt",
       "title": "Indigo Light",
-      "abbr": "id"
+      "abbr": "id",
+      "hex": "#4263eb"
     },
     "purple": {
       "class": "purple",
-      "hex": "var(--tblr-purple-lt)",
+      "prop": "--tblr-purple-lt",
       "title": "Purple Light",
-      "abbr": "pu"
+      "abbr": "pu",
+      "hex": "#ae3ec9"
     },
     "pink": {
       "class": "pink",
-      "hex": "var(--tblr-pink-lt)",
+      "prop": "--tblr-pink-lt",
       "title": "Pink Light",
-      "abbr": "pk"
+      "abbr": "pk",
+      "hex": "#d6336c"
     },
     "red": {
       "class": "red",
-      "hex": "var(--tblr-red-lt)",
+      "prop": "--tblr-red-lt",
       "title": "Red Light",
-      "abbr": "rd"
+      "abbr": "rd",
+      "hex": "#d63939"
     },
     "orange": {
       "class": "orange",
-      "hex": "var(--tblr-orange-lt)",
+      "prop": "--tblr-orange-lt",
       "title": "Orange Light",
-      "abbr": "or"
+      "abbr": "or",
+      "hex": "#f76707"
     },
     "yellow": {
       "class": "yellow",
-      "hex": "var(--tblr-yellow-lt)",
+      "prop": "--tblr-yellow-lt",
       "title": "Yellow Light",
-      "abbr": "yl"
+      "abbr": "yl",
+      "hex": "#f59f00"
     },
     "lime": {
       "class": "lime",
-      "hex": "var(--tblr-lime-lt)",
+      "prop": "--tblr-lime-lt",
       "title": "Lime Light",
-      "abbr": "lm"
+      "abbr": "lm",
+      "hex": "#74b816"
     },
     "green": {
       "class": "green",
-      "hex": "var(--tblr-green-lt)",
+      "prop": "--tblr-green-lt",
       "title": "Green Light",
-      "abbr": "gn"
+      "abbr": "gn",
+      "hex": "#2fb344"
     },
     "teal": {
       "class": "teal",
-      "hex": "var(--tblr-teal-lt)",
+      "prop": "--tblr-teal-lt",
       "title": "Teal Light",
-      "abbr": "tl"
+      "abbr": "tl",
+      "hex": "#0ca678"
     },
     "cyan": {
       "class": "cyan",
-      "hex": "var(--tblr-cyan-lt)",
+      "prop": "--tblr-cyan-lt",
       "title": "Cyan Light",
-      "abbr": "cy"
+      "abbr": "cy",
+      "hex": "#17a2b8"
     }
   },
   "skinColors": {
@@ -230,168 +254,198 @@
       "title": "Facebook",
       "hex": "var(--tblr-facebook)",
       "abbr": "fb",
-      "icon": "brand-facebook"
+      "icon": "brand-facebook",
+      "prop": "--tblr-facebook"
     },
     "twitter": {
       "title": "Twitter",
       "hex": "var(--tblr-twitter)",
       "abbr": "tw",
-      "icon": "brand-twitter"
+      "icon": "brand-twitter",
+      "prop": "--tblr-twitter"
     },
     "x": {
       "title": "X",
       "hex": "var(--tblr-x)",
       "abbr": "x",
-      "icon": "brand-x"
+      "icon": "brand-x",
+      "prop": "--tblr-x"
     },
     "linkedin": {
       "title": "Linkedin",
       "hex": "var(--tblr-linkedin)",
       "abbr": "li",
-      "icon": "brand-linkedin"
+      "icon": "brand-linkedin",
+      "prop": "--tblr-linkedin"
     },
     "google": {
       "title": "Google",
       "hex": "var(--tblr-google)",
       "abbr": "go",
-      "icon": "brand-google"
+      "icon": "brand-google",
+      "prop": "--tblr-google"
     },
     "youtube": {
       "title": "Youtube",
       "hex": "var(--tblr-youtube)",
       "abbr": "yt",
-      "icon": "brand-youtube"
+      "icon": "brand-youtube",
+      "prop": "--tblr-youtube"
     },
     "vimeo": {
       "title": "Vimeo",
       "hex": "var(--tblr-vimeo)",
       "abbr": "vi",
-      "icon": "brand-vimeo"
+      "icon": "brand-vimeo",
+      "prop": "--tblr-vimeo"
     },
     "dribbble": {
       "title": "Dribbble",
       "hex": "var(--tblr-dribbble)",
       "abbr": "dr",
-      "icon": "brand-dribbble"
+      "icon": "brand-dribbble",
+      "prop": "--tblr-dribbble" 
     },
     "github": {
       "title": "Github",
       "hex": "var(--tblr-github)",
       "abbr": "gh",
-      "icon": "brand-github"
+      "icon": "brand-github",
+      "prop": "--tblr-github"
     },
     "instagram": {
       "title": "Instagram",
       "hex": "var(--tblr-instagram)",
       "abbr": "ig",
-      "icon": "brand-instagram"
+      "icon": "brand-instagram",
+      "prop": "--tblr-instagram"
     },
     "pinterest": {
       "title": "Pinterest",
       "hex": "var(--tblr-pinterest)",
       "abbr": "pt",
-      "icon": "brand-pinterest"
+      "icon": "brand-pinterest",
+      "prop": "--tblr-pinterest"
     },
     "vk": {
       "title": "VK",
       "hex": "var(--tblr-vk)",
       "abbr": "vk",
-      "icon": "brand-vk"
+      "icon": "brand-vk",
+      "prop": "--tblr-vk" 
     },
     "rss": {
       "title": "RSS",
       "hex": "var(--tblr-rss)",
       "abbr": "rs",
-      "icon": "rss"
+      "icon": "rss",
+      "prop": "--tblr-rss"
     },
     "flickr": {
       "title": "Flickr",
       "hex": "var(--tblr-flickr)",
       "abbr": "fl",
-      "icon": "brand-flickr"
+      "icon": "brand-flickr",
+      "prop": "--tblr-flickr"
     },
     "bitbucket": {
       "title": "Bitbucket",
       "hex": "var(--tblr-bitbucket)",
       "abbr": "bb",
-      "icon": "brand-bitbucket"
+      "icon": "brand-bitbucket",
+      "prop": "--tblr-bitbucket"
     },
     "tabler": {
       "title": "Tabler",
       "hex": "var(--tblr-tabler)",
       "abbr": "tb",
-      "icon": "brand-tabler"
+      "icon": "brand-tabler",
+      "prop": "--tblr-tabler"
     }
   },
   "grayColors": {
     "gray-50": {
       "hex": "var(--tblr-gray-50)",
       "title": "Gray 50",
+      "prop": "--tblr-gray-50",
       "abbr": "50"
     },
     "gray-100": {
       "hex": "var(--tblr-gray-100)",
       "title": "Gray 100",
+      "prop": "--tblr-gray-100",
       "abbr": "100"
     },
     "gray-200": {
       "hex": "var(--tblr-gray-200)",
       "title": "Gray 200",
+      "prop": "--tblr-gray-200",
       "abbr": "200"
     },
     "gray-300": {
       "hex": "var(--tblr-gray-300)",
       "title": "Gray 300",
+      "prop": "--tblr-gray-300",
       "abbr": "300"
     },
     "gray-400": {
       "hex": "var(--tblr-gray-400)",
       "title": "Gray 400",
+      "prop": "--tblr-gray-400",
       "abbr": "400"
     },
     "gray-500": {
       "hex": "var(--tblr-gray-500)",
       "title": "Gray 500",
+      "prop": "--tblr-gray-500",
       "abbr": "500"
     },
     "gray-600": {
       "hex": "var(--tblr-gray-600)",
       "title": "Gray 600",
+      "prop": "--tblr-gray-600",
       "abbr": "600"
     },
     "gray-700": {
       "hex": "var(--tblr-gray-700)",
       "title": "Gray 700",
+      "prop": "--tblr-gray-700",
       "abbr": "700"
     },
     "gray-800": {
       "hex": "var(--tblr-gray-800)",
       "title": "Gray 800",
+      "prop": "--tblr-gray-800",
       "abbr": "800"
     },
     "gray-900": {
       "hex": "var(--tblr-gray-900)",
       "title": "Gray 900",
+      "prop": "--tblr-gray-900",
       "abbr": "900"
     },
     "gray-950": {
       "hex": "var(--tblr-gray-950)",
       "title": "Gray 950",
+      "prop": "--tblr-gray-950",
       "abbr": "950"
     }
   },
   "colorsExtra": {
     "white": {
       "hex": "#ffffff",
-      "title": "White"
+      "title": "White",
+      "prop": "--tblr-white"
     },
     "dark": {
       "hex": "#303645",
-      "title": "Dark"
+      "title": "Dark",
+      "prop": "--tblr-dark"
     },
     "gray": {
       "hex": "#868e96",
-      "title": "Gray"
+      "title": "Gray",
+      "prop": "--tblr-gray"
     }
   },
   "variants": [

shared/includes/docs/colors.html

@@ -1,7 +1,7 @@
 <div class="row row-cols-4 row-cols-md-6 g-3 g-md-4">
 	{%- for color in include.colors -%}
-	<div class="col text-center">
-		<div class="p-5 p-md-6 rounded border" style="background-color: {{ color[1].hex }}"></div>
+	<div class="col-2 text-center">
+		<div class="p-6 rounded border" style="background-color: var({{ color[1].prop }});"></div>
 		<div class="small">{{ color[1].title }}</div>
 	</div>
 	{% endfor -%}

shared/includes/layout/js-libs.html

@@ -3,7 +3,7 @@
 {% for lib in include.libs -%}
 {% if page-libs contains lib[0] -%}
 {% for file in lib[1] -%}
-<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}{{ page | relative }}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}" defer></script>
+<script src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}{{ page | relative }}/libs/{{ file }}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}" defer></script>
 {% endfor -%}
 {% endif -%}
 {% endfor -%}

shared/includes/ui/chart-heatmap.html

@@ -56,7 +56,7 @@ document.addEventListener("DOMContentLoaded", function () {
 			}
 		},
 		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[1].hex }}", {% endfor %}{% endif %}],
+		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[1].prop }}", {% endfor %}{% endif %}],
 		{% endif %}
 		series: [
 			{% for i in site.months-short limit: 12 %}

shared/includes/ui/colorpicker.html

@@ -19,7 +19,7 @@
 			{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
 			swatches: [
 				{% for color in site.colors %}
-				"{{ color[1].hex }}",
+				window.getComputedStyle(document.body).getPropertyValue('{{ color[1].prop }}'),
 				{% endfor %}
 			],
 		}))