mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-05-03 18:14:52 +00:00
Changes before error encountered
Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
@@ -0,0 +1,153 @@
|
||||
{
|
||||
"title": "Sass Styles Guide",
|
||||
"subtitle": "Custom Material UI components with Sass",
|
||||
"overview": "CodeForge includes a comprehensive Sass-based styling system for non-standard Material UI components. This system provides pre-built components, utilities, mixins, and animations that extend beyond the standard Material UI component library.",
|
||||
"fileStructure": [
|
||||
{
|
||||
"file": "src/styles/_variables.scss",
|
||||
"description": "Color palettes, spacing scales, typography, transitions, and other design tokens"
|
||||
},
|
||||
{
|
||||
"file": "src/styles/_utilities.scss",
|
||||
"description": "Mixins and functions for responsive design, colors, typography, and layout helpers"
|
||||
},
|
||||
{
|
||||
"file": "src/styles/_animations.scss",
|
||||
"description": "Keyframe animations and animation utility classes for transitions and effects"
|
||||
},
|
||||
{
|
||||
"file": "src/styles/material-ui-custom.scss",
|
||||
"description": "Custom Material UI component styles with variants and states"
|
||||
},
|
||||
{
|
||||
"file": "src/styles/main.scss",
|
||||
"description": "Main entry point that imports all Sass modules and provides layout components"
|
||||
}
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"name": "Buttons",
|
||||
"classes": ["mui-custom-button--primary", "mui-custom-button--secondary", "mui-custom-button--accent", "mui-custom-button--outline", "mui-custom-button--ghost"],
|
||||
"description": "Custom styled buttons with hover effects and variants"
|
||||
},
|
||||
{
|
||||
"name": "Cards",
|
||||
"classes": ["mui-custom-card", "mui-custom-card--gradient", "mui-custom-card--glass"],
|
||||
"description": "Elevated cards with gradient and glassmorphism variants"
|
||||
},
|
||||
{
|
||||
"name": "Inputs",
|
||||
"classes": ["mui-custom-input", "mui-custom-input--error", "mui-custom-input--success"],
|
||||
"description": "Form inputs with focus states and validation styling"
|
||||
},
|
||||
{
|
||||
"name": "Chips",
|
||||
"classes": ["mui-custom-chip--primary", "mui-custom-chip--success", "mui-custom-chip--error", "mui-custom-chip--warning"],
|
||||
"description": "Status chips and tags with color variants"
|
||||
},
|
||||
{
|
||||
"name": "Panels",
|
||||
"classes": ["mui-custom-panel", "mui-custom-panel--with-header"],
|
||||
"description": "Content panels with headers and footers"
|
||||
},
|
||||
{
|
||||
"name": "Dialogs",
|
||||
"classes": ["mui-custom-dialog"],
|
||||
"description": "Modal dialogs with backdrop blur effects"
|
||||
},
|
||||
{
|
||||
"name": "Badges",
|
||||
"classes": ["custom-mui-badge", "custom-mui-badge--dot"],
|
||||
"description": "Notification badges and indicators"
|
||||
},
|
||||
{
|
||||
"name": "Progress",
|
||||
"classes": ["mui-custom-progress", "mui-custom-progress--indeterminate"],
|
||||
"description": "Loading progress bars with animations"
|
||||
},
|
||||
{
|
||||
"name": "Skeletons",
|
||||
"classes": ["mui-custom-skeleton--text", "mui-custom-skeleton--circle", "mui-custom-skeleton--rect"],
|
||||
"description": "Loading skeleton placeholders with shimmer effect"
|
||||
},
|
||||
{
|
||||
"name": "Accordions",
|
||||
"classes": ["mui-custom-accordion"],
|
||||
"description": "Collapsible content sections with animations"
|
||||
}
|
||||
],
|
||||
"layoutComponents": [
|
||||
{
|
||||
"name": "custom-mui-container",
|
||||
"description": "Max-width container with responsive padding"
|
||||
},
|
||||
{
|
||||
"name": "custom-mui-grid",
|
||||
"description": "CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)"
|
||||
},
|
||||
{
|
||||
"name": "custom-mui-flex",
|
||||
"description": "Flexbox utilities (--row, --col, --wrap, --center, --between, --around)"
|
||||
},
|
||||
{
|
||||
"name": "custom-mui-stack",
|
||||
"description": "Vertical/horizontal stacks with configurable gaps"
|
||||
},
|
||||
{
|
||||
"name": "custom-mui-surface",
|
||||
"description": "Interactive surfaces with elevation and hover effects"
|
||||
}
|
||||
],
|
||||
"utilities": [
|
||||
{
|
||||
"name": "@include respond-to($breakpoint)",
|
||||
"description": "Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints",
|
||||
"example": "@include respond-to('lg') {\n padding: 2rem;\n}"
|
||||
},
|
||||
{
|
||||
"name": "@include elevation($level)",
|
||||
"description": "Apply box shadows with levels 1-4",
|
||||
"example": "@include elevation(2);"
|
||||
},
|
||||
{
|
||||
"name": "@include glassmorphism($blur, $opacity)",
|
||||
"description": "Create frosted glass effects with backdrop blur",
|
||||
"example": "@include glassmorphism(16px, 0.1);"
|
||||
},
|
||||
{
|
||||
"name": "get-color($palette, $shade)",
|
||||
"description": "Access colors from predefined palettes (primary, secondary, accent, success, error, warning)",
|
||||
"example": "color: get-color('primary', 500);"
|
||||
},
|
||||
{
|
||||
"name": "@include truncate($lines)",
|
||||
"description": "Truncate text with ellipsis after specified lines",
|
||||
"example": "@include truncate(2);"
|
||||
},
|
||||
{
|
||||
"name": "@include show-scrollbar($track, $thumb)",
|
||||
"description": "Style webkit scrollbars with custom colors",
|
||||
"example": "@include show-scrollbar(rgba(0,0,0,0.1), rgba(0,0,0,0.3));"
|
||||
}
|
||||
],
|
||||
"animations": [
|
||||
{ "name": "animate-fade-in", "description": "Fade in from opacity 0" },
|
||||
{ "name": "animate-slide-in-up", "description": "Slide in from bottom" },
|
||||
{ "name": "animate-slide-in-down", "description": "Slide in from top" },
|
||||
{ "name": "animate-scale-in", "description": "Scale in from 95%" },
|
||||
{ "name": "animate-pulse", "description": "Pulsing opacity effect" },
|
||||
{ "name": "animate-bounce", "description": "Bouncing effect" },
|
||||
{ "name": "animate-spin", "description": "Continuous rotation" },
|
||||
{ "name": "animate-shimmer", "description": "Shimmer effect for loading" },
|
||||
{ "name": "animate-float", "description": "Floating up and down" },
|
||||
{ "name": "animate-glow", "description": "Glowing shadow effect" }
|
||||
],
|
||||
"bestPractices": [
|
||||
"Import main.scss in your index.css to access all Sass components and utilities",
|
||||
"Use @use instead of @import for better module encapsulation",
|
||||
"Leverage mixins for consistent spacing, elevation, and responsive design",
|
||||
"Extend existing component classes rather than creating from scratch",
|
||||
"Use animation classes sparingly and respect prefers-reduced-motion",
|
||||
"Customize variables in _variables.scss to match your design system"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user