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. 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={[ <ColorsTable colors={[
{ name: "blue-lt", value: "#e9f0f9" }, { name: "blue-lightest", value: "#e9f0f9" },
{ name: "azure-lt", value: "#ecf5fc" }, { name: "azure-lightest", value: "#ecf5fc" },
{ name: "indigo-lt", value: "#eceffd" }, { name: "indigo-lightest", value: "#eceffd" },
{ name: "purple-lt", value: "#f7ecfa" }, { name: "purple-lightest", value: "#f7ecfa" },
{ name: "pink-lt", value: "#fbebf0" }, { name: "pink-lightest", value: "#fbebf0" },
{ name: "red-lt", value: "#fbebeb" }, { name: "red-lightest", value: "#fbebeb" },
{ name: "orange-lt", value: "#fef0e6" }, { name: "orange-lightest", value: "#fef0e6" },
{ name: "yellow-lt", value: "#fef5e6" }, { name: "yellow-lightest", value: "#fef5e6" },
{ name: "lime-lt", value: "#f1f8e8" }, { name: "lime-lightest", value: "#f1f8e8" },
{ name: "green-lt", value: "#eaf7ec" }, { name: "green-lightest", value: "#eaf7ec" },
{ name: "teal-lt", value: "#e7f6f2" }, { name: "teal-lightest", value: "#e7f6f2" },
{ name: "cyan-lt", value: "#e8f6f8" } { name: "cyan-lightest", value: "#e8f6f8" }
]}/> ]}/>
## Gray palette ## 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. 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 ```html example centered separated code
<span class="avatar bg-green-lt">AB</span> <span class="avatar bg-green-lightest">AB</span>
<span class="avatar bg-red-lt">CD</span> <span class="avatar bg-red-lightest">CD</span>
<span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-yellow-lightest">EF</span>
<span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-primary-lightest">GH</span>
<span class="avatar bg-purple-lt">IJ</span> <span class="avatar bg-purple-lightest">IJ</span>
``` ```
## Avatar size ## 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. The default badges are square and come in the basic set of colors.
```html example centered separated ```html example centered separated
<span class="badge bg-blue-lt">Blue</span> <span class="badge bg-blue-lightest">Blue</span>
<span class="badge bg-azure-lt">Azure</span> <span class="badge bg-azure-lightest">Azure</span>
<span class="badge bg-indigo-lt">Indigo</span> <span class="badge bg-indigo-lightest">Indigo</span>
<span class="badge bg-purple-lt">Purple</span> <span class="badge bg-purple-lightest">Purple</span>
<span class="badge bg-pink-lt">Pink</span> <span class="badge bg-pink-lightest">Pink</span>
<span class="badge bg-red-lt">Red</span> <span class="badge bg-red-lightest">Red</span>
<span class="badge bg-orange-lt">Orange</span> <span class="badge bg-orange-lightest">Orange</span>
<span class="badge bg-yellow-lt">Yellow</span> <span class="badge bg-yellow-lightest">Yellow</span>
<span class="badge bg-lime-lt">Lime</span> <span class="badge bg-lime-lightest">Lime</span>
<span class="badge bg-green-lt">Green</span> <span class="badge bg-green-lightest">Green</span>
<span class="badge bg-teal-lt">Teal</span> <span class="badge bg-teal-lightest">Teal</span>
<span class="badge bg-cyan-lt">Cyan</span> <span class="badge bg-cyan-lightest">Cyan</span>
``` ```
## Headings ## 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. 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 ```html example centered separated
<span class="badge badge-pill bg-blue-lt">1</span> <span class="badge badge-pill bg-blue-lightest">1</span>
<span class="badge badge-pill bg-azure-lt">2</span> <span class="badge badge-pill bg-azure-lightest">2</span>
<span class="badge badge-pill bg-indigo-lt">3</span> <span class="badge badge-pill bg-indigo-lightest">3</span>
<span class="badge badge-pill bg-purple-lt">4</span> <span class="badge badge-pill bg-purple-lightest">4</span>
<span class="badge badge-pill bg-pink-lt">5</span> <span class="badge badge-pill bg-pink-lightest">5</span>
<span class="badge badge-pill bg-red-lt">6</span> <span class="badge badge-pill bg-red-lightest">6</span>
<span class="badge badge-pill bg-orange-lt">7</span> <span class="badge badge-pill bg-orange-lightest">7</span>
<span class="badge badge-pill bg-yellow-lt">8</span> <span class="badge badge-pill bg-yellow-lightest">8</span>
<span class="badge badge-pill bg-lime-lt">9</span> <span class="badge badge-pill bg-lime-lightest">9</span>
<span class="badge badge-pill bg-green-lt">10</span> <span class="badge badge-pill bg-green-lightest">10</span>
<span class="badge badge-pill bg-teal-lt">11</span> <span class="badge badge-pill bg-teal-lightest">11</span>
<span class="badge badge-pill bg-cyan-lt">12</span> <span class="badge badge-pill bg-cyan-lightest">12</span>
``` ```
## Links ## 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. 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 ```html example centered separated
<a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-blue-lightest">Blue</a>
<a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-azure-lightest">Azure</a>
<a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-indigo-lightest">Indigo</a>
<a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-purple-lightest">Purple</a>
<a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-pink-lightest">Pink</a>
<a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-red-lightest">Red</a>
<a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-orange-lightest">Orange</a>
<a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-yellow-lightest">Yellow</a>
<a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-lime-lightest">Lime</a>
<a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-green-lightest">Green</a>
<a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-teal-lightest">Teal</a>
<a href="#" class="badge bg-cyan-lt">Cyan</a> <a href="#" class="badge bg-cyan-lightest">Cyan</a>
``` ```
## Button with badge ## 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 ```html
<div class="progressbg"> <div class="progressbg">
<div class="progress progressbg-progress"> <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>
<div class="progressbg-text">Poland</div> <div class="progressbg-text">Poland</div>
<div class="progressbg-value">65%</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" ```html example vertical separated centered columns={1} plugins="flags" height="20rem"
<div class="progressbg"> <div class="progressbg">
<div class="progress progressbg-progress"> <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>
<div class="progressbg-text">Poland</div> <div class="progressbg-text">Poland</div>
<div class="progressbg-value">65%</div> <div class="progressbg-value">65%</div>
</div> </div>
<div class="progressbg"> <div class="progressbg">
<div class="progress progressbg-progress"> <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>
<div class="progressbg-text">Germany</div> <div class="progressbg-text">Germany</div>
<div class="progressbg-value">35%</div> <div class="progressbg-value">35%</div>
</div> </div>
<div class="progressbg"> <div class="progressbg">
<div class="progress progressbg-progress"> <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>
<div class="progressbg-text">United Stated</div> <div class="progressbg-text">United Stated</div>
<div class="progressbg-value">28%</div> <div class="progressbg-value">28%</div>
</div> </div>
<div class="progressbg"> <div class="progressbg">
<div class="progress progressbg-progress"> <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>
<div class="progressbg-text">United Kingdom</div> <div class="progressbg-text">United Kingdom</div>
<div class="progressbg-value">20%</div> <div class="progressbg-value">20%</div>
</div> </div>
<div class="progressbg"> <div class="progressbg">
<div class="progress progressbg-progress"> <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>
<div class="progressbg-text">France</div> <div class="progressbg-text">France</div>
<div class="progressbg-value">15%</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" ```html example height="400px" scrollable background="base"
<ul class="timeline"> <ul class="timeline">
<li class="timeline-event"> <li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt"> <div class="timeline-event-icon bg-twitter-lightest">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="icon" class="icon"
@@ -94,7 +94,7 @@ The available timeline design is composed of many components that will help you
</div> </div>
</li> </li>
<li class="timeline-event"> <li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt"> <div class="timeline-event-icon bg-facebook-lightest">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="icon" class="icon"
@@ -234,7 +234,7 @@ The available timeline design is composed of many components that will help you
```html ```html
<ul class="timeline"> <ul class="timeline">
<li class="timeline-event"> <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 icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg> <svg>...</svg>
</div> </div>
@@ -273,7 +273,7 @@ The available timeline design is composed of many components that will help you
</div> </div>
</li> </li>
<li class="timeline-event"> <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 icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg> <svg>...</svg>
</div> </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" ```html example height="400px" scrollable background="base"
<ul class="timeline timeline-simple"> <ul class="timeline timeline-simple">
<li class="timeline-event"> <li class="timeline-event">
<div class="timeline-event-icon bg-twitter-lt"> <div class="timeline-event-icon bg-twitter-lightest">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="icon" class="icon"
@@ -440,7 +440,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div> </div>
</li> </li>
<li class="timeline-event"> <li class="timeline-event">
<div class="timeline-event-icon bg-facebook-lt"> <div class="timeline-event-icon bg-facebook-lightest">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="icon" class="icon"
@@ -580,7 +580,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
```html ```html
<ul class="timeline timeline-simple"> <ul class="timeline timeline-simple">
<li class="timeline-event"> <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 icon from http://tabler.io/icons/icon/brand-twitter -->
<svg>...</svg> <svg>...</svg>
</div> </div>
@@ -619,7 +619,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
</div> </div>
</li> </li>
<li class="timeline-event"> <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 icon from http://tabler.io/icons/icon/brand-facebook -->
<svg>...</svg> <svg>...</svg>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
</div> </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 ```html example hide-code centered separated vertical
<div class="d-flex"> <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 class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
</div> </div>
</div> </div>
<div class="d-flex"> <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 class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
</div> </div>
</div> </div>
@@ -226,7 +226,7 @@ Use the `.gap-*` utilities to control the space between elements in a grid layou
``` ```
```html example ```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 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 2</div>
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</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}; --#{$prefix}font-comic: #{$font-family-comic};
/** Gray colors */ /** Gray colors */
--#{$prefix}gray-50: #{$gray-50}; @each $name, $color in $gray-colors {
--#{$prefix}gray-100: #{$gray-100}; --#{$prefix}#{$name}: #{$color};
--#{$prefix}gray-200: #{$gray-200}; --#{$prefix}#{$name}-fg: #{$color};
--#{$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};
--#{$prefix}white: #{$white}; --#{$prefix}white: #{$white};
--#{$prefix}black: #{$black}; --#{$prefix}black: #{$black};
@@ -32,14 +25,10 @@
/** Theme colors */ /** Theme colors */
@each $name, $color in map-merge($theme-colors, $social-colors) { @each $name, $color in map-merge($theme-colors, $social-colors) {
--#{$prefix}#{$name}: #{$color}; --#{$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}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
--#{$prefix}#{$name}-darken: #{theme-color-darker($color)}; --#{$prefix}#{$name}-darker: #{theme-color-darker($color)};
--#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%); --#{$prefix}#{$name}-lighter: #{theme-color-lighter($color)};
--#{$prefix}#{$name}-lt: #{theme-color-lighter($color)}; --#{$prefix}#{$name}-lightest: #{theme-color-lightest($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))};
} }
/** Social colors */ /** Social colors */

17
core/scss/_variables.scss
View File

@@ -278,8 +278,25 @@ $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;
$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, ())); $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
// BACKDROPS // BACKDROPS

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

@@ -25,7 +25,7 @@
--#{$prefix}text-inverted: var(--#{$prefix}gray-100); --#{$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}body-bg: var(--#{$prefix}bg-surface-secondary);
--#{$prefix}link-color: var(--#{$prefix}primary); --#{$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) { @function theme-color-lightest($color) {
@return mix($color, $background, 10%); @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) { @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; 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; 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} { .border-#{"" + $color} {
@@ -79,6 +88,12 @@
} }
} }
@each $color, $value in $foreground-colors {
.text-#{"" + $color}-fg {
color: $value !important;
}
}
.bg-inverted { .bg-inverted {
--#{$prefix}bg-opacity: 1; --#{$prefix}bg-opacity: 1;
background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important; background-color: color-mix(in srgb, var(--#{$prefix}bg-surface-inverted) calc(var(--#{$prefix}bg-opacity) * 100%), transparent) !important;

83
preview/eleventy.config.mjs
View File

@@ -135,68 +135,125 @@ export default function (eleventyConfig) {
buy_link: "https://r.tabler.io/buy-illustrations" buy_link: "https://r.tabler.io/buy-illustrations"
}, },
colors: { colors: [
"blue": { {
"class": "blue", "class": "blue",
"hex": "#066fd1", "hex": "#066fd1",
"title": "Blue" "title": "Blue"
}, },
"azure": { {
"class": "azure", "class": "azure",
"hex": "#45aaf2", "hex": "#45aaf2",
"title": "Azure" "title": "Azure"
}, },
"indigo": { {
"class": "indigo", "class": "indigo",
"hex": "#6574cd", "hex": "#6574cd",
"title": "Indigo" "title": "Indigo"
}, },
"purple": { {
"class": "purple", "class": "purple",
"hex": "#a55eea", "hex": "#a55eea",
"title": "Purple" "title": "Purple"
}, },
"pink": { {
"class": "pink", "class": "pink",
"hex": "#f66d9b", "hex": "#f66d9b",
"title": "Pink" "title": "Pink"
}, },
"red": { {
"class": "red", "class": "red",
"hex": "#fa4654", "hex": "#fa4654",
"title": "Red" "title": "Red"
}, },
"orange": { {
"class": "orange", "class": "orange",
"hex": "#fd9644", "hex": "#fd9644",
"title": "Orange" "title": "Orange"
}, },
"yellow": { {
"class": "yellow", "class": "yellow",
"hex": "#f1c40f", "hex": "#f1c40f",
"title": "Yellow" "title": "Yellow"
}, },
"lime": { {
"class": "lime", "class": "lime",
"hex": "#7bd235", "hex": "#7bd235",
"title": "Lime" "title": "Lime"
}, },
"green": { {
"class": "green", "class": "green",
"hex": "#5eba00", "hex": "#5eba00",
"title": "Green" "title": "Green"
}, },
"teal": { {
"class": "teal", "class": "teal",
"hex": "#2bcbba", "hex": "#2bcbba",
"title": "Teal" "title": "Teal"
}, },
"cyan": { {
"class": "cyan", "class": "cyan",
"hex": "#17a2b8", "hex": "#17a2b8",
"title": "Cyan" "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: { skinColors: {
"rose": { "rose": {
"hex": "#FFCB9D", "hex": "#FFCB9D",

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

@@ -105,51 +105,51 @@
], ],
"light": [ "light": [
{ {
"name": "blue-lt", "name": "blue-lightest",
"value": "#e9f0f9" "value": "#e9f0f9"
}, },
{ {
"name": "azure-lt", "name": "azure-lightest",
"value": "#ecf5fc" "value": "#ecf5fc"
}, },
{ {
"name": "indigo-lt", "name": "indigo-lightest",
"value": "#eceffd" "value": "#eceffd"
}, },
{ {
"name": "purple-lt", "name": "purple-lightest",
"value": "#f7ecfa" "value": "#f7ecfa"
}, },
{ {
"name": "pink-lt", "name": "pink-lightest",
"value": "#fbebf0" "value": "#fbebf0"
}, },
{ {
"name": "red-lt", "name": "red-lightest",
"value": "#fbebeb" "value": "#fbebeb"
}, },
{ {
"name": "orange-lt", "name": "orange-lightest",
"value": "#fef0e6" "value": "#fef0e6"
}, },
{ {
"name": "yellow-lt", "name": "yellow-lightest",
"value": "#fef5e6" "value": "#fef5e6"
}, },
{ {
"name": "lime-lt", "name": "lime-lightest",
"value": "#f1f8e8" "value": "#f1f8e8"
}, },
{ {
"name": "green-lt", "name": "green-lightest",
"value": "#eaf7ec" "value": "#eaf7ec"
}, },
{ {
"name": "teal-lt", "name": "teal-lightest",
"value": "#e7f6f2" "value": "#e7f6f2"
}, },
{ {
"name": "cyan-lt", "name": "cyan-lightest",
"value": "#e8f6f8" "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> <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="text-secondary">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
<p class="mb-3"> <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> </p>
<div> <div>
{% include "ui/avatar-list.html" stacked=true offset=include.avatar-offset limit=include.avatar-limit %} {% 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 %} {% assign mod = forloop.index | modulo: 2 %}
{% if mod == 0 %} {% if mod == 0 %}
<span class="badge badge-secondary-lt">New</span> <span class="badge badge-secondary-lightest">New</span>
{% endif %} {% endif %}
</td> </td>
<td class="text-end text-secondary d-none d-md-table-cell text-nowrap">{{ forloop.index | random_number: 4, 100 }} reviews</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> <tr>
<td> <td>
<div class="progressbg"> <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 class="progressbg-text">{{ url.uri }}</div>
</div> </div>
</td> </td>

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

@@ -1,6 +1,6 @@
<ul class="timeline{% if include.simple %} timeline-simple{% endif %}"> <ul class="timeline{% if include.simple %} timeline-simple{% endif %}">
<li class="timeline-event"> <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 timeline-event-card">
<div class="card-body"> <div class="card-body">
<div class="text-secondary float-end">10 hrs ago</div> <div class="text-secondary float-end">10 hrs ago</div>
@@ -30,7 +30,7 @@
</div> </div>
</li> </li>
<li class="timeline-event"> <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 timeline-event-card">
<div class="card-body"> <div class="card-body">
<div class="text-secondary float-end">1 day ago</div> <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 %} {% for color in colors %}
<div class="row g-2 mb-3 align-items-center"> <div class="row g-2 mb-3 align-items-center">
<div class="col-auto"> <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>
<div class="col"> <div class="col">
<span class="font-weight-semibold">{{ color[1].title }}</span><br/> <span class="font-weight-semibold">{{ color.title }}</span><br/>
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code> <code>bg-{{ color.class }}{% if light %}-lt{% endif %}</code>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}

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

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

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

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

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

@@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}, },
{% else %} {% 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 %} {% endif %}
series: [ series: [
{% for i in site.monthsShort limit: 12 %} {% 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 %} {% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
swatches: [ swatches: [
{% for color in site.colors %} {% for color in site.colors %}
"{{ color[1].hex }}", "{{ color.hex }}",
{% endfor %} {% endfor %}
], ],
})) }))

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

@@ -41,7 +41,7 @@
{% elsif include.indicator == 'label' %} {% elsif include.indicator == 'label' %}
{% capture indicator-html %} {% capture indicator-html %}
{% assign label = option[1].label %} {% assign label = option[1].label %}
<span class="badge bg-primary-lt">{{ label }}</span> <span class="badge bg-primary-lightest">{{ label }}</span>
{% endcapture %} {% endcapture %}
{% endif %} {% 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> <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 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" %} %} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
<div class="row row-cards"> <div class="row row-cards">
@@ -105,7 +105,7 @@ permalink: badges.html
<h3 class="card-title">Light badges</h3> <h3 class="card-title">Light badges</h3>
<div class="badges-list"> <div class="badges-list">
{% for color in colors %} {% 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 %} {% endfor %}
</div> </div>
</div> </div>

2
preview/pages/cards.html
View File

@@ -100,7 +100,7 @@ permalink: cards.html
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3"> <div class="col-md-6 col-lg-3">
<div class="card bg-primary-lt"> <div class="card bg-primary-lightest">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Card with primary light background</h3> <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> <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"> <div class="row g-3">
{% for color in site.colors %} {% for color in site.colors %}
<div class="col-2"> <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> </div>
{% endfor %} {% endfor %}
</div> </div>

65
preview/pages/colors.html
View File

@@ -8,11 +8,70 @@ permalink: colors.html
{% assign colors = '' | split: '' %} {% assign colors = '' | split: '' %}
{% for color in site.colors %} {% for color in site.colors %}
{% assign colors = colors | push: color[0] %} {% assign colors = colors | push: color.class %}
{% endfor %} {% endfor %}
{% assign colors = colors | push: 'dark' %} {% assign colors = colors | push: 'dark' %}
<div class="row row-cards"> <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="col-12">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
@@ -29,7 +88,7 @@ permalink: colors.html
<tr> <tr>
{% for color in colors %} {% for color in colors %}
<td> <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> </td>
{% endfor %} {% endfor %}
</tr> </tr>
@@ -61,7 +120,7 @@ permalink: colors.html
{% for color in colors %} {% for color in colors %}
<td> <td>
{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %} {% 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> <div class="mt-2" data-demo-color-contrast></div>
</td> </td>
{% endfor %} {% endfor %}

12
preview/pages/illustrations.html
View File

@@ -48,8 +48,8 @@ permalink: illustrations.html
{% for color in site.colors %} {% for color in site.colors %}
<div class="col-auto"> <div class="col-auto">
<label class="form-colorinput"> <label class="form-colorinput">
<input name="color" type="radio" value="{{ color[1].hex }}" class="form-colorinput-input js-select-color" /> <input name="color" type="radio" value="{{ color.hex }}" class="form-colorinput-input js-select-color" />
<span class="form-colorinput-color bg-{{ color[1].class }}"></span> <span class="form-colorinput-color bg-{{ color.class }}"></span>
</label> </label>
</div> </div>
{% endfor %} {% endfor %}
@@ -60,8 +60,8 @@ permalink: illustrations.html
{% for color in site.skinColors %} {% for color in site.skinColors %}
<div class="col-auto"> <div class="col-auto">
<label class="form-colorinput"> <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 %} /> <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[1].hex }}"></span> <span class="form-colorinput-color" style="background-color: {{ color.hex }}"></span>
</label> </label>
</div> </div>
{% endfor %} {% endfor %}
@@ -142,8 +142,8 @@ permalink: illustrations.html
{% capture_script %} {% capture_script %}
<script> <script>
let skinColor = "{{ skin_color[1].hex }}", let skinColor = "{{ skin_color.hex }}",
primaryColor = "{{ color[1].hex }}"; primaryColor = "{{ color.hex }}";
const illustrations = { const illustrations = {
{% for illustration in free-illustrations.autodark %} {% 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> <h3 class="card-title">Tags with status</h3>
<div class="tags-list"> <div class="tags-list">
{% for color in site.colors %} {% for color in site.colors %}
{% capture status %}{{ color[1].class }}{% endcapture %} {% capture status %}{{ color.class }}{% endcapture %}
{% capture text %}{{ color[1].title }}{% endcapture %} {% capture text %}{{ color.title }}{% endcapture %}
{% include "ui/tag.html" text=text status=status %} {% include "ui/tag.html" text=text status=status %}
{% endfor %} {% endfor %}
</div> </div>
@@ -83,8 +83,8 @@ permalink: tags.html
<h3 class="card-title">Tags with legend</h3> <h3 class="card-title">Tags with legend</h3>
<div class="tags-list"> <div class="tags-list">
{% for color in site.colors %} {% for color in site.colors %}
{% capture status %}{{ color[1].class }}{% endcapture %} {% capture status %}{{ color.class }}{% endcapture %}
{% capture text %}{{ color[1].title }}{% endcapture %} {% capture text %}{{ color.title }}{% endcapture %}
{% include "ui/tag.html" text=text legend=status %} {% include "ui/tag.html" text=text legend=status %}
{% endfor %} {% endfor %}
</div> </div>

4
preview/pages/users.html
View File

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