Repository: dialpad/dialtone
Pull request #659: docs: DLT-2391 color utilities documentation
Author: login: juliodialpad
Labels: name: no-visual-test
description: Add this tag when the PR does not need visual testing
Created: 2025-03-03T19:09:32Z | Merged: 2025-03-06T16:53:03Z

# Update color utilities documentation

## Obligatory GIF (super important!)

![Obligatory GIF](https://media.giphy.com/media/10Z4A8itvEBhFm/giphy.gif?cid=790b7611rbl4j2yua7hcs0uiakqbcdjh4hhe89bzy3ds69bx&ep=v1_gifs_search&rid=giphy.gif&ct=g)

## :hammer_and_wrench: Type Of Change

These types will not increment the version number, but will still deploy to documentation site on release:

- [x] Documentation

## :book: Jira Ticket

https://dialpad.atlassian.net/browse/DLT-2391

## :book: Description

- Updated color utilities documentation

## :bulb: Context

- I'm looking into undocumented utility classes incrementally, will be making the updates when needed.

## :pencil: Checklist

For all PRs:

- [x] I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
- [x] I have reviewed my changes.
- [x] I have added all relevant documentation.
- [ ] I have considered the performance impact of my change.


Diff:
diff --git a/apps/dialtone-documentation/docs/.vuepress/baseComponents/NewUtilityClassTable.vue b/apps/dialtone-documentation/docs/.vuepress/baseComponents/NewUtilityClassTable.vue
index 8fc9dbdfdf..398fc09ab9 100644
--- a/apps/dialtone-documentation/docs/.vuepress/baseComponents/NewUtilityClassTable.vue
+++ b/apps/dialtone-documentation/docs/.vuepress/baseComponents/NewUtilityClassTable.vue
@@ -18,7 +18,7 @@
         >
           <th
             scope="row"
-            class="d-code--sm d-fc-purple-400"
+            class="d-code--sm d-docsite-code"
             v-text="className"
           />
           <td
diff --git a/apps/dialtone-documentation/docs/utilities/backgrounds/color.md b/apps/dialtone-documentation/docs/utilities/backgrounds/color.md
index 674eec6afb..0b72e1bccb 100644
--- a/apps/dialtone-documentation/docs/utilities/backgrounds/color.md
+++ b/apps/dialtone-documentation/docs/utilities/backgrounds/color.md
@@ -1,6 +1,6 @@
 ---
-title: Background Colors
-description: Utilities for setting background colors.
+title: Background Color
+description: Utilities for setting the background color.
 ---
 
 <aside class="d-notice d-notice--warning d-mt24 d-wmx100p" role="status" aria-hidden="false">
@@ -92,191 +92,28 @@ Use `fv:d-bgc-{color}` to change an element's `:focus-visible` state background
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-primary</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-primary d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-secondary</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-black-100-h) var(--dt-color-black-100-s) var(--dt-color-black-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-secondary d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-moderate</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-black-200-h) var(--dt-color-black-200-s) var(--dt-color-black-200-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-moderate d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-bold</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        border-color: hsla(var(--dt-color-black-200-h) var(--dt-color-black-200-s) var(--dt-color-black-200-l) / var(--bco)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-bold d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-strong</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        border-color: hsla(var(--dt-color-black-200-h) var(--dt-color-black-200-s) var(--dt-color-black-200-l) / var(--bco)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-strong d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-contrast</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-black-800-h) var(--dt-color-black-800-s) var(--dt-color-black-800-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-contrast d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-critical</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-red-100-h) var(--dt-color-red-100-s) var(--dt-color-red-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-critical d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-success</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-green-100-h) var(--dt-color-green-100-s) var(--dt-color-green-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-success d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-warning</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-gold-100-h) var(--dt-color-gold-100-s) var(--dt-color-gold-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-warning d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-info</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-blue-100-h) var(--dt-color-blue-100-s) var(--dt-color-blue-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-info d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-      </tbody>
-      <tbody>
-          <tr>
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-transparent</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          background-color: transparent !important;
-                      </div>
-                      <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-transparent d-ba d-bc-black-100"></div>
-                  </div>
-              </td>
-          </tr>
-          <tr>
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-unset</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          background-color: unset !important;
-                      </div>
-                      <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-unset d-ba d-bc-black-100"></div>
-                  </div>
-              </td>
-          </tr>
-          <tr>
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-neutral-white</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          --bgo: 100%;<br/>
-                          background-color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--bgo)) !important;
-                      </div>
-                      <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-neutral-white d-ba d-bc-black-100"></div>
-                  </div>
-              </td>
-          </tr>
-      </tbody>
-      <tbody v-for="{ color, stops } in baseColors">
-        <tr v-for="{ stop } in stops">
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-{{ color }}-{{ stop }}</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--{{ color }}-{{ stop }}-h) var(--{{ color }}-{{ stop }}-s) var(--{{ color }}-{{ stop }}-l) / var(--bgo)) !important;
-                    </div>
-                    <div
-                      class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-ba d-bc-black-100"
-                      :class="`d-bgc-${color}-${stop}`"
-                    />
-                </div>
-            </td>
-        </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="backgroundColors">
+  <template #example="{ className }">
+    <div
+      class="d-fl-shrink0 d-h42 d-w42 d-bar-circle d-ba d-bc-moderate"
+      :class="className"
+    />
+  </template>
+</new-utility-class-table>
 
 <script setup>
