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

Update color references and enhance badge styles for consistency

Browse Source
This commit is contained in:
codecalm
2025-03-29 19:22:03 +01:00
parent 137e5be8f2
commit 763e482e8d
30 changed files with 313 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
core/docs/ui/base/colors.mdx
View File

@@ -29,18 +29,18 @@ Choose one of the available colors from the basic color palette and make your de
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
<ColorsTable colors={[
{ name: "blue-lt", value: "#e9f0f9" },
{ name: "azure-lt", value: "#ecf5fc" },
{ name: "indigo-lt", value: "#eceffd" },
{ name: "purple-lt", value: "#f7ecfa" },
{ name: "pink-lt", value: "#fbebf0" },
{ name: "red-lt", value: "#fbebeb" },
{ name: "orange-lt", value: "#fef0e6" },
{ name: "yellow-lt", value: "#fef5e6" },
{ name: "lime-lt", value: "#f1f8e8" },
{ name: "green-lt", value: "#eaf7ec" },
{ name: "teal-lt", value: "#e7f6f2" },
{ name: "cyan-lt", value: "#e8f6f8" }
{ name: "blue-lightest", value: "#e9f0f9" },
{ name: "azure-lightest", value: "#ecf5fc" },
{ name: "indigo-lightest", value: "#eceffd" },
{ name: "purple-lightest", value: "#f7ecfa" },
{ name: "pink-lightest", value: "#fbebf0" },
{ name: "red-lightest", value: "#fbebeb" },
{ name: "orange-lightest", value: "#fef0e6" },
{ name: "yellow-lightest", value: "#fef5e6" },
{ name: "lime-lightest", value: "#f1f8e8" },
{ name: "green-lightest", value: "#eaf7ec" },
{ name: "teal-lightest", value: "#e7f6f2" },
{ name: "cyan-lightest", value: "#e8f6f8" }
]}/>
## Gray palette

10
core/docs/ui/components/avatars.mdx
View File

@@ -110,11 +110,11 @@ Besides pictures and initials, you can also use icons to make the avatars more u
Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
```html example centered separated code
<span class="avatar bg-green-lt">AB</span>
<span class="avatar bg-red-lt">CD</span>
<span class="avatar bg-yellow-lt">EF</span>
<span class="avatar bg-primary-lt">GH</span>
<span class="avatar bg-purple-lt">IJ</span>
<span class="avatar bg-green-lightest">AB</span>
<span class="avatar bg-red-lightest">CD</span>
<span class="avatar bg-yellow-lightest">EF</span>
<span class="avatar bg-primary-lightest">GH</span>
<span class="avatar bg-purple-lightest">IJ</span>
```
## Avatar size

72
core/docs/ui/components/badges.mdx
View File

