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 %}
<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 %}

164
shared/data/site.json
View File

@@ -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": [

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">
{%- 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 -%}

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

@@ -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 -%}

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

@@ -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 %}

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

@@ -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 %}
],
}))