Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
Mikołaj Sojka
2025-05-12 22:56:32 +02:00
committed by GitHub
parent f15d2b97f8
commit c127d65605
7 changed files with 121 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/dry-mails-fix.md Normal file
View File

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

4
preview/pages/illustrations.html
View File

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

164
shared/data/site.json
View File

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

4
shared/includes/docs/colors.html
View File

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

2
shared/includes/layout/js-libs.html
View File

@@ -3,7 +3,7 @@
{% for lib in include.libs -%} {% for lib in include.libs -%}
{% if page-libs contains lib[0] -%} {% if page-libs contains lib[0] -%}
{% for file in lib[1] -%} {% 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 -%} {% endfor -%}
{% endif -%} {% endif -%}
{% endfor -%} {% endfor -%}

2
shared/includes/ui/chart-heatmap.html
View File

@@ -56,7 +56,7 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}, },
{% else %} {% 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 %} {% endif %}
series: [ series: [
{% for i in site.months-short limit: 12 %} {% for i in site.months-short limit: 12 %}

2
shared/includes/ui/colorpicker.html
View File

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