-  import { base } from '@data/colors.json';
-  const baseColors = base.lightMode;
+  import { inject } from 'vue';
+  import { extractUtilityClasses } from '@utilities';
+
+  /*Excluded classes that have incorrect naming, should be renamed to `d-bgclip` to avoid conflicts*/
+  const excludedClasses = ['d-bgc-border-box', 'd-bgc-content-box', 'd-bgc-padding-box', 'd-bgc-text'];
+
+  const utilityClassDocs = inject('utilityClassDocs');
+  const colors = extractUtilityClasses(utilityClassDocs, 'd-bgc-');
+  const backgroundColors = Object.keys(colors)
+    .filter(className => !excludedClasses.includes(className))
+    .reduce((obj, key) => {
+      obj[key] = colors[key];
+      return obj;
+    }, {});
 </script>
diff --git a/apps/dialtone-documentation/docs/utilities/borders/color.md b/apps/dialtone-documentation/docs/utilities/borders/color.md
index e3335638c8..7b6b664f04 100644
--- a/apps/dialtone-documentation/docs/utilities/borders/color.md
+++ b/apps/dialtone-documentation/docs/utilities/borders/color.md
@@ -98,73 +98,21 @@ Use `fv:d-bc-{color}` to change an element's border color when in `:focus-visibl
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody>
-          <tr v-for="c in special">
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bc-{{c}}</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                        <span v-if="c === 'white'">
-                            --bco: 100%;<br/>
-                            border-color: hsla(var(--{{ c }}-h) var(--{{ c }}-s) var(--{{ c }}-l) / var(--bco)) !important;
-                        </span>
-                        <span v-else>border-color: {{c}} !important;</span>
-                      </div>
-                      <div
-                        :class="['d-d-inline-flex', {'d-bgc-contrast': c.includes('white')}]"
-                      >
-                        <div
-                            :class="`d-fl-shrink0 d-m4 d-h42 d-w42 d-bar4 d-bc-${c} d-ba d-baw2`"
-                        />
-                      </div>
-                  </div>
-              </td>
-          </tr>
-      </tbody>
-      <tbody>
-          <tr v-for="c in borders">
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bc-{{c}}</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                        <span>border-color: var(--bc-{{c}})</span>
-                      </div>
-                      <div
-                        :class="['d-d-inline-flex', {'d-bgc-contrast': c.includes('inverted')}]"
-                      >
-                        <div
-                            :class="`d-fl-shrink0 d-m4 d-h42 d-w42 d-bar4 d-bc-${c} d-ba d-baw2`"
-                        />
-                      </div>
-                  </div>
-              </td>
-          </tr>
-      </tbody>
-      <tbody v-for="{color: c, stops} in base">
-          <tr v-for="{ stop, copy } in stops">
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bc-{{ c }}-{{ stop }}</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          --bco: 100%;<br/>
-                          border-color: hsla(var(--{{ c }}-{{ stop }}-h) var(--{{ c }}-{{ stop }}-s) var(--{{ c }}-{{ stop }}-l) / var(--bco)) !important;
-                      </div>
-                      <div
-                        class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar4 d-ba d-baw2"
-                        :class="`d-bc-${c}-${stop}`"
-                      >
-                      </div>
-                  </div>
-              </td>
-          </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="borderColors">
+  <template #example="{ className }">
+    <div :class="['d-d-inline-flex', {'d-bgc-contrast': className.endsWith('inverted')}]" >
+      <div
+        class="d-fl-shrink0 d-m4 d-h42 d-w42 d-bar4 d-ba d-baw2"
+        :class="className"
+      />
+    </div>
+  </template>
+</new-utility-class-table>
 
 <script setup>