@@ -10,18 +10,18 @@ bootstrapLink: components/badge/
The default badges are square and come in the basic set of colors.
```html example centered separated
<span class="badge bg-blue-lt">Blue</span>
<span class="badge bg-azure-lt">Azure</span>
<span class="badge bg-indigo-lt">Indigo</span>
<span class="badge bg-purple-lt">Purple</span>
<span class="badge bg-pink-lt">Pink</span>
<span class="badge bg-red-lt">Red</span>
<span class="badge bg-orange-lt">Orange</span>
<span class="badge bg-yellow-lt">Yellow</span>
<span class="badge bg-lime-lt">Lime</span>
<span class="badge bg-green-lt">Green</span>
<span class="badge bg-teal-lt">Teal</span>
<span class="badge bg-cyan-lt">Cyan</span>
<span class="badge bg-blue-lightest">Blue</span>
<span class="badge bg-azure-lightest">Azure</span>
<span class="badge bg-indigo-lightest">Indigo</span>
<span class="badge bg-purple-lightest">Purple</span>
<span class="badge bg-pink-lightest">Pink</span>
<span class="badge bg-red-lightest">Red</span>
<span class="badge bg-orange-lightest">Orange</span>
<span class="badge bg-yellow-lightest">Yellow</span>
<span class="badge bg-lime-lightest">Lime</span>
<span class="badge bg-green-lightest">Green</span>
<span class="badge bg-teal-lightest">Teal</span>
<span class="badge bg-cyan-lightest">Cyan</span>
```
## Headings
@@ -59,18 +59,18 @@ The default badges are square and come in the basic set of colors.
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
```html example centered separated
<span class="badge badge-pill bg-blue-lt">1</span>
<span class="badge badge-pill bg-azure-lt">2</span>
<span class="badge badge-pill bg-indigo-lt">3</span>
<span class="badge badge-pill bg-purple-lt">4</span>
<span class="badge badge-pill bg-pink-lt">5</span>
<span class="badge badge-pill bg-red-lt">6</span>
<span class="badge badge-pill bg-orange-lt">7</span>
<span class="badge badge-pill bg-yellow-lt">8</span>
<span class="badge badge-pill bg-lime-lt">9</span>
<span class="badge badge-pill bg-green-lt">10</span>
<span class="badge badge-pill bg-teal-lt">11</span>
<span class="badge badge-pill bg-cyan-lt">12</span>
<span class="badge badge-pill bg-blue-lightest">1</span>
<span class="badge badge-pill bg-azure-lightest">2</span>
<span class="badge badge-pill bg-indigo-lightest">3</span>
<span class="badge badge-pill bg-purple-lightest">4</span>
<span class="badge badge-pill bg-pink-lightest">5</span>
<span class="badge badge-pill bg-red-lightest">6</span>
<span class="badge badge-pill bg-orange-lightest">7</span>
<span class="badge badge-pill bg-yellow-lightest">8</span>
<span class="badge badge-pill bg-lime-lightest">9</span>
<span class="badge badge-pill bg-green-lightest">10</span>
<span class="badge badge-pill bg-teal-lightest">11</span>
<span class="badge badge-pill bg-cyan-lightest">12</span>
```
## Links
@@ -78,18 +78,18 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
```html example centered separated
<a href="#" class="badge bg-blue-lt">Blue</a>
<a href="#" class="badge bg-azure-lt">Azure</a>
<a href="#" class="badge bg-indigo-lt">Indigo</a>
<a href="#" class="badge bg-purple-lt">Purple</a>
<a href="#" class="badge bg-pink-lt">Pink</a>
<a href="#" class="badge bg-red-lt">Red</a>
<a href="#" class="badge bg-orange-lt">Orange</a>
<a href="#" class="badge bg-yellow-lt">Yellow</a>
<a href="#" class="badge bg-lime-lt">Lime</a>
<a href="#" class="badge bg-green-lt">Green</a>
<a href="#" class="badge bg-teal-lt">Teal</a>
<a href="#" class="badge bg-cyan-lt">Cyan</a>
<a href="#" class="badge bg-blue-lightest">Blue</a>
<a href="#" class="badge bg-azure-lightest">Azure</a>
<a href="#" class="badge bg-indigo-lightest">Indigo</a>
<a href="#" class="badge bg-purple-lightest">Purple</a>
<a href="#" class="badge bg-pink-lightest">Pink</a>
<a href="#" class="badge bg-red-lightest">Red</a>
<a href="#" class="badge bg-orange-lightest">Orange</a>
<a href="#" class="badge bg-yellow-lightest">Yellow</a>
<a href="#" class="badge bg-lime-lightest">Lime</a>
<a href="#" class="badge bg-green-lightest">Green</a>
<a href="#" class="badge bg-teal-lightest">Teal</a>
<a href="#" class="badge bg-cyan-lightest">Cyan</a>
```
## Button with badge

12
core/docs/ui/components/progress.mdx
View File

