1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00

Enhance color variables and update color display in documentation

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

View File

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

View File

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

View File

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

View File

@@ -81,7 +81,7 @@ permalink: buttons.html
<h3 class="card-title">Icon buttons</h3>
</div>
<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>
@@ -91,7 +91,7 @@ permalink: buttons.html
<h3 class="card-title">Social colors</h3>
</div>
<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>

View File

@@ -10,63 +10,97 @@ permalink: colors.html
{% for color in site.colors %}
{% assign colors = colors | push: color[0] %}
{% endfor %}
{% assign colors = colors | push: 'dark' %}
<div class="row row-cards">
<div class="col-12">
<div class="col-3">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table text-center">
<tr>
{% for color in colors %}
<td>
<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
<div class="row g-3">
{% for color in site.colors %}
<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>
</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 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.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>
</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 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.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>
</td>
{% endfor %}
</tr>
<tr class="bg-dark text-white">
{% for color in colors %}
<td>
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
</td>
{% endfor %}
</tr>
<tr class="bg-dark text-white">
{% for color in colors %}
<td>
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
{% endfor %}
</tr>
</table>
</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 %}
</div>
</div>
</div>
@@ -87,7 +121,7 @@ permalink: colors.html
<div class="col">
<div>
<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 %}
<option value="{{ color }}">{{ color }}</option>
{% endfor %}
@@ -95,7 +129,7 @@ permalink: colors.html
</div>
<div class="mt-3">
<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 %}
<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
{{ color }}
@@ -107,7 +141,7 @@ permalink: colors.html
<div class="col">
<div>
<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>
{% for color in colors %}
<option value="{{ color }}">{{ color }}</option>
@@ -116,7 +150,7 @@ permalink: colors.html
</div>
<div class="mt-3">
<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-te">to top right</option>
<option value="to-r" selected>to right</option>

View File

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