fix: DLT-1548 fix opacity classes selectors

[lizard-boy]

Fix: :hover, :focus, :focus-visible selectors on semantic colors

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

• Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-1548

📖 Description

• Fix semantic colors generation so they can handle opacity changes through selectors.
• Fixed HSL color extraction process, found an issue were all the HSLA colors were always 100% opacity.
• Added --dt-color-${name}-a to generated individual HSL color variables
• Migrated a deprecated class d-fc-error -> d-fc-critical
• Updated Font colors documentation, it was showing pretty outdated colors.
• Removed found references to d:d-* prefix which was related to some old dark-theme implementation that no longer works.
• General cleanup

💡 Context

• It wasn't possible to change the opacity of semantic colors
• Semantic colors weren't including

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have added all relevant documentation.
• I have considered the performance impact of my change.

For all CSS changes:

• I have used design tokens whenever possible.
• I have considered how this change will behave on different screen sizes.
• I have visually validated my change in light and dark mode.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

🔮 Next Steps

• Migrate d-fc-error -> d-fc-critical on Dialpad and Dialpad meetings

🔗 Sources

https://colorjs.io/

[greptile-apps]

PR Summary

This PR focuses on improving the handling of semantic colors and opacity in the Dialtone CSS framework. Here are the key changes:

• Updated HSL color extraction process to fix issues with HSLA colors always having 100% opacity
• Added individual HSL color variables with an '-a' suffix for alpha channel control
• Removed outdated dark theme implementation references (d:d-* prefix)
• Migrated from 'tinycolor2' to 'colorjs.io' for color manipulation
• Updated font color documentation with current color information
• Replaced deprecated 'd-fc-error' class with 'd-fc-critical' in various components

These changes improve the flexibility and consistency of color handling throughout the Dialtone design system, particularly for opacity adjustments and semantic color usage.

_{18 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[lizard-boy]

@greptileai

[greptile-apps]

PR Summary

This PR continues to improve the handling of semantic colors and opacity in the Dialtone CSS framework. Here are the key updates since the last review:

• Simplified the UtilityClassTable component by removing unnecessary class attributes and inline styles
• Updated the 'fontColorVars' section in type.json to use semantic color tokens instead of specific color values
• Removed dark mode-specific classes and references from various documentation files
• Added 'ai' to the BORDER_COLORS array in constants.cjs for AI-related border color utility classes
• Improved color processing in helpers.cjs with a new function to remove prefixes from color names

These changes further enhance the consistency and flexibility of the color system in Dialtone, while also improving documentation and removing outdated references.

_{18 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings}

[greptile-apps]

style: Dependency array formatting changed, but functionality remains the same