@@ -193,7 +193,7 @@ By using a progress bar component as a background element, designers can create
```html
<div class="progressbg">
<div class="progress progressbg-progress">
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
<div class="progress-bar bg-primary-lightest" style="width: 65%"></div>
</div>
<div class="progressbg-text">Poland</div>
<div class="progressbg-value">65%</div>
@@ -205,35 +205,35 @@ Thanks to this you can create a nice looking statistics section:
```html example vertical separated centered columns={1} plugins="flags" height="20rem"
<div class="progressbg">
<div class="progress progressbg-progress">
<div class="progress-bar bg-primary-lt" style="width: 65%"></div>
<div class="progress-bar bg-primary-lightest" style="width: 65%"></div>
</div>
<div class="progressbg-text">Poland</div>
<div class="progressbg-value">65%</div>
</div>
<div class="progressbg">
<div class="progress progressbg-progress">
<div class="progress-bar bg-primary-lt" style="width: 35%"></div>
<div class="progress-bar bg-primary-lightest" style="width: 35%"></div>
</div>
<div class="progressbg-text">Germany</div>
<div class="progressbg-value">35%</div>
</div>
<div class="progressbg">
<div class="progress progressbg-progress">
<div class="progress-bar bg-primary-lt" style="width: 28%"></div>
<div class="progress-bar bg-primary-lightest" style="width: 28%"></div>
</div>
<div class="progressbg-text">United Stated</div>
<div class="progressbg-value">28%</div>
</div>
<div class="progressbg">
<div class="progress progressbg-progress">
<div class="progress-bar bg-primary-lt" style="width: 20%"></div>
<div class="progress-bar bg-primary-lightest" style="width: 20%"></div>
</div>
<div class="progressbg-text">United Kingdom</div>
<div class="progressbg-value">20%</div>
</div>
<div class="progressbg">
<div class="progress progressbg-progress">
<div class="progress-bar bg-primary-lt" style="width: 15%"></div>
<div class="progress-bar bg-primary-lightest" style="width: 15%"></div>
</div>
<div class="progressbg-text">France</div>
<div class="progressbg-value">15%</div>

16
core/docs/ui/components/timelines.mdx
View File

@@ -11,7 +11,7 @@ The available timeline design is composed of many components that will help you
```html example height="400px" scrollable background="base"
<ul class="timeline">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt">
<div class="timeline-event-icon bg-twitter-lightest">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
@@ -94,7 +94,7 @@ The available timeline design is composed of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">
<div class="timeline-event-icon bg-facebook-lightest">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
@@ -234,7 +234,7 @@ The available timeline design is composed of many components that will help you
```html
<ul class="timeline">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt">
<div class="timeline-event-icon bg-twitter-lightest">
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg>
</div>
@@ -273,7 +273,7 @@ The available timeline design is composed of many components that will help you
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">
<div class="timeline-event-icon bg-facebook-lightest">
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg>
</div>
@@ -357,7 +357,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
```html example height="400px" scrollable background="base"
<ul class="timeline timeline-simple">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt">
<div class="timeline-event-icon bg-twitter-lightest">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
@@ -440,7 +440,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">
<div class="timeline-event-icon bg-facebook-lightest">
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon"
@@ -580,7 +580,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
```html
<ul class="timeline timeline-simple">
<li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt">
<div class="timeline-event-icon bg-twitter-lightest">
<!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg>
</div>
@@ -619,7 +619,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">
<div class="timeline-event-icon bg-facebook-lightest">
<!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg>
</div>

44
core/docs/ui/utilities/margins.mdx
View File