-import {base, special, borders} from '@data/colors.json';
+  import { inject } from 'vue';
+  import { extractUtilityClasses } from '@utilities';
+
+  const utilityClassDocs = inject('utilityClassDocs');
+  const borderColors = extractUtilityClasses(utilityClassDocs, 'd-bc-');
 </script>
diff --git a/apps/dialtone-documentation/docs/utilities/borders/divide-color.md b/apps/dialtone-documentation/docs/utilities/borders/divide-color.md
index 3c2ef56fd7..f2d12338a4 100644
--- a/apps/dialtone-documentation/docs/utilities/borders/divide-color.md
+++ b/apps/dialtone-documentation/docs/utilities/borders/divide-color.md
@@ -65,34 +65,25 @@ Use `d-dco{n}` to change a divider opacity value.
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody v-for="{ color: c, stops } in baseColors">
-        <tr v-for="{ stop, copy } in stops">
-          <th scope="row" class="d-code--sm d-docsite-code">.d-divide-{{ c }}-{{ stop }}</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl-grow1 d-code--sm">
-                --dco: 100%;<br/>
-                border-color: hsla(var(--{{ c }}-{{ stop }}-h) var(--{{ c }}-{{ stop }}-s) var(--{{ c }}-{{ stop }}-l) / var(--dco)) !important;
-              </div>
-              <div class="d-fl-shrink0 d-fl-center d-m4 d-ml16 d-h64 d-w64">
-                <div
-                  class="d-w100p d-h0 d-bt d-btw2"
-                  :class="`d-bc-${c}-${stop}`"
-                >
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="divideColors">
+  <template #example="{ className }">
+    <div
+      class="d-d-flex d-fl-shrink0 d-w42 d-h42 d-w24 d-ta-center"
+      :class="[
+        className.startsWith('d-divide-x') ? 'd-divide-x d-fl-col2' : 'd-divide-y d-fd-column',
+        className
+      ]"
+    >
+      <div class="d-fl-center">1</div>
+      <div class="d-fl-center">2</div>
+    </div>
+  </template>
+</new-utility-class-table>
 
 <script setup>
-  import { base } from '@data/colors.json';
-  const baseColors = base.lightMode;
+  import { inject } from 'vue';
+  import { extractUtilityClasses } from '@utilities';
+
+  const utilityClassDocs = inject('utilityClassDocs');
+  const divideColors = extractUtilityClasses(utilityClassDocs, 'd-divide-');
 </script>
diff --git a/apps/dialtone-documentation/docs/utilities/typography/font-color.md b/apps/dialtone-documentation/docs/utilities/typography/font-color.md
index 577c9d038e..ace665585c 100644
--- a/apps/dialtone-documentation/docs/utilities/typography/font-color.md
+++ b/apps/dialtone-documentation/docs/utilities/typography/font-color.md
@@ -1,5 +1,5 @@
 ---
-title: Font Colors
+title: Font Color
 description: Utilities to change an element's font-color.
 ---
 
