fix: improving font rendering and visually consistent and meet accessibility guidelines for contrast

[cw1997]

Pull Request

Description

This pull request standardizes and improves the styling and accessibility of all solid "danger" (destructive confirm) buttons across the application. It introduces a shared DANGER_BUTTON_CLASS to ensure consistent use of the correct background and foreground colors for destructive actions, addressing previous issues where labels on red buttons were unreadable or inconsistent. The change also registers and applies a new --destructive-foreground CSS variable for proper contrast in both light and dark themes. Additionally, the font stacks are enhanced for better internationalization support.

Danger button standardization and accessibility:

• Introduced a shared DANGER_BUTTON_CLASS in components/danger-button.ts for solid danger buttons, ensuring consistent styling and label color across all destructive confirmation dialogs and actions.
• Registered the --destructive-foreground CSS variable in app/globals.css for both light and dark themes, providing accessible contrast for button labels. [1] [2] [3]
• Replaced previous ad-hoc or incorrect classes (including text-white and custom bg/text pairs) with DANGER_BUTTON_CLASS in all relevant components and dialogs, including SSE dialogs, object delete, and shared dialog host. [1] [2] [3] [4] [5] [6] [7] [8]
• Updated the UI review register to document the resolved accessibility issue with destructive confirm buttons, including evidence and implementation notes. [1] [2]

Font stack and internationalization improvements:

• For Chinese text, sans-serif fonts are preferred.
• Expanded and reorganized the font-family CSS variables in app/globals.css to provide better fallbacks for Latin, Han, Kana, Hangul, and Arabic scripts, including language-specific overrides for Japanese and Korean. [1] [2]

These changes ensure that all destructive confirm buttons are both visually consistent and meet accessibility guidelines for contrast, while also improving font rendering for international users.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Code refactoring
• Performance improvement
• Test improvements
• Security fix

Testing

• Unit tests added/updated
• Manual testing completed

pnpm test:run

Checklist

• Code follows the project's style guidelines
• Self-review completed
• TypeScript types are properly defined
• All commit messages are in English (Conventional Commits)
• All existing tests pass
• No new dependencies added, or they are justified

Related Issues

Closes #

Screenshots (if applicable)

Additional Notes