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

Enhance color variables and update color display in documentation

Browse Source
This commit is contained in:
codecalm
2025-05-11 19:44:21 +02:00
parent bb617b8dd2
commit 21bf92608d
6 changed files with 228 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/scss/_props.scss
View File

@@ -42,9 +42,9 @@
--#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))}; --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
} }
/** Social colors */ /** Gray colors */
@each $name, $color in $social-colors { @each $name, $color in $gray-colors {
--#{$prefix}#{$name}: #{$color}; --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color, white) > $min-contrast-ratio, var(--#{$prefix}white), var(--#{$prefix}body-color))};
} }
/** Spacers */ /** Spacers */

1
core/scss/_variables.scss
View File

@@ -279,6 +279,7 @@ $gray-colors: (
gray-700: $gray-700, gray-700: $gray-700,
gray-800: $gray-800, gray-800: $gray-800,
gray-900: $gray-900, gray-900: $gray-900,
gray-950: $gray-950,
) !default; ) !default;
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ())); $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));

4
core/scss/utils/_colors.scss
View File

@@ -64,7 +64,7 @@
} }
.text-#{"" + $color}-fg { .text-#{"" + $color}-fg {
color: $value !important; color: var(--#{$prefix}#{$color}-fg) !important;
} }
} }
@@ -75,7 +75,7 @@
} }
.text-#{"" + $color}-fg { .text-#{"" + $color}-fg {
color: $value !important; color: var(--#{$prefix}#{$color}-fg) !important;
} }
} }

4
preview/pages/buttons.html
View File

