low-code-react-app-b/src/data/documentation/sass-data.json

{
  "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": [
    {
      "title": "custom-mui-container",
      "description": "Max-width container with responsive padding"
    },
    {
      "title": "custom-mui-grid",
      "description": "CSS Grid layouts with responsive columns (--cols-1 to --cols-12, --responsive)"
    },
    {
      "title": "custom-mui-flex",
      "description": "Flexbox utilities (--row, --col, --wrap, --center, --between, --around)"
    },
    {
      "title": "custom-mui-stack",
      "description": "Vertical/horizontal stacks with configurable gaps"
    },
    {
      "title": "custom-mui-surface",
      "description": "Interactive surfaces with elevation and hover effects"
    }
  ],
  "utilities": [
    {
      "title": "Responsive Design",
      "mixin": "@include respond-to($breakpoint)",
      "description": "Generate media queries for xs, sm, md, lg, xl, 2xl breakpoints",
      "snippet": "@include respond-to('lg') {\n  padding: 2rem;\n}"
    },
    {
      "title": "Elevation & Shadows",
      "mixin": "@include elevation($level)",
      "description": "Apply box shadows with levels 1-4",
      "snippet": "@include elevation(2);"
    },
    {
      "title": "Glassmorphism",
      "mixin": "@include glassmorphism($blur, $opacity)",
      "description": "Create frosted glass effects with backdrop blur",
      "snippet": "@include glassmorphism(16px, 0.1);"
    },
    {
      "title": "Color Functions",
      "mixin": "get-color($palette, $shade)",
      "description": "Access colors from predefined palettes (primary, secondary, accent, success, error, warning)",
      "snippet": "color: get-color('primary', 500);"
    },
    {
      "title": "Text Truncation",
      "mixin": "@include truncate($lines)",
      "description": "Truncate text with ellipsis after specified lines",
      "snippet": "@include truncate(2);"
    },
    {
      "title": "Custom Scrollbars",
      "mixin": "@include show-scrollbar($track, $thumb)",
      "description": "Style webkit scrollbars with custom colors",
      "snippet": "@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" }
  ],
  "quickStart": {
    "components": {
      "title": "Using Custom Components",
      "code": "import './styles/main.scss'\n\nfunction MyComponent() {\n  return (\n    <div className=\"custom-mui-container\">\n      <div className=\"custom-mui-grid custom-mui-grid--cols-3\">\n        <div className=\"mui-custom-card\">\n          <h3>Card Title</h3>\n          <p>Card content</p>\n          <button className=\"mui-custom-button mui-custom-button--primary\">\n            Click Me\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}"
    },
    "mixins": {
      "title": "Creating Custom Styles with Mixins",
      "code": "@use './styles/utilities' as *;\n@use './styles/variables' as *;\n\n.my-custom-component {\n  @include elevation(2);\n  @include responsive-padding(spacing('6'));\n  background: get-color('primary', 500);\n  \n  @include respond-to('md') {\n    @include elevation(3);\n  }\n  \n  &:hover {\n    @include glassmorphism(12px, 0.15);\n  }\n}"
    }
  },
  "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"
  ]
}