@@ -30,17 +30,17 @@ Use the `.m-*` utilities to control the margin of an element. Margin utilities a
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-purple-lt">
<div class="bg-purple-lightest">
<div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-purple-lt">
<div class="bg-purple-lightest">
<div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-purple-lt">
<div class="bg-purple-lightest">
<div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
</div>
</div>
@@ -56,17 +56,17 @@ Start margins control the spacing to the left of an element, helping to create c
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-red-lt">
<div class="bg-red-lightest">
<div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-red-lt">
<div class="bg-red-lightest">
<div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-red-lt">
<div class="bg-red-lightest">
<div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
</div>
</div>
@@ -82,17 +82,17 @@ End margins control the spacing on the right side of an element. These utilities
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-orange-lt">
<div class="bg-orange-lightest">
<div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-orange-lt">
<div class="bg-orange-lightest">
<div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-orange-lt">
<div class="bg-orange-lightest">
<div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
</div>
</div>
@@ -108,17 +108,17 @@ Top margins define the spacing above an element. This is useful for separating s
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-yellow-lt">
<div class="bg-yellow-lightest">
<div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-yellow-lt">
<div class="bg-yellow-lightest">
<div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-yellow-lt">
<div class="bg-yellow-lightest">
<div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
</div>
</div>
@@ -134,17 +134,17 @@ Bottom margins control the spacing below an element, helping to create consisten
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-lime-lt">
<div class="bg-lime-lightest">
<div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-lime-lt">
<div class="bg-lime-lightest">
<div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-lime-lt">
<div class="bg-lime-lightest">
<div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
</div>
</div>
@@ -160,17 +160,17 @@ Use the `mx-*` utilities to control the horizontal margin of an element. Horizon
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-azure-lt">
<div class="bg-azure-lightest">
<div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-azure-lt">
<div class="bg-azure-lightest">
<div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-azure-lt">
<div class="bg-azure-lightest">
<div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
</div>
</div>
@@ -187,17 +187,17 @@ Use the `my-*` utilities to control the vertical margin of an element. Vertical
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-blue-lt">
<div class="bg-blue-lightest">
<div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-blue-lt">
<div class="bg-blue-lightest">
<div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-blue-lt">
<div class="bg-blue-lightest">
<div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
</div>
</div>
@@ -226,7 +226,7 @@ Use the `.gap-*` utilities to control the space between elements in a grid layou
```
```html example
<div class="d-grid gap-6 bg-indigo-lt">
<div class="d-grid gap-6 bg-indigo-lightest">
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>

25
core/scss/_props.scss
View File

@@ -9,17 +9,10 @@
--#{$prefix}font-comic: #{$font-family-comic};
/** Gray colors */
--#{$prefix}gray-50: #{$gray-50};
--#{$prefix}gray-100: #{$gray-100};
--#{$prefix}gray-200: #{$gray-200};
--#{$prefix}gray-300: #{$gray-300};
--#{$prefix}gray-400: #{$gray-400};
--#{$prefix}gray-500: #{$gray-500};
--#{$prefix}gray-600: #{$gray-600};
--#{$prefix}gray-700: #{$gray-700};
--#{$prefix}gray-800: #{$gray-800};
--#{$prefix}gray-900: #{$gray-900};
--#{$prefix}gray-950: #{$gray-950};
@each $name, $color in $gray-colors {
--#{$prefix}#{$name}: #{$color};
--#{$prefix}#{$name}-fg: #{$color};
}
--#{$prefix}white: #{$white};
--#{$prefix}black: #{$black};
@@ -32,14 +25,10 @@
/** Theme colors */
@each $name, $color in map-merge($theme-colors, $social-colors) {
--#{$prefix}#{$name}: #{$color};
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
--#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
--#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
--#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
--#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
--#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
--#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
--#{$prefix}#{$name}-darker: #{theme-color-darker($color)};
--#{$prefix}#{$name}-lighter: #{theme-color-lighter($color)};
--#{$prefix}#{$name}-lightest: #{theme-color-lightest($color)};
}
/** Social colors */

17
core/scss/_variables.scss
View File

