Ux design system - #11
Merged
Merged
Conversation
- Remove all lume- prefixed variables - Consolidate into single unified namespace (--color-*, --space-*, --font-*, etc.) - Remove unused variables (lume-color-info, lume-color-success-light, method colors, etc.) - Eliminate double-layering of variables (direct values instead of var() chains) - Remove commented-out dark mode section - Keep legacy semantic aliases for backward compatibility - All 316 CSS classes preserved and functional This makes the CSS more maintainable with a clean, unified variable system.
- Add 0.3s cubic-bezier transitions to operation-try-panel and wrapper - Add fadeInGrid animation for two-column grid layout - Add slideInFromLeft animation for form container - Add slideInFromRight animation for response panel - Smooth transitions enhance UX when toggling between collapsed/expanded states
- Remove slideInFromLeft animation (not needed) - Both form and response panels now slide in from right - Add staggered timing: form at 0.1s, response at 0.2s for cascade effect - Use 'backwards' to prevent initial flash before animation starts - Matches natural expansion from right sidebar position
- Remove all keyframe animations (fadeInGrid, slideInFromRight) - Use only smooth width/height/opacity transitions - Set transform-origin to 'right' to anchor expansion from right side - Transition duration: 0.4s for width/height, 0.3s for opacity - Eliminates flickering and janky behavior from previous animation approach
- Add expandFromRight keyframe animation with scaleX from 0.95 to 1 - Set transform-origin to 'right center' to anchor scaling from right side - Animation creates visual effect of content expanding from right - 0.4s duration with cubic-bezier easing for smooth motion
- Remove all transitions and animations from operation-try-panel - Remove expandFromRight keyframe animation - Remove transitions from operation-content-wrapper - Clean, instant expand/collapse with no visual effects - Simpler is better - no flickering, no weird scaling effects
- Add simple fadeIn animation (0.3s) when grid expands - Opacity transition from 0 to 1 - clean and smooth - No directional movement, just fade - avoids all flickering issues - Add overflow:hidden to prevent scroll during transition
- Remove fadeIn animation - Remove overflow hidden - No transitions, no animations - Clean instant state changes
- Panel expands from right to left: right border stays fixed, left border moves - Use margin-left: auto to anchor panel to right side when collapsed - Smooth 0.4s transition on width with cubic-bezier easing - Content fades in after 0.2s delay to avoid flash during layout change - On collapse: left border moves back right (reverse of expand)
- Remove margin-left: auto so panel anchors to left side - On expand: left border stays fixed, right border moves left as width increases - On collapse: right border moves back right as width decreases - Smooth 0.4s transition with content fade-in after 0.2s delay
- Remove all transitions from operation-try-panel - Remove fadeInContent animation - Back to clean, instant expand/collapse with no effects - Simpler is better
- Replace all font-size px/rem values with --font-size-* variables - Replace all font-weight numeric values (300, 400, 500, 600, 700) with --font-weight-* variables - Replace border-radius values (4px, 8px, 12px, 16px, etc.) with --radius-* variables - Improves consistency and maintainability - Makes theme changes easier by centralizing all values in CSS variables
- Add --color-white variable for #FFFFFF - Add Tailwind-compatible gray scale (--color-gray-50 through --color-gray-900) - Add additional colors: --color-navy, --color-indigo, --color-slate - Replace hardcoded white colors (#fff, #ffffff, white) with var(--color-white) - Replace all gray hex values with corresponding --color-gray-* variables - Improves consistency and makes color theming easier
Replace self-referencing variables with actual hex values for gray scale and additional colors.
Analyzed all HTML templates and JavaScript files to identify actually used CSS classes. Removed 195 unused class definitions including: - Debugger controls (btn-debugger-*, debugger-*) - Old catalog card styles - Unused enum display styles - Old operation and skill styles - Infrastructure classes (ace_editor, ms-com-*, etc.) Reduced file from 8,279 to 6,628 lines (20% reduction).
The .operation-content-wrapper.try-expanded rule was incorrectly removed, causing the content to move horizontally instead of vertically when expanding.
These classes are actively used in templates but were incorrectly identified as unused and removed.
The automated removal deleted many classes that are actually used. Restoring the file to analyze more carefully.
- Replace undefined --color-text-secondary with --color-text-muted - Replace undefined --text-tertiary with --color-text-muted - Remove unused --space-xx-large variable All 94 CSS variables are now properly defined and used.
Added comprehensive color scale variables: - Blue, Sky, Red, Green, Yellow, Purple scales - Shadow and overlay rgba patterns - Replaced 170+ hardcoded color values with variables - 38 specialized colors remain (terminal, specific UI elements) All variable definitions in :root remain intact with actual hex/rgba values.
Removed unused color scale variables: - Blue: 200, 300, 400 - Sky: 50, 100, 300, 400, 800, 900 - Red: 300, 900 - Green: 500, 600, 800, 900 - Yellow: 400, 500, 600, 900 - Purple: 200, 300, 400, 500, 600, 900 - Legacy: bg-hover, bg-tertiary All 132 CSS variables are now actively used.
Created semantic color variables for HTTP method badges: - --method-get-bg/text/bg-hover (green) - --method-post-bg/text/bg-hover (blue) - --method-put-bg/text/bg-hover (yellow) - --method-patch-bg/text/bg-hover (purple) - --method-delete-bg/text/bg-hover (red) - --method-other-bg/text/bg-hover (gray for HEAD/OPTIONS) This makes it easier to customize method badge colors and understand their purpose without knowing color-blue-50 means POST.
Created semantic color variables organized by purpose: Text colors: - --color-text-primary (headings, primary content) - --color-text-secondary (muted text, descriptions) - --color-text-tertiary, quaternary (helper text, placeholders) - --color-text-inverse (text on dark backgrounds) - --color-text-link, link-hover (interactive links) Background colors: - --color-bg-primary (page background) - --color-bg-secondary, bg-surface (card/panel backgrounds) - --color-bg-overlay (modal overlays) Border colors: - --color-border-primary (default borders) - --color-border-secondary (subtle borders) - --color-border-focus (focused inputs) Legacy aliases maintained for backward compatibility. Updated typography and links to use semantic names.
Replaced throughout the entire CSS file: - var(--color-bg) → var(--color-bg-primary) - var(--color-surface) → var(--color-bg-surface) - var(--color-border) → var(--color-border-primary) - var(--color-text) → var(--color-text-primary) - var(--color-text-muted) → var(--color-text-secondary) - var(--bg-primary) → var(--color-bg-primary) - var(--bg-secondary) → var(--color-bg-secondary) - var(--text-primary) → var(--color-text-primary) - var(--text-secondary) → var(--color-text-secondary) - var(--text-muted) → var(--color-text-secondary) - var(--border-color) → var(--color-border-primary) Removed all legacy alias definitions from :root. All color variables now use consistent semantic naming.
Removed: - scripts/portal_generator/templates/homepage/stats.html (not included in homepage) - .stats, .stat, .stat-dot, .stat-value CSS rules - .stats-grid, .stat-item CSS rules - .stats-summary, .stat-number, .stat-label responsive CSS - .catalog-stats, .stat-separator CSS rules These were legacy/unused components not referenced anywhere in the portal generation.
Removed: - scripts/portal_generator/templates/skills/workflow_step_try.html (not included anywhere) - .workflow-try-container CSS - All .wf-* CSS classes (params, body, tabs, status badges, outputs, etc.) - Responsive workflow CSS - .wf-url-bar-header, .wf-header-actions This was legacy code for an old workflow implementation not used in current portal.
Created docs/design-system.md covering: - Semantic color token system (text, background, border, status, HTTP methods) - Spacing system with token reference - Typography system (fonts, sizes, weights) - Border radius tokens - Shadows and elevation system - Component patterns (buttons, cards, inputs, method badges) - 4 core design principles: 1. White background = interactive 2. No boxes inside boxes 3. Hover = selected style 4. Buttons use --radius-large minimum - Quick reference cheat sheet This documents the CSS variable system we've been building and establishes design guidelines for maintaining consistency.
Created comprehensive architecture documentation covering: Core Principles: 1. Avoid duplicated HTML - reuse via Jinja2 macros and includes 2. Python-first processing - avoid JavaScript logic for data transformation 3. Generate tests for any new feature - no exceptions Detailed Sections: - Template architecture (hierarchy, macros vs includes) - Python-first processing pipeline and guidelines - Testing requirements (unit, OAS parser, smoke tests) - Project structure and separation of concerns - Best practices for templates, Python code, and tests - Common patterns and code examples - Pre-PR checklist This establishes engineering standards for maintaining and extending the portal generator codebase.
Added comprehensive summaries with pointers to detailed documentation: Portal Generator Architecture: - Core principles (no duplicate HTML, Python-first, test everything) - What goes where (Python vs JavaScript vs Templates) - Testing requirements and commands - Link to full guide: docs/portal-generator-architecture.md Design System: - Semantic token system overview - Quick reference with ✅ correct vs ❌ wrong examples - 4 core design principles - Token categories reference - Link to full guide: docs/design-system.md Updated Key Files section to include new documentation files. This ensures agents working on the project have immediate access to architectural guidelines and design system rules with links to comprehensive documentation when needed.
Added Code Editor Pattern section to design system: - When to use ACE Editor (request body editing, interactive JSON/YAML) - Implementation example with initialization code - Styling guidelines using design tokens - Note that read-only code blocks should use standard <pre><code> This clarifies the distinction between editable code (ACE Editor) and static code examples (standard HTML elements).
- Move results count next to search bar for better grouping - Constrain search bar width to 850px (fixed) so results count stays adjacent - Add icon guidelines to design system (prefer SVG, store in assets/icons/) - Maintain alignment between controls wrapper and catalog grid
Step 1 of incremental CSS refactoring to manage growing styles.css file. Changes: - Created extract_homepage_css.py script to identify and extract homepage-only CSS - Generated homepage.css (278 lines) with 39 homepage-specific rules: * Hero section (.hero, .hero-content, .hero-title, .hero-subtitle, .hero-tabs) * Catalog controls (.catalog-controls-wrapper, .catalog-results-header, .catalog-grid) * Sort modal (.sort-btn, .sort-modal, .sort-modal-*) * Search UI (.search-icon-catalog, .results-count) - Added extra_styles block to base.html for page-specific CSS includes - Updated homepage.html to include homepage.css - Restored .stats-grid, .stat-item CSS (was incorrectly removed, still used in detail pages) Architecture: - styles.css remains the foundation (loaded on all pages, 7,534 lines) - homepage.css contains homepage-only styles (loaded only on index.html, 278 lines) - Future: Extract detail-page.css and skill-page.css following same pattern
Ferticidio
approved these changes
Apr 17, 2026
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
2 participants
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.