@@ -81,7 +81,7 @@ permalink: buttons.html
<h3 class="card-title">Icon buttons</h3> <h3 class="card-title">Icon buttons</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon-only=true auto-columns=true %} {% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
</div> </div>
</div> </div>
</div> </div>
@@ -91,7 +91,7 @@ permalink: buttons.html
<h3 class="card-title">Social colors</h3> <h3 class="card-title">Social colors</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon=true auto-columns=true %} {% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
</div> </div>
</div> </div>
</div> </div>

136
preview/pages/colors.html
View File

@@ -10,63 +10,97 @@ permalink: colors.html
{% for color in site.colors %} {% for color in site.colors %}
{% assign colors = colors | push: color[0] %} {% assign colors = colors | push: color[0] %}
{% endfor %} {% endfor %}
{% assign colors = colors | push: 'dark' %}
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-3">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="row g-3">
<table class="table text-center"> {% for color in site.colors %}
<tr> <div class="col-12">
{% for color in colors %} <div class="row align-items-center">
<td> <div class="col-auto">
<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }} <div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
{{ color[1].abbr }}
</div>
</div>
<div class="col">
{{ color[1].title }}<br />
<code>{{ color[1].hex }}</code>
</div> </div>
</td>
{% endfor %}
</tr>
<tr>
{% for color in colors %}
<td>
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
</td>
{% endfor %}
</tr>
<tr>
{% for color in colors %}
<td>
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
</div> </div>
</td>
{% endfor %}
</tr>
<tr class="bg-surface-tertiary">
{% for color in colors %}
<td>
<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
</div> </div>
</td>
{% endfor %} {% endfor %}
</tr> </div>
<tr class="bg-dark text-white"> </div>
{% for color in colors %} </div>
<td> </div>
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} <div class="col-3">
<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div> <div class="card">
</td> <div class="card-body">
<div class="row g-3">
{% for color in site.lightColors %}
<div class="col-12">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
{{ color[1].abbr }}
</div>
</div>
<div class="col">
{{ color[1].title }}<br />
<code>{{ color[1].hex }}</code>
</div>
</div>
</div>
{% endfor %} {% endfor %}
</tr> </div>
<tr class="bg-dark text-white"> </div>
{% for color in colors %} </div>
<td> </div>
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} <div class="col-3">
<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div> <div class="card">
<div class="mt-2" data-demo-color-contrast></div> <div class="card-body">
</td> <div class="row g-3">
{% for color in site.grayColors %}
<div class="col-12">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
{{ color[1].abbr }}
</div>
</div>
<div class="col">
{{ color[1].title }}<br />
<code>{{ color[1].hex }}</code>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<div class="row g-3">
{% for color in site.socialColors %}
<div class="col-12">
<div class="row align-items-center">
<div class="col-auto">
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
{% include "ui/icon.html" icon=color[1].icon %}
</div>
</div>
<div class="col">
{{ color[1].title }}<br />
<code>{{ color[1].hex }}</code>
</div>
</div>
</div>
{% endfor %} {% endfor %}
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
@@ -87,7 +121,7 @@ permalink: colors.html
<div class="col"> <div class="col">
<div> <div>
<label class="form-label">From</label> <label class="form-label">From</label>
<select class="form-select" data-demo-color-select name="color-from"> <select class="form-select" name="color-from">
{% for color in colors %} {% for color in colors %}
<option value="{{ color }}">{{ color }}</option> <option value="{{ color }}">{{ color }}</option>
{% endfor %} {% endfor %}
@@ -95,7 +129,7 @@ permalink: colors.html
</div> </div>
<div class="mt-3"> <div class="mt-3">
<label class="form-label">To</label> <label class="form-label">To</label>
<select class="form-select" data-demo-color-select name="color-to"> <select class="form-select" name="color-to">
{% for color in colors %} {% for color in colors %}
<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}> <option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
{{ color }} {{ color }}
@@ -107,7 +141,7 @@ permalink: colors.html
<div class="col"> <div class="col">
<div> <div>
<label class="form-label">Via</label> <label class="form-label">Via</label>
<select class="form-select" data-demo-color-select name="color-via"> <select class="form-select" name="color-via">
<option></option> <option></option>
{% for color in colors %} {% for color in colors %}
<option value="{{ color }}">{{ color }}</option> <option value="{{ color }}">{{ color }}</option>
@@ -116,7 +150,7 @@ permalink: colors.html
</div> </div>
<div class="mt-3"> <div class="mt-3">
<label class="form-label">Direction</label> <label class="form-label">Direction</label>
<select class="form-select" data-demo-color-select name="color-direction"> <select class="form-select" name="color-direction">
<option value="to-t">to top</option> <option value="to-t">to top</option>
<option value="to-te">to top right</option> <option value="to-te">to top right</option>
<option value="to-r" selected>to right</option> <option value="to-r" selected>to right</option>

255
shared/data/site.json
View File

