docs: Add AI color tokens (#4104)

* Update color-tokens.js * Update ColorTokenTable.js * Update color-tokens.js --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 13, 2024 · 510bf0d · 510bf0d
1 parent beed1d2
commit 510bf0d
Show file tree

Hide file tree

Showing 2 changed files with 792 additions and 0 deletions.
diff --git a/src/components/ColorTokenTable/ColorTokenTable.js b/src/components/ColorTokenTable/ColorTokenTable.js
@@ -435,6 +435,75 @@ export default class ColorTokenTable extends React.Component {
               </tbody>
             </table>
           </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">AI</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['ai']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['ai'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">Chat</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['chat']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['chat'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
+          <div className="cds--col-lg-7">
+            <h3 className="page-h3">Chat button</h3>
+          </div>
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <table className="page-table">
+              <thead>
+                <tr>
+                  <th>Token</th>
+                  <th>Role</th>
+                  <th>Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.keys(colorTokens['chat-button']).map((token, i) =>
+                  this.renderToken(
+                    token,
+                    colorTokens['chat-button'][token],
+                    i
+                  )
+                )}
+              </tbody>
+            </table>
+          </div>
         </section>
       </div>
     );