>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3571220. --> Reported by: [bbruno](https://www.drupal.org/user/3691195) Related to !1153 >>> <p>[Tracker]<br> <strong>Update Summary: </strong>[One-line status update for stakeholders]<br> <strong>Short Description: </strong>[One-line issue summary for stakeholders]<br> <strong>Check-in Date: </strong>MM/DD/YYYY<br> <em>Metadata is used by the <a href="https://www.drupalstarforge.ai/" title="AI Tracker">AI Tracker.</a> Docs and additional fields <a href="https://www.drupalstarforge.ai/ai-dashboard/docs" title="AI Issue Tracker Documentation">here</a>.</em><br> [/Tracker]</p> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>While implementing the newly introduced AI global classes from <a href="https://www.drupal.org/project/ai/issues/3567389">https://www.drupal.org/project/ai/issues/3567389</a> on the AI dashboard (<a href="https://www.drupal.org/project/ai_dashboard/issues/3569773">issue</a>) we noticed the classes are not sufficient to target certain elements rendered by Admin themes without custom markup.</p> <p>We are also missing certain icons, such as the ones used in the AI dashboard, that should be added to the shared AI UI library</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Instead of classes directly referencing existing variables, we should instead create at the top of `ai_global.css` a list of AI CSS variables that reference these instead.</p> <p><strong>Before:</strong></p> <pre>.ai-font-size-s {<br>&nbsp; font-size: var(--some-size-s);<br>}</pre><p> <strong>After:</strong></p> <pre>root {<br>&nbsp; --ai-font-size-s: var(--some-size-s, 10px);<br>}<br><br>.ai-font-size-s {<br>&nbsp; font-size: var(--ai-font-size-s);<br>}</pre><p>This would then allow the use of both the class, and the variable when needed to target elements without adjusting markup.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>- Create --ai-x CSS variables instead of directly referencing existing variables<br> - Introduce new icons</p> <p>[ ] AI Assisted Issue<br> This issue was generated with AI assistance, but was reviewed and refined by the creator.</p> <p>[ ] AI Assisted Code<br> This code was mainly generated by a human, with AI autocompleting or parts AI generated, but under full human supervision.</p> <p>[ ] AI Generated Code<br> This code was mainly generated by an AI with human guidance, and reviewed, tested, and refined by a human.</p> <p>[ ] Vibe Coded<br> This code was generated by an AI and has only been functionally tested.</p> > Related issue: [Issue #3569748](https://www.drupal.org/node/3569748) > Related issue: [Issue #3569768](https://www.drupal.org/node/3569768) > Related issue: [Issue #3567389](https://www.drupal.org/node/3567389)