feat: Migrate UI from glass effect to Carbon Design System#74
Merged
Conversation
- Replace liquid glass styling with IBM Carbon Design System tokens - Add carbon-theme.css with full Carbon color palette, typography, and spacing - Add carbon-utils.css with Carbon-compatible utility classes - Update accessibility.css with Carbon token references - Remove glass-specific CSS files and JavaScript - Update MainLayout and NavMenu to use Carbon styling - Switch font from Inter to IBM Plex Sans - Maintain all critical Radzen component overrides for: - Calendar/DatePicker with proper backgrounds - Dropdown/AutoComplete with selection states - Badges/Alerts with WCAG-compliant contrast - Buttons with Carbon variants - DataTable with proper header styling - Dialog with Carbon overlay - Focus states for accessibility Co-Authored-By: Warp <agent@warp.dev>
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request replaces the "Liquid Glass" UI styling with IBM Carbon Design System for a cleaner, more professional appearance. The migration removes all glassmorphism effects, mouse-tracking animations, and visual complexity in favor of Carbon's solid, accessible design language.
Changes:
- Removed 4 CSS/JS files related to Liquid Glass styling and animations
- Added 2 new CSS files implementing Carbon Design System tokens and utilities
- Updated accessibility.css to use Carbon tokens
- Migrated all Radzen component overrides to Carbon styling
- Changed typography from Inter to IBM Plex Sans
- Updated layout components to remove glass effect classes
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| liquid-glass-utils.css | Deleted - utility classes replaced by carbon-utils.css |
| liquid-glass-force.css | Deleted - glass effect overrides no longer needed |
| liquid-glass-accessibility.css | Replaced by updated accessibility.css |
| custom-theme.css | Deleted - replaced by carbon-theme.css |
| js/liquid-glass.js | Deleted - mouse tracking and animation effects removed |
| carbon-theme.css | New - Complete Carbon Design System token definitions and component overrides |
| carbon-utils.css | New - Carbon-based utility classes for layout and styling |
| accessibility.css | Updated to use Carbon tokens for WCAG compliance |
| App.razor | Updated CSS imports and font to IBM Plex Sans |
| MainLayout.razor | Removed glass-header and glass-sidebar classes |
| MainLayout.razor.css | Updated to use Carbon design tokens |
| NavMenu.razor.css | Updated to use Carbon design tokens and styling |
Comment on lines
+443
to
+462
| .rz-button-danger:hover, | ||
| button.rz-button-danger:hover, | ||
| .rz-button.rz-danger:hover { | ||
| background-color: #b81921; | ||
| } | ||
|
|
||
| /* Success Button */ | ||
| .rz-button-success, | ||
| button.rz-button-success, | ||
| .rz-button.rz-success { | ||
| background-color: var(--cds-green-60); | ||
| color: var(--cds-text-on-color); | ||
| border: none; | ||
| } | ||
|
|
||
| .rz-button-success:hover, | ||
| button.rz-button-success:hover, | ||
| .rz-button.rz-success:hover { | ||
| background-color: #136e2d; | ||
| } |
There was a problem hiding this comment.
The hover states for danger and success buttons use hardcoded color values instead of CSS variables. Consider defining CSS variables for these hover states (e.g., --cds-red-70, --cds-green-70) to maintain consistency with the design system and improve maintainability. This would also make theme customization easier.
Comment on lines
+705
to
+731
| .rz-alert-warning, | ||
| .rz-alert.rz-warning { | ||
| background-color: #fdf6dd; | ||
| border-left-color: var(--cds-yellow-30); | ||
| color: var(--cds-gray-100); | ||
| } | ||
|
|
||
| .rz-alert-info, | ||
| .rz-alert.rz-info { | ||
| background-color: var(--cds-blue-10); | ||
| border-left-color: var(--cds-support-info); | ||
| color: var(--cds-text-primary); | ||
| } | ||
|
|
||
| .rz-alert-success, | ||
| .rz-alert.rz-success { | ||
| background-color: #defbe6; | ||
| border-left-color: var(--cds-green-60); | ||
| color: var(--cds-text-primary); | ||
| } | ||
|
|
||
| .rz-alert-danger, | ||
| .rz-alert.rz-danger { | ||
| background-color: #fff1f1; | ||
| border-left-color: var(--cds-red-60); | ||
| color: var(--cds-text-primary); | ||
| } |
There was a problem hiding this comment.
Alert background colors use hardcoded hex values instead of CSS variables. Consider defining CSS variables for these background colors (e.g., --cds-alert-warning-bg, --cds-alert-success-bg, --cds-alert-danger-bg) to maintain consistency and improve maintainability. This would also ensure proper theming support for dark mode.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the "Liquid Glass" UI styling with IBM Carbon Design System styling for a cleaner, more professional appearance.
Changes
New Files
carbon-theme.css- Complete Carbon Design System tokens including:#0f62fe)prefers-color-schemecarbon-utils.css- Utility classes for layout, spacing, and stylingaccessibility.css- Cleaned up accessibility overrides using Carbon tokensRemoved Files
custom-theme.css- Replaced by carbon-theme.cssliquid-glass-force.css- No longer needed (glass overrides)liquid-glass-utils.css- Replaced by carbon-utils.cssliquid-glass-accessibility.css- Replaced by accessibility.cssjs/liquid-glass.js- Mouse tracking and animation effects removedModified Files
App.razor- Updated CSS imports and font to IBM Plex SansMainLayout.razor- Removed glass-header/glass-sidebar classesMainLayout.razor.css- Updated to use Carbon tokensNavMenu.razor.css- Updated to use Carbon stylingRadzen Component Support
All critical Radzen component overrides have been preserved and migrated to Carbon styling:
Visual Changes
#f4f4f4(Gray 10) page background instead of mesh gradientsTesting
Please test the following:
This PR was generated with Warp.