@@ -39,124 +39,148 @@
"blue": { "blue": {
"class": "blue", "class": "blue",
"hex": "var(--tblr-blue)", "hex": "var(--tblr-blue)",
"title": "Blue" "title": "Blue",
"abbr": "bl"
}, },
"azure": { "azure": {
"class": "azure", "class": "azure",
"hex": "var(--tblr-azure)", "hex": "var(--tblr-azure)",
"title": "Azure" "title": "Azure",
"abbr": "az"
}, },
"indigo": { "indigo": {
"class": "indigo", "class": "indigo",
"hex": "var(--tblr-indigo)", "hex": "var(--tblr-indigo)",
"title": "Indigo" "title": "Indigo",
"abbr": "id"
}, },
"purple": { "purple": {
"class": "purple", "class": "purple",
"hex": "var(--tblr-purple)", "hex": "var(--tblr-purple)",
"title": "Purple" "title": "Purple",
"abbr": "pu"
}, },
"pink": { "pink": {
"class": "pink", "class": "pink",
"hex": "var(--tblr-pink)", "hex": "var(--tblr-pink)",
"title": "Pink" "title": "Pink",
"abbr": "pk"
}, },
"red": { "red": {
"class": "red", "class": "red",
"hex": "var(--tblr-red)", "hex": "var(--tblr-red)",
"title": "Red" "title": "Red",
"abbr": "rd"
}, },
"orange": { "orange": {
"class": "orange", "class": "orange",
"hex": "var(--tblr-orange)", "hex": "var(--tblr-orange)",
"title": "Orange" "title": "Orange",
"abbr": "or"
}, },
"yellow": { "yellow": {
"class": "yellow", "class": "yellow",
"hex": "var(--tblr-yellow)", "hex": "var(--tblr-yellow)",
"title": "Yellow" "title": "Yellow",
"abbr": "yl"
}, },
"lime": { "lime": {
"class": "lime", "class": "lime",
"hex": "var(--tblr-lime)", "hex": "var(--tblr-lime)",
"title": "Lime" "title": "Lime",
"abbr": "lm"
}, },
"green": { "green": {
"class": "green", "class": "green",
"hex": "var(--tblr-green)", "hex": "var(--tblr-green)",
"title": "Green" "title": "Green",
"abbr": "gn"
}, },
"teal": { "teal": {
"class": "teal", "class": "teal",
"hex": "var(--tblr-teal)", "hex": "var(--tblr-teal)",
"title": "Teal" "title": "Teal",
"abbr": "tl"
}, },
"cyan": { "cyan": {
"class": "cyan", "class": "cyan",
"hex": "var(--tblr-cyan)", "hex": "var(--tblr-cyan)",
"title": "Cyan" "title": "Cyan",
"abbr": "cy"
} }
}, },
"lightColors": { "lightColors": {
"blue": { "blue": {
"class": "blue", "class": "blue",
"hex": "var(--tblr-blue-lt)", "hex": "var(--tblr-blue-lt)",
"title": "Blue" "title": "Blue Light",
"abbr": "bl"
}, },
"azure": { "azure": {
"class": "azure", "class": "azure",
"hex": "var(--tblr-azure-lt)", "hex": "var(--tblr-azure-lt)",
"title": "Azure" "title": "Azure Light",
"abbr": "az"
}, },
"indigo": { "indigo": {
"class": "indigo", "class": "indigo",
"hex": "var(--tblr-indigo-lt)", "hex": "var(--tblr-indigo-lt)",
"title": "Indigo" "title": "Indigo Light",
"abbr": "id"
}, },
"purple": { "purple": {
"class": "purple", "class": "purple",
"hex": "var(--tblr-purple-lt)", "hex": "var(--tblr-purple-lt)",
"title": "Purple" "title": "Purple Light",
"abbr": "pu"
}, },
"pink": { "pink": {
"class": "pink", "class": "pink",
"hex": "var(--tblr-pink-lt)", "hex": "var(--tblr-pink-lt)",
"title": "Pink" "title": "Pink Light",
"abbr": "pk"
}, },
"red": { "red": {
"class": "red", "class": "red",
"hex": "var(--tblr-red-lt)", "hex": "var(--tblr-red-lt)",
"title": "Red" "title": "Red Light",
"abbr": "rd"
}, },
"orange": { "orange": {
"class": "orange", "class": "orange",
"hex": "var(--tblr-orange-lt)", "hex": "var(--tblr-orange-lt)",
"title": "Orange" "title": "Orange Light",
"abbr": "or"
}, },
"yellow": { "yellow": {
"class": "yellow", "class": "yellow",
"hex": "var(--tblr-yellow-lt)", "hex": "var(--tblr-yellow-lt)",
"title": "Yellow" "title": "Yellow Light",
"abbr": "yl"
}, },
"lime": { "lime": {
"class": "lime", "class": "lime",
"hex": "var(--tblr-lime-lt)", "hex": "var(--tblr-lime-lt)",
"title": "Lime" "title": "Lime Light",
"abbr": "lm"
}, },
"green": { "green": {
"class": "green", "class": "green",
"hex": "var(--tblr-green-lt)", "hex": "var(--tblr-green-lt)",
"title": "Green" "title": "Green Light",
"abbr": "gn"
}, },
"teal": { "teal": {
"class": "teal", "class": "teal",
"hex": "var(--tblr-teal-lt)", "hex": "var(--tblr-teal-lt)",
"title": "Teal" "title": "Teal Light",
"abbr": "tl"
}, },
"cyan": { "cyan": {
"class": "cyan", "class": "cyan",
"hex": "var(--tblr-cyan-lt)", "hex": "var(--tblr-cyan-lt)",
"title": "Cyan" "title": "Cyan Light",
"abbr": "cy"
} }
}, },
"skinColors": { "skinColors": {
@@ -204,109 +228,156 @@
"socialColors": { "socialColors": {
"facebook": { "facebook": {
"title": "Facebook", "title": "Facebook",
"hex": "#1877F2" "hex": "var(--tblr-facebook)",
"abbr": "fb",
"icon": "brand-facebook"
}, },
"twitter": { "twitter": {
"title": "Twitter", "title": "Twitter",
"hex": "#1da1f2" "hex": "var(--tblr-twitter)",
"abbr": "tw",
"icon": "brand-twitter"
},
"x": {
"title": "X",
"hex": "var(--tblr-x)",
"abbr": "x",
"icon": "brand-x"
}, },
"linkedin": { "linkedin": {
"title": "Linkedin", "title": "Linkedin",
"hex": "#0a66c2" "hex": "var(--tblr-linkedin)",
"abbr": "li",
"icon": "brand-linkedin"
}, },
"google": { "google": {
"title": "Google", "title": "Google",
"hex": "#dc4e41" "hex": "var(--tblr-google)",
"abbr": "go",
"icon": "brand-google"
}, },
"youtube": { "youtube": {
"title": "Youtube", "title": "Youtube",
"hex": "#ff0000" "hex": "var(--tblr-youtube)",
"abbr": "yt",
"icon": "brand-youtube"
}, },
"vimeo": { "vimeo": {
"title": "Vimeo", "title": "Vimeo",
"hex": "#1ab7ea" "hex": "var(--tblr-vimeo)",
"abbr": "vi",
"icon": "brand-vimeo"
}, },
"dribbble": { "dribbble": {
"title": "Dribbble", "title": "Dribbble",
"hex": "#ea4c89" "hex": "var(--tblr-dribbble)",
"abbr": "dr",
"icon": "brand-dribbble"
}, },
"github": { "github": {
"title": "Github", "title": "Github",
"hex": "#181717" "hex": "var(--tblr-github)",
"abbr": "gh",
"icon": "brand-github"
}, },
"instagram": { "instagram": {
"title": "Instagram", "title": "Instagram",
"hex": "#e4405f" "hex": "var(--tblr-instagram)",
"abbr": "ig",
"icon": "brand-instagram"
}, },
"pinterest": { "pinterest": {
"title": "Pinterest", "title": "Pinterest",
"hex": "#bd081c" "hex": "var(--tblr-pinterest)",
"abbr": "pt",
"icon": "brand-pinterest"
}, },
"vk": { "vk": {
"title": "VK", "title": "VK",
"hex": "#6383a8" "hex": "var(--tblr-vk)",
"abbr": "vk",
"icon": "brand-vk"
}, },
"rss": { "rss": {
"title": "RSS", "title": "RSS",
"hex": "#ffa500" "hex": "var(--tblr-rss)",
"abbr": "rs",
"icon": "rss"
}, },
"flickr": { "flickr": {
"title": "Flickr", "title": "Flickr",
"hex": "#0063dc" "hex": "var(--tblr-flickr)",
"abbr": "fl",
"icon": "brand-flickr"
}, },
"bitbucket": { "bitbucket": {
"title": "Bitbucket", "title": "Bitbucket",
"hex": "#0052cc" "hex": "var(--tblr-bitbucket)",
"abbr": "bb",
"icon": "brand-bitbucket"
}, },
"tabler": { "tabler": {
"title": "Tabler", "title": "Tabler",
"hex": "#066fd1" "hex": "var(--tblr-tabler)",
"abbr": "tb",
"icon": "brand-tabler"
} }
}, },
"grayColors": { "grayColors": {
"gray-50": { "gray-50": {
"hex": "#f9fafb", "hex": "var(--tblr-gray-50)",
"title": "Gray 50" "title": "Gray 50",
"abbr": "50"
}, },
"gray-100": { "gray-100": {
"hex": "#f3f4f6", "hex": "var(--tblr-gray-100)",
"title": "Gray 100" "title": "Gray 100",
"abbr": "100"
}, },
"gray-200": { "gray-200": {
"hex": "#e5e7eb", "hex": "var(--tblr-gray-200)",
"title": "Gray 200" "title": "Gray 200",
"abbr": "200"
}, },
"gray-300": { "gray-300": {
"hex": "#d1d5db", "hex": "var(--tblr-gray-300)",
"title": "Gray 300" "title": "Gray 300",
"abbr": "300"
}, },
"gray-400": { "gray-400": {
"hex": "#9ca3af", "hex": "var(--tblr-gray-400)",
"title": "Gray 400" "title": "Gray 400",
"abbr": "400"
}, },
"gray-500": { "gray-500": {
"hex": "#6b7280", "hex": "var(--tblr-gray-500)",
"title": "Gray 500" "title": "Gray 500",
"abbr": "500"
}, },
"gray-600": { "gray-600": {
"hex": "#4b5563", "hex": "var(--tblr-gray-600)",
"title": "Gray 600" "title": "Gray 600",
"abbr": "600"
}, },
"gray-700": { "gray-700": {
"hex": "#374151", "hex": "var(--tblr-gray-700)",
"title": "Gray 700" "title": "Gray 700",
"abbr": "700"
}, },
"gray-800": { "gray-800": {
"hex": "#1f2937", "hex": "var(--tblr-gray-800)",
"title": "Gray 800" "title": "Gray 800",
"abbr": "800"
}, },
"gray-900": { "gray-900": {
"hex": "#111827", "hex": "var(--tblr-gray-900)",
"title": "Gray 900" "title": "Gray 900",
"abbr": "900"
}, },
"gray-950": { "gray-950": {
"hex": "#030712", "hex": "var(--tblr-gray-950)",
"title": "Gray 950" "title": "Gray 950",
"abbr": "950"
} }
}, },
"colorsExtra": { "colorsExtra": {
@@ -389,68 +460,6 @@
"title": "Disabled" "title": "Disabled"
} }
], ],
"socials": {
"x": {
"icon": "brand-x",
"title": "X"
},
"facebook": {
"icon": "brand-facebook",
"title": "Facebook"
},
"twitter": {
"icon": "brand-twitter",
"title": "Twitter"
},
"google": {
"icon": "brand-google",
"title": "Google"
},
"youtube": {
"icon": "brand-youtube",
"title": "Youtube"
},
"vimeo": {
"icon": "brand-vimeo",
"title": "Vimeo"
},
"dribbble": {
"icon": "brand-dribbble",
"title": "Dribbble"
},
"github": {
"icon": "brand-github",
"title": "Github"
},
"instagram": {
"icon": "brand-instagram",
"title": "Instagram"
},
"pinterest": {
"icon": "brand-pinterest",
"title": "Pinterest"
},
"vk": {
"icon": "brand-vk",
"title": "VK"
},
"rss": {
"icon": "rss",
"title": "RSS"
},
"flickr": {
"icon": "brand-flickr",
"title": "Flickr"
},
"bitbucket": {
"icon": "brand-bitbucket",
"title": "Bitbucket"
},
"tabler": {
"icon": "brand-tabler",
"title": "Tabler"
}
},
"months-short": [ "months-short": [
"Jan", "Jan",
"Feb", "Feb",