Update color references and enhance badge styles for consistency

core/docs/ui/base/colors.mdx

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

core/docs/ui/components/avatars.mdx

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

core/docs/ui/components/badges.mdx

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

core/docs/ui/components/progress.mdx

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

core/docs/ui/components/timelines.mdx

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

core/docs/ui/utilities/margins.mdx

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

core/scss/_props.scss

@@ -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 */

core/scss/_variables.scss

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

core/scss/layout/_root.scss

@@ -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);

core/scss/mixins/_functions.scss

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

core/scss/utils/_colors.scss

@@ -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;

preview/eleventy.config.mjs

@@ -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",

preview/pages/_data/colors.json

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

preview/pages/_includes/cards/project-summary.html

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

preview/pages/_includes/cards/store-list.html

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

preview/pages/_includes/cards/tables/progressbg.html

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

preview/pages/_includes/cards/timeline.html

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

preview/pages/_includes/example/colors-table.html

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

preview/pages/_includes/parts/form/input-color.html

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

preview/pages/_includes/settings.html

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

preview/pages/_includes/ui/chart-heatmap.html

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

preview/pages/_includes/ui/colorpicker.html

@@ -19,7 +19,7 @@
 			{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
 			swatches: [
 				{% for color in site.colors %}
-				"{{ color[1].hex }}",
+				"{{ color.hex }}",
 				{% endfor %}
 			],
 		}))

preview/pages/_includes/ui/select.html

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

preview/pages/badges.html

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

preview/pages/cards.html

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

preview/pages/colorpicker.html

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

preview/pages/colors.html

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

preview/pages/illustrations.html

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

preview/pages/tags.html

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

preview/pages/users.html

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