@@ -278,8 +278,25 @@ $gray-colors: (
gray-700: $gray-700,
gray-800: $gray-800,
gray-900: $gray-900,
gray-950: $gray-950,
) !default;
$foreground-colors: (
white: var(--#{$prefix}dark),
gray-50: var(--#{$prefix}dark),
gray-100: var(--#{$prefix}dark),
gray-200: var(--#{$prefix}dark),
gray-300: var(--#{$prefix}dark),
gray-400: var(--#{$prefix}dark),
gray-500: var(--#{$prefix}dark),
gray-600: var(--#{$prefix}light),
gray-700: var(--#{$prefix}light),
gray-800: var(--#{$prefix}light),
gray-900: var(--#{$prefix}light),
gray-950: var(--#{$prefix}light),
black: var(--#{$prefix}light),
);
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
// BACKDROPS

2
core/scss/layout/_root.scss
View File

@@ -25,7 +25,7 @@
--#{$prefix}text-inverted: var(--#{$prefix}gray-100);
--#{$prefix}body-color: var(--#{$prefix}gray-700);
--#{$prefix}body-color: var(--#{$prefix}gray-800);
--#{$prefix}body-bg: var(--#{$prefix}bg-surface-secondary);
--#{$prefix}link-color: var(--#{$prefix}primary);

10
core/scss/mixins/_functions.scss
View File

@@ -1,9 +1,13 @@
@function theme-color-lighter($color, $background: #fff) {
@return mix($color, $background, 10%);
@function theme-color-lightest($color) {
@return color-mix(in oklab, $color 8%, transparent);
}
@function theme-color-lighter($color) {
@return color-mix(in oklab, $color 24%, transparent);
}
@function theme-color-darker($color) {
@return shade-color($color, 10%);
@return color-mix(in oklab, #{$color}, #000 20%)
}
//

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

@@ -4,9 +4,18 @@
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
}
.bg-#{"" + $color}-lt {
.bg-#{"" + $color}-darker {
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-darker) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
}
.bg-#{"" + $color}-lightest {
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lt) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lightest) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
}
.bg-#{"" + $color}-lighter {
color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}text-opacity, 1) * 100%), transparent) !important;
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}-lighter) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
}
.border-#{"" + $color} {
@@ -79,6 +88,12 @@
}
}
@each $color, $value in $foreground-colors {
.text-#{"" + $color}-fg {
color: $value !important;
}
}
.bg-inverted {
--#{$prefix}bg-opacity: 1;
background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;

85
preview/eleventy.config.mjs
View File

@@ -135,68 +135,125 @@ export default function (eleventyConfig) {
buy_link: "https://r.tabler.io/buy-illustrations"
},
colors: {
"blue": {
colors: [
{
"class": "blue",
"hex": "#066fd1",
"title": "Blue"
},
"azure": {
{
"class": "azure",
"hex": "#45aaf2",
"title": "Azure"
},
"indigo": {
{
"class": "indigo",
"hex": "#6574cd",
"title": "Indigo"
},
"purple": {
{
"class": "purple",
"hex": "#a55eea",
"title": "Purple"
},
"pink": {
{
"class": "pink",
"hex": "#f66d9b",
"title": "Pink"
},
"red": {
{
"class": "red",
"hex": "#fa4654",
"title": "Red"
},
"orange": {
{
"class": "orange",
"hex": "#fd9644",
"title": "Orange"
},
"yellow": {
{
"class": "yellow",
"hex": "#f1c40f",
"title": "Yellow"
},
"lime": {
{
"class": "lime",
"hex": "#7bd235",
"title": "Lime"
},
"green": {
{
"class": "green",
"hex": "#5eba00",
"title": "Green"
},
"teal": {
{
"class": "teal",
"hex": "#2bcbba",
"title": "Teal"
},
"cyan": {
{
"class": "cyan",
"hex": "#17a2b8",
"title": "Cyan"
}
},
],
grayColors: [
{
"class": "gray-50",
"value": "var(--tb-gray-50)",
"title": "Gray 50"
},
{
"class": "gray-100",
"value": "var(--tb-gray-100)",
"title": "Gray 100"
},
{
"class": "gray-200",
"value": "var(--tb-gray-200)",
"title": "Gray 200"
},
{
"class": "gray-300",
"value": "var(--tb-gray-300)",
"title": "Gray 300"
},
{
"class": "gray-400",
"value": "var(--tb-gray-400)",
"title": "Gray 400"
},
{
"class": "gray-500",
"value": "var(--tb-gray-500)",
"title": "Gray 500"
},
{
"class": "gray-600",
"value": "var(--tb-gray-600)",
"title": "Gray 600"
},
{
"class": "gray-700",
"value": "var(--tb-gray-700)",
"title": "Gray 700"
},
{
"class": "gray-800",
"value": "var(--tb-gray-800)",
"title": "Gray 800"
},
{
"class": "gray-900",
"value": "var(--tb-gray-900)",
"title": "Gray 900"
},
{
"class": "gray-950",
"value": "var(--tb-gray-950)",
"title": "Gray 950"
}
],
skinColors: {
"rose": {
"hex": "#FFCB9D",

24
preview/pages/_data/colors.json
View File

@@ -105,51 +105,51 @@
],
"light": [
{
"name": "blue-lt",
"name": "blue-lightest",
"value": "#e9f0f9"
},
{
"name": "azure-lt",
"name": "azure-lightest",
"value": "#ecf5fc"
},
{
"name": "indigo-lt",
"name": "indigo-lightest",
"value": "#eceffd"
},
{
"name": "purple-lt",
"name": "purple-lightest",
"value": "#f7ecfa"
},
{
"name": "pink-lt",
"name": "pink-lightest",
"value": "#fbebf0"
},
{
"name": "red-lt",
"name": "red-lightest",
"value": "#fbebeb"
},
{
"name": "orange-lt",
"name": "orange-lightest",
"value": "#fef0e6"
},
{
"name": "yellow-lt",
"name": "yellow-lightest",
"value": "#fef5e6"
},
{
"name": "lime-lt",
"name": "lime-lightest",
"value": "#f1f8e8"
},
{
"name": "green-lt",
"name": "green-lightest",
"value": "#eaf7ec"
},
{
"name": "teal-lt",
"name": "teal-lightest",
"value": "#e7f6f2"
},
{
"name": "cyan-lt",
"name": "cyan-lightest",
"value": "#e8f6f8"
}
],

2
preview/pages/_includes/cards/project-summary.html
View File

@@ -4,7 +4,7 @@
<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
<p class="text-secondary">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
<p class="mb-3">
<span class="badge bg-{{ include.stage-color | default: 'green' }}-lt">{{ include.stage | default: 'Waiting' }}</span>
<span class="badge bg-{{ include.stage-color | default: 'green' }}-lightest">{{ include.stage | default: 'Waiting' }}</span>
</p>
<div>
{% include "ui/avatar-list.html" stacked=true offset=include.avatar-offset limit=include.avatar-limit %}

2
preview/pages/_includes/cards/store-list.html
View File

@@ -8,7 +8,7 @@
{% assign mod = forloop.index | modulo: 2 %}
{% if mod == 0 %}
<span class="badge badge-secondary-lt">New</span>
<span class="badge badge-secondary-lightest">New</span>
{% endif %}
</td>
<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 100 }} reviews</td>

2
preview/pages/_includes/cards/tables/progressbg.html
View File

@@ -14,7 +14,7 @@
<tr>
<td>
<div class="progressbg">
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lightest" %}
<div class="progressbg-text">{{ url.uri }}</div>
</div>
</td>

4
preview/pages/_includes/cards/timeline.html
View File

@@ -1,6 +1,6 @@
<ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
<li class="timeline-event">
<div class="timeline-event-icon bg-x-lt">{% include "ui/icon.html" icon="brand-x" %}</div>
<div class="timeline-event-icon bg-x-lightest">{% include "ui/icon.html" icon="brand-x" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">10 hrs ago</div>
@@ -30,7 +30,7 @@
</div>
</li>
<li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt">{% include "ui/icon.html" icon="brand-facebook" %}</div>
<div class="timeline-event-icon bg-facebook-lightest">{% include "ui/icon.html" icon="brand-facebook" %}</div>
<div class="card timeline-event-card">
<div class="card-body">
<div class="text-secondary float-end">1 day ago</div>

6
preview/pages/_includes/example/colors-table.html
View File

@@ -6,11 +6,11 @@
{% for color in colors %}
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
<div class="avatar bg-{{ color.class }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color.class | capitalize | first_letter }}</div>
</div>
<div class="col">
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
<span class="font-weight-semibold">{{ color.title }}</span><br/>
<code>bg-{{ color.class }}{% if light %}-lt{% endif %}</code>
</div>
</div>
{% endfor %}

2
preview/pages/_includes/parts/form/input-color.html
View File

@@ -4,7 +4,7 @@
{% endunless %}
{% for color in site.colors limit: 10 %}
{% assign colors = colors | push: color[0] %}
{% assign colors = colors | push: color.class %}
{% endfor %}
<div class="mb-3">

4
preview/pages/_includes/settings.html
View File

@@ -29,8 +29,8 @@
{% for color in site.colors %}
<div class="col-auto">
<label class="form-colorinput">
<input name="theme-primary" type="radio" value="{{ color[0] }}" class="form-colorinput-input" />
<span class="form-colorinput-color bg-{{ color[0] }}"></span>
<input name="theme-primary" type="radio" value="{{ color.class }}" class="form-colorinput-input" />
<span class="form-colorinput-color bg-{{ color.class }}"></span>
</label>
</div>
{% endfor %}

2
preview/pages/_includes/ui/chart-heatmap.html
View File

@@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
}
},
{% else %}
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color.class }}"), {% endfor %}{% endif %}],
{% endif %}
series: [
{% for i in site.monthsShort limit: 12 %}

2
preview/pages/_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 }}",
"{{ color.hex }}",
{% endfor %}
],
}))

2
preview/pages/_includes/ui/select.html
View File

@@ -41,7 +41,7 @@
{% elsif include.indicator == 'label' %}
{% capture indicator-html %}
{% assign label = option[1].label %}
<span class="badge bg-primary-lt">{{ label }}</span>
<span class="badge bg-primary-lightest">{{ label }}</span>
{% endcapture %}
{% endif %}
<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}{% if option[1].selected %} selected{% endif %}>{{ option[1].name }}</option>

4
preview/pages/badges.html
View File

@@ -6,7 +6,7 @@ layout: default
permalink: badges.html
---
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color[0]
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color.class
%} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
<div class="row row-cards">
@@ -105,7 +105,7 @@ permalink: badges.html
<h3 class="card-title">Light badges</h3>
<div class="badges-list">
{% for color in colors %}
<span class="badge bg-{{ color }}-lt">{{ color | uc_first }}</span>
<span class="badge bg-{{ color }}-lightest">{{ color | uc_first }}</span>
{% endfor %}
</div>
</div>

2
preview/pages/cards.html
View File

@@ -100,7 +100,7 @@ permalink: cards.html
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card bg-primary-lt">
<div class="card bg-primary-lightest">
<div class="card-body">
<h3 class="card-title">Card with primary light background</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>

2
preview/pages/colorpicker.html
View File

@@ -13,7 +13,7 @@ permalink: colorpicker.html
<div class="row g-3">
{% for color in site.colors %}
<div class="col-2">
<div>{% include "ui/colorpicker.html" value=color[1].hex id=forloop.index format="hex" %}</div>
<div>{% include "ui/colorpicker.html" value=color.hex id=forloop.index format="hex" %}</div>
</div>
{% endfor %}
</div>

65
preview/pages/colors.html
View File

@@ -8,11 +8,70 @@ permalink: colors.html
{% assign colors = '' | split: '' %}
{% for color in site.colors %}
{% assign colors = colors | push: color[0] %}
{% assign colors = colors | push: color.class %}
{% endfor %}
{% assign colors = colors | push: 'dark' %}
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body text-center">
<div class="row g-3">
<div class="col-12">
<div class="row g-0 rounded overflow-hidden">
{% for color in site.colors %}
<div class="col">
<div class="bg-{{ color.class }} text-{{ color.class }}-fg py-5">{{ color.class }}</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-12">
<div class="row g-0 rounded overflow-hidden">
{% for color in site.colors %}
<div class="col">
<div class="bg-{{ color.class }}-darker text-{{ color.class }}-fg py-5">{{ color.class }}</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-12">
<div class="row g-0 rounded overflow-hidden">
{% for color in site.colors %}
<div class="col">
<div class="bg-{{ color.class }}-lighter text-{{ color.class }} py-5">{{ color.class }}</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-12">
<div class="row g-0 rounded overflow-hidden">
{% for color in site.colors %}
<div class="col">
<div class="bg-{{ color.class }}-lightest text-{{ color.class }} py-5">{{ color.class }}</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-12">
<div class="row g-0 rounded overflow-hidden">
<div class="col">
<div class="bg-white text-white-fg py-5">white</div>
</div>
{% for color in site.grayColors %}
<div class="col">
<div class="bg-{{ color.class }} text-{{ color.class }}-fg py-5">{{ color.class }}</div>
</div>
{% endfor %}
<div class="col">
<div class="bg-black text-black-fg py-5">black</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
@@ -29,7 +88,7 @@ permalink: colors.html
<tr>
{% for color in colors %}
<td>
<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
<div class="avatar bg-{{ color }}-lightest" data-demo-color>{{ color | slice: 0, 2 }}</div>
</td>
{% endfor %}
</tr>
@@ -61,7 +120,7 @@ permalink: colors.html
{% 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="avatar bg-{{ c }}-lightest" data-demo-color>{{ c | slice: 0, 2 }}</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
{% endfor %}

12
preview/pages/illustrations.html
View File

@@ -48,8 +48,8 @@ permalink: illustrations.html
{% for color in site.colors %}
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" />
<span class="form-colorinput-color bg-{{ color[1].class }}"></span>
<input name="color" type="radio" value="{{ color.hex }}" class="form-colorinput-input js-select-color" />
<span class="form-colorinput-color bg-{{ color.class }}"></span>
</label>
</div>
{% endfor %}
@@ -60,8 +60,8 @@ permalink: illustrations.html
{% for color in site.skinColors %}
<div class="col-auto">
<label class="form-colorinput">
<input name="skin-color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
<span class="form-colorinput-color" style="background-color: {{ color[1].hex }}"></span>
<input name="skin-color" type="radio" value="{{ color.hex }}" class="form-colorinput-input js-select-skin-color" {% if forloop.first %} checked{% endif %} />
<span class="form-colorinput-color" style="background-color: {{ color.hex }}"></span>
</label>
</div>
{% endfor %}
@@ -142,8 +142,8 @@ permalink: illustrations.html
{% capture_script %}
<script>
let skinColor = "{{ skin_color[1].hex }}",
primaryColor = "{{ color[1].hex }}";
let skinColor = "{{ skin_color.hex }}",
primaryColor = "{{ color.hex }}";
const illustrations = {
{% for illustration in free-illustrations.autodark %}

8
preview/pages/tags.html
View File

@@ -68,8 +68,8 @@ permalink: tags.html
<h3 class="card-title">Tags with status</h3>
<div class="tags-list">
{% for color in site.colors %}
{% capture status %}{{ color[1].class }}{% endcapture %}
{% capture text %}{{ color[1].title }}{% endcapture %}
{% capture status %}{{ color.class }}{% endcapture %}
{% capture text %}{{ color.title }}{% endcapture %}
{% include "ui/tag.html" text=text status=status %}
{% endfor %}
</div>
@@ -83,8 +83,8 @@ permalink: tags.html
<h3 class="card-title">Tags with legend</h3>
<div class="tags-list">
{% for color in site.colors %}
{% capture status %}{{ color[1].class }}{% endcapture %}
{% capture text %}{{ color[1].title }}{% endcapture %}
{% capture status %}{{ color.class }}{% endcapture %}
{% capture text %}{{ color.title }}{% endcapture %}
{% include "ui/tag.html" text=text legend=status %}
{% endfor %}
</div>

4
preview/pages/users.html
View File

@@ -21,9 +21,9 @@ permalink: users.html
<div class="mt-3">
{% if forloop.index == 1 %}
<span class="badge bg-purple-lt">Owner</span>
<span class="badge bg-purple-lightest">Owner</span>
{% elsif forloop.index < 5 %}
<span class="badge bg-green-lt">Admin</span>
<span class="badge bg-green-lightest">Admin</span>
{% endif %}
</div>
</div>