@@ -109,89 +109,25 @@ Use `d:d-fc-{color}` to set a different text color when the user prefers dark mo
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody>
-        <!-- Current Color -->
-        <tr>
-          <th scope="row" class="d-code--sm d-docsite-code">.d-fc-current</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl1 d-code--sm">
-                color: currentColor !important;
-              </div>
-              <div class="d-fl0 d-fc-current d-fs-300 d-lh4">
-                Aa
-              </div>
-            </div>
-          </td>
-        </tr>
-        <!-- Transparent -->
-        <tr>
-          <th scope="row" class="d-code--sm d-docsite-code">.d-fc-transparent</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl1 d-code--sm">
-                color: transparent !important;
-              </div>
-              <div class="d-fl0 d-fc-transparent d-fs-300 d-lh4">
-                Aa
-              </div>
-            </div>
-          </td>
-        </tr>
-        <!-- Unset Color -->
-        <tr>
-          <th scope="row" class="d-code--sm d-docsite-code">.d-fc-unset</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl1 d-code--sm">
-                color: unset !important;
-              </div>
-              <div class="d-fl0 d-fc-unset d-fs-300 d-lh4">
-                Aa
-              </div>
-            </div>
-          </td>
-        </tr>
-        <!-- Semantic Colors -->
-        <tr v-for="{ var: color, output } in fontColorVars">
-          <th scope="row" class="d-code--sm d-docsite-code">.d-fc-{{ color }}</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl1 d-code--sm">
-                --fco: 100%;<br/>
-                color: hsla(var(--{{ output }}-h) var(--{{ output }}-s) var(--{{ output }}-l) / var(--fco)) !important;
-              </div>
-              <div class="d-fl0 d-ml16 d-p4 d-fs-300 d-lh4" :class="`d-fc-${color}`">
-                Aa
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-      <tbody v-for="{ color, stops } in baseColors.lightMode">
-        <tr v-for="{ stop } in stops">
-          <th scope="row" class="d-code--sm d-docsite-code">.d-fc-{{ color }}-{{ stop }}</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl1 d-code--sm">
-                  --fco: 100%;<br/>
-                  color: hsla(var(--{{ color }}-{{ stop }}-h) var(--{{ color }}-{{ stop }}-s) var(--{{ color }}-{{ stop }}-l) / var(--fco)) !important;
-              </div>
-              <div class="d-fl0 d-ml16 d-p4 d-fs-300 d-lh4" :class="`d-fc-${color}-${stop}`">
-                  Aa
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="colors">
+  <template #example="{ className }">
+    <div
+      class="d-fl-shrink0 d-h42 d-w42 d-bar-circle d-ba d-bc-moderate d-d-flex d-ai-center d-jc-center"
+      :class="[
+        {'d-bgc-primary': !className.endsWith('inverted')},
+        {'d-bgc-contrast': className.endsWith('inverted')},
+        className
+      ]"
+    >
+      <span>Aa</span>
+    </div>
+  </template>
+</new-utility-class-table>
 
 <script setup>
-  import { fontColorVars } from '@data/type.json';
-  import { base as baseColors } from '@data/colors.json';
+  import { inject } from 'vue';
+  import { extractUtilityClasses } from '@utilities';
+
+  const utilityClassDocs = inject('utilityClassDocs');
+  const colors = extractUtilityClasses(utilityClassDocs, 'd-fc-');
 </script>
diff --git a/packages/dialtone-css/lib/build/less/utilities/backgrounds.less b/packages/dialtone-css/lib/build/less/utilities/backgrounds.less
index bafffbe410..18213110e9 100644
--- a/packages/dialtone-css/lib/build/less/utilities/backgrounds.less
+++ b/packages/dialtone-css/lib/build/less/utilities/backgrounds.less
@@ -137,3 +137,11 @@
 .d-bgg-pattern-slanted-stripes-light { --bgg-pattern: var(--bgg-pattern-slanted-stripes-light) !important; }
 .d-bgg-pattern-steps-light { --bgg-pattern: var(--bgg-pattern-steps-light) !important; }
 .d-bgg-pattern-stripe-light { --bgg-pattern: var(--bgg-pattern-stripe-light) !important; }
+
+//  ============================================================================
+//  $ Background linear gradient
+//  ----------------------------------------------------------------------------
+
+.d-bgc-ai {
+    background-image: var(--dt-color-surface-ai) !important;
+}
diff --git a/packages/dialtone-css/lib/build/less/utilities/borders.less b/packages/dialtone-css/lib/build/less/utilities/borders.less
index 6ef0fb1375..93bed056ba 100644
--- a/packages/dialtone-css/lib/build/less/utilities/borders.less
+++ b/packages/dialtone-css/lib/build/less/utilities/borders.less
@@ -236,3 +236,7 @@
 .d-bc-ai {
   border-image: var(--dt-color-border-ai) 1 !important;
 }
