UI patterns rework #17
Merged
Conversation
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
- Add reusable design tokens (colors, spacing, typography) in DesignSystem.axaml - Create Tailwind-like utility classes in Utilities.axaml - Redesign modal dialogs with modern styling - Simplify view styles across all major views - Apply consistent design patterns throughout UI Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add SpacingExtension for composable margins/padding: {theme:Spacing Top=SM, X=MD}
- Add GapExtension for StackPanel spacing: {theme:Gap LG}
- Add GridSpacingExtension for grid spacer columns: {theme:GridSpacing SM}
- Add Card component with Variant and Accent properties
- Refactor IconBadge to use XAML styles instead of code-behind
- Remove Utilities.axaml (745 lines) and Spacing.axaml
- Migrate all views and dialogs to use new design system
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace hardcoded values with design tokens throughout:
- Icon sizes: IconSizeSM, IconSizeMD, IconSizeXL
- Corner radii: CornerRadiusSM, CornerRadiusMD, CornerRadiusLG, CornerRadiusButton
- Spacing: {theme:Spacing} and {theme:Gap} markup extensions
- Typography: body-small, caption, small classes
- Colors: TextSecondaryBrush (replacing old Avalonia system colors)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive reference for markup extensions, design tokens, typography classes, button styles, and reusable components. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Simplify Card component with cleaner Size property API - Remove unused CardStyles.axaml and clean up ButtonStyles.axaml - Refactor MainView layout and extract ConnectionStatus enum - Update views to use simplified component patterns
Simplify typography system from 11 classes to 7: - h1, h2, h3: Headings (22px, 15px, 13px) - m1, m2: Small text (12px, 10px) - credential: Monospace for IDs/passwords - muted: Color modifier Removed: title, title-large, header, header-small, body-small, caption, small, small-muted, secondary Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace static resource icon size tokens with CSS-like icon classes (icon-xs, icon-sm, etc.) - Replace static resource corner radius tokens with inline values for clarity - Add IconStyles.axaml with predefined icon size classes for consistent usage - Remove Borders.axaml as token-based approach is replaced by classes - Update all views and controls to use new class-based approach - Fix card background to use SystemControlBackgroundBaseLowBrush for theme support - Adjust card colors for better contrast in both light and dark themes
- Enhance SpacingExtension to auto-detect target property type and return double, GridLength, or Thickness
- Remove redundant GapExtension and GridSpacingExtension
- Update all XAML files to use unified {theme:Spacing} syntax
- Replace Gap.Icon (6px) with Gap.SM (8px) for icon+text pairs
- Maintain backward compatibility for all spacing use cases
- Add Controls/Icon.axaml and Controls/Icon.axaml.cs - Icon wraps MaterialIcon with Size enum (XXS-XXL) and ShowAsBadge bool - Supports element property syntax via Binding elements for Kind and Foreground - ShowAsBadge=true: Badge mode with configurable size/color - ShowAsBadge=false: Direct icon mode Migrate all MaterialIcon usages to controls:Icon: - AboutView, DialogHeader, MainView, PresenterView, ViewerView - ChatView, FileTransferConfirmationDialog, ViewerSelectionDialog - DropOverlay, ToastsView (including complex converter cases) Delete obsolete files: - Controls/IconBadge.axaml, Controls/IconBadge.axaml.cs - Themes/IconStyles.axaml (size class styles no longer needed) - Themes/BadgeStyles.axaml (text-badge inlined in AboutView) Update App.axaml: - Remove style includes for deleted theme files - Keep FluentTheme and MaterialIconStyles This creates a single, consistent API for all icon usage
- Fix missing closing brace in ViewerView.axaml binding expression - Fix DialogHeader.axaml to use Kind property instead of Icon - Migrate DisplayMiniMap.axaml.cs to use custom Icon control - Replace all mi:MaterialIcon usages with controls:Icon in ToastsView and PresenterView - Remove unused Material.Icons.Avalonia xmlns declarations Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Removed unused semantic state variants (SuccessHover/Pressed, ErrorHover/Pressed), window chrome colors, SurfaceBrush, TextDisabledBrush, BorderDefault/Strong, CardElevatedBackgroundBrush, InfoBrush, and WarningBackground/Foreground. Reduces resource count from 53 to 35 (34% reduction). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace action-primary/action-secondary with Avalonia accent class - Replace AccentBrush with AccentButtonBackground - Replace text brushes with SystemControlDisabledBaseMediumLowBrush - Replace BorderSubtleBrush with SystemControlForegroundBaseLowBrush - Remove redundant icon foregrounds (inherit from parent) - Simplify ButtonStyles.axaml to base CornerRadius and icon-button only Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove outdated IconSize and CornerRadius static resource docs - Remove non-existent Gap/GridSpacing extension docs - Document unified Spacing extension for all spacing use cases - Add Icon component documentation with Size and ShowAsBadge - Update components list (IconBadge replaced by Icon) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reorganized CLAUDE.md for clarity; moved detailed MVVM and design system documentation to dedicated skill files. Added SKILL.md for design system and updated avalonia-mvvm.md for focused MVVM patterns. Improves maintainability and discoverability of technical docs.
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.
No description provided.