+
+.d-divide-ai > * + * {
+  border-image: var(--dt-color-border-ai) 1 !important;
+}
diff --git a/packages/dialtone-css/postcss/dialtone-generators.cjs b/packages/dialtone-css/postcss/dialtone-generators.cjs
index 26b05ab94d..cb7fa935d8 100644
--- a/packages/dialtone-css/postcss/dialtone-generators.cjs
+++ b/packages/dialtone-css/postcss/dialtone-generators.cjs
@@ -143,29 +143,29 @@ function colorUtilities (clonedSource, declaration) {
     generatedRules.backgroundColor.push(new Rule({
       source: clonedSource,
       selector: appendHoverFocusSelectors(`.d-bgc-${colorName}`),
-      nodes: _generateColorNodes(token, 'background', '--bgo'),
+      nodes: _generateColorNodes(token, 'background-color', '--bgo'),
     }));
   }
   function _generateBorderColors (token, colorName) {
-    // Exclude ai gradient border color
-    if (token === '--dt-color-border-ai') return;
-
     generatedRules.borderColor.push(new Rule({
       source: clonedSource,
       selector: appendHoverFocusSelectors(`.d-bc-${colorName}`),
       nodes: _generateColorNodes(token, 'border-color', '--bco'),
     }));
   }
-
-  baseColors.forEach(({ token, colorName }) => {
-    _generateForegroundColors(token, colorName);
-    _generateBorderColors(token, colorName);
-    _generateSurfaceColors(token, colorName);
+  function _generateDividerColors (token, colorName) {
     generatedRules.dividerColor.push(new Rule({
       source: clonedSource,
       selector: `.d-divide-${colorName} > * + *`,
       nodes: _generateColorNodes(token, 'border-color', '--dco'),
     }));
+  }
+
+  baseColors.forEach(({ token, colorName }) => {
+    _generateForegroundColors(token, colorName);
+    _generateBorderColors(token, colorName);
+    _generateSurfaceColors(token, colorName);
+    _generateDividerColors(token, colorName);
     generatedRules.backgroundGradientFromColor.push(new Rule({
       source: clonedSource,
       selector: appendHoverFocusSelectors(`.d-bgg-from-${colorName}`),
@@ -189,10 +189,17 @@ function colorUtilities (clonedSource, declaration) {
     _generateForegroundColors(token, colorName);
   });
   surfaceColors.forEach(({ token, colorName }) => {
+    // Exclude as it is a gradient color and it is being generated manually
+    if (token === '--dt-color-surface-ai') return;
+
     _generateSurfaceColors(token, colorName);
   });
   borderColors.forEach(({ token, colorName }) => {
+    // Exclude as it is a gradient color and it is being generated manually
+    if (token === '--dt-color-border-ai') return;
+
     _generateBorderColors(token, colorName);
+    _generateDividerColors(token, colorName);
   });
 }
 


Reviews:
user: login: francisrupert
body: In one my previous updates I changed the inline code color to be blue, lazily through `d-docsite-code`.
```html
<th scope="row" class="d-code--sm d-docsite-code">.d-bgc-primary</th>
```
Some other tiny things below:
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-03T20:30:19Z
user: login: juliodialpad
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-04T19:21:47Z
user: login: francisrupert
body: Looks good. I went through and confirmed additions and updates.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T16:47:42Z

Review comments:
diff_hunk: @@ -65,34 +65,25 @@ Use `d-dco{n}` to change a divider opacity value.
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody v-for="{ color: c, stops } in baseColors">
-        <tr v-for="{ stop, copy } in stops">
-          <th scope="row" class="d-code--sm d-docsite-code">.d-divide-{{ c }}-{{ stop }}</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl-grow1 d-code--sm">
-                --dco: 100%;<br/>
-                border-color: hsla(var(--{{ c }}-{{ stop }}-h) var(--{{ c }}-{{ stop }}-s) var(--{{ c }}-{{ stop }}-l) / var(--dco)) !important;
-              </div>
-              <div class="d-fl-shrink0 d-fl-center d-m4 d-ml16 d-h64 d-w64">
-                <div
-                  class="d-w100p d-h0 d-bt d-btw2"
-                  :class="`d-bc-${c}-${stop}`"
-                >
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="divideColors">
+  <template #example="{ className }">
+    <div
+      class="d-d-flex d-fl-shrink0 d-w42 d-h42 d-w24 d-ta-center"
+      :class="[
+        className.startsWith('d-divide-x') ? 'd-divide-x d-fl-col2' : 'd-divide-y d-fd-column',
+        className
+      ]"
+    >
+      <div class="d-fl-center">1</div>
+      <div class="d-fl-center">2</div>
+    </div>
+  </template>
+</new-utility-class-table>
path: apps/dialtone-documentation/docs/utilities/borders/divide-color.md
user: login: francisrupert
body: I don't know how much it's used in product, but the border divide color should have all the same border colors.
created_at: 2025-03-03T20:20:46Z
author_association: CONTRIBUTOR
diff_hunk: @@ -92,191 +92,28 @@ Use `fv:d-bgc-{color}` to change an element's `:focus-visible` state background
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-primary</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-primary d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-secondary</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-black-100-h) var(--dt-color-black-100-s) var(--dt-color-black-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-secondary d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-moderate</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-black-200-h) var(--dt-color-black-200-s) var(--dt-color-black-200-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-moderate d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-bold</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        border-color: hsla(var(--dt-color-black-200-h) var(--dt-color-black-200-s) var(--dt-color-black-200-l) / var(--bco)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-bold d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-strong</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        border-color: hsla(var(--dt-color-black-200-h) var(--dt-color-black-200-s) var(--dt-color-black-200-l) / var(--bco)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-strong d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-contrast</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-black-800-h) var(--dt-color-black-800-s) var(--dt-color-black-800-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-contrast d-ba d-bc-black-200"></div>
-                </div>
-            </td>
-        </tr>
-      </tbody>
-      <tbody>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-critical</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-red-100-h) var(--dt-color-red-100-s) var(--dt-color-red-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-critical d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-success</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-green-100-h) var(--dt-color-green-100-s) var(--dt-color-green-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-success d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-warning</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-gold-100-h) var(--dt-color-gold-100-s) var(--dt-color-gold-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-warning d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-info</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--dt-color-blue-100-h) var(--dt-color-blue-100-s) var(--dt-color-blue-100-l) / var(--bgo)) !important;
-                    </div>
-                    <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-info d-ba d-bc-black-100"></div>
-                </div>
-            </td>
-        </tr>
-      </tbody>
-      <tbody>
-          <tr>
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-transparent</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          background-color: transparent !important;
-                      </div>
-                      <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-transparent d-ba d-bc-black-100"></div>
-                  </div>
-              </td>
-          </tr>
-          <tr>
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-unset</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          background-color: unset !important;
-                      </div>
-                      <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-unset d-ba d-bc-black-100"></div>
-                  </div>
-              </td>
-          </tr>
-          <tr>
-              <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-neutral-white</th>
-              <td>
-                  <div class="d-d-flex d-jc-space-between d-ai-center">
-                      <div class="d-fl-grow1 d-code--sm">
-                          --bgo: 100%;<br/>
-                          background-color: hsla(var(--dt-color-neutral-white-h) var(--dt-color-neutral-white-s) var(--dt-color-neutral-white-l) / var(--bgo)) !important;
-                      </div>
-                      <div class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-bgc-neutral-white d-ba d-bc-black-100"></div>
-                  </div>
-              </td>
-          </tr>
-      </tbody>
-      <tbody v-for="{ color, stops } in baseColors">
-        <tr v-for="{ stop } in stops">
-            <th scope="row" class="d-code--sm d-docsite-code">.d-bgc-{{ color }}-{{ stop }}</th>
-            <td>
-                <div class="d-d-flex d-jc-space-between d-ai-center">
-                    <div class="d-fl-grow1 d-code--sm">
-                        --bgo: 100%;<br/>
-                        background-color: hsla(var(--{{ color }}-{{ stop }}-h) var(--{{ color }}-{{ stop }}-s) var(--{{ color }}-{{ stop }}-l) / var(--bgo)) !important;
-                    </div>
-                    <div
-                      class="d-fl-shrink0 d-m4 d-ml16 d-h42 d-w42 d-bar-circle d-ba d-bc-black-100"
-                      :class="`d-bgc-${color}-${stop}`"
-                    />
-                </div>
-            </td>
-        </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="backgroundColors">
+  <template #example="{ className }">
+    <div
+      class="d-fl-shrink0 d-h42 d-w42 d-bar-circle d-ba d-bc-black-200"
path: apps/dialtone-documentation/docs/utilities/backgrounds/color.md
user: login: francisrupert
body: ```suggestion
      class="d-fl-shrink0 d-h42 d-w42 d-bar-circle d-ba d-bc-moderate"
```
created_at: 2025-03-03T20:23:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -65,34 +65,25 @@ Use `d-dco{n}` to change a divider opacity value.
 
 ## Classes
 
-<div class="d-h464 d-of-y-scroll d-bb d-bc-black-200">
-  <utility-class-table>
-    <template #content>
-      <tbody v-for="{ color: c, stops } in baseColors">
-        <tr v-for="{ stop, copy } in stops">
-          <th scope="row" class="d-code--sm d-docsite-code">.d-divide-{{ c }}-{{ stop }}</th>
-          <td>
-            <div class="d-d-flex d-jc-space-between d-ai-center">
-              <div class="d-fl-grow1 d-code--sm">
-                --dco: 100%;<br/>
-                border-color: hsla(var(--{{ c }}-{{ stop }}-h) var(--{{ c }}-{{ stop }}-s) var(--{{ c }}-{{ stop }}-l) / var(--dco)) !important;
-              </div>
-              <div class="d-fl-shrink0 d-fl-center d-m4 d-ml16 d-h64 d-w64">
-                <div
-                  class="d-w100p d-h0 d-bt d-btw2"
-                  :class="`d-bc-${c}-${stop}`"
-                >
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </template>
-  </utility-class-table>
-</div>
+<new-utility-class-table :classes="divideColors">
+  <template #example="{ className }">
+    <div
+      class="d-d-flex d-fl-shrink0 d-w42 d-h42 d-w24 d-ta-center"
+      :class="[
+        className.startsWith('d-divide-x') ? 'd-divide-x d-fl-col2' : 'd-divide-y d-fd-column',
+        className
+      ]"
+    >
+      <div class="d-fl-center">1</div>
+      <div class="d-fl-center">2</div>
+    </div>
+  </template>
+</new-utility-class-table>
path: apps/dialtone-documentation/docs/utilities/borders/divide-color.md
user: login: juliodialpad
body: Added missing colors
created_at: 2025-03-04T19:21:47Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-03T19:10:03Z
body: <!-- add-pr-comment:missing-visual-test-label -->

Please add either the `visual-test-ready` or `no-visual-test` label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️
author_association: CONTRIBUTOR
user: login: francisrupert
created_at: 2025-03-04T23:08:23Z
body: @juliodialpad, 

These were changed from `background-color` to `background`. The `bgc` css utility needs to be specific to `background-color` since `background` is a shorthand.
<img width="923" alt="image" src="https://github.com/user-attachments/assets/2eb5916d-2908-4438-997b-2a38ca2c16a7" />
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-04T23:59:00Z
body: <!-- add-pr-comment:deploy-preview-message -->

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-659/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-659/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-659/
author_association: CONTRIBUTOR
user: login: juliodialpad
created_at: 2025-03-05T00:00:42Z
body: > @juliodialpad,
> 
> These were changed from `background-color` to `background`. The `bgc` css utility needs to be specific to `background-color` since `background` is a shorthand. <img alt="image" width="923" src="https://private-user-images.githubusercontent.com/1165933/419223780-2eb5916d-2908-4438-997b-2a38ca2c16a7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDExMzMwMjUsIm5iZiI6MTc0MTEzMjcyNSwicGF0aCI6Ii8xMTY1OTMzLzQxOTIyMzc4MC0yZWI1OTE2ZC0yOTA4LTQ0MzgtOTk3Yi0yYTM4Y2EyYzE2YTcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDMwNCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAzMDRUMjM1ODQ1WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ODM0YmZjOWQxZDFiMWYzN2VjYzhlMTk0NmNmZDc0MmE2Yjk3NzZmZDVmMzM3MjVjZTQ3MGFhMzUyMjQ3MDMzMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.FbpcjmStcFc-eKbnedgQSVXrNDEQ6wK3xStMI6ksYwI">

Did that due to linear-gradient not working with `background-color` but you're right moved all those util classes to `background-color` and generated manually `d-bgc-ai` with `background-image` with works correctly with linear-gradients
author_association: CONTRIBUTOR