diff --git a/src/components/SassStylesShowcase.tsx b/src/components/SassStylesShowcase.tsx
new file mode 100644
index 0000000..d6535db
--- /dev/null
+++ b/src/components/SassStylesShowcase.tsx
@@ -0,0 +1,320 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Code, Palette, Sparkle, CheckCircle } from '@phosphor-icons/react'
+
+export function SassStylesShowcase() {
+ return (
+
+
+
Custom Material UI Sass Styles
+
+ Non-standard Material UI CSS components built with Sass
+
+
+
+
+
+ Buttons
+ Inputs
+ Cards
+ Chips
+ Layout
+ Animations
+
+
+
+
+
+ Custom Button Styles
+
+
+
+
+
+ Primary Button
+
+
+ Secondary Button
+
+
+ Accent Button
+
+
+
+
+
+ Outline Button
+
+
+ Ghost Button
+
+
+
+
+{`
+ Primary Button
+
+
+
+ Accent Button
+ `}
+
+
+
+
+
+
+
+
+ Custom Input Styles
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Card Styles
+
+
+
+
+
Standard Card
+
+ Basic card with elevation and hover effect
+
+
+
+
+
Gradient Card
+
+ Card with gradient background
+
+
+
+
+
Glass Card
+
+ Glassmorphism effect card
+
+
+
+
+{`
+ Standard Card
+
+
+
+ Gradient Card
+
+
+
+ Glass Card
+
`}
+
+
+
+
+
+
+
+
+ Custom Chip/Badge Styles
+
+
+
+
+ Primary
+
+
+ Secondary
+
+
+ Accent
+
+
+
+
+ Error
+
+
+ Warning
+
+
+
+
+
+{`
+ Primary
+
+
+
+ `}
+
+
+
+
+
+
+ Custom Tags
+
+
+
+ Default
+ Small
+ Large
+
+
+
+
+
+
+
+
+ Custom Layout Components
+
+
+
+
Custom Stack
+
+
Item 1
+
Item 2
+
Item 3
+
+
+
Custom Grid (Responsive)
+
+
Grid 1
+
Grid 2
+
Grid 3
+
Grid 4
+
+
+
Custom Surface
+
+
Interactive surface with hover effects
+
+
+
+
+
+
+
+
+ Animation Classes
+
+
+
+
+ Fade In
+
+
+ Slide Up
+
+
+ Scale In
+
+
+ Pulse
+
+
+ Bounce
+
+
+ Float
+
+
+
+{`Fade In
+Slide Up
+Pulse
+Bounce
`}
+
+
+
+
+
+
+ Skeleton Loading
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 11489c6..b4f6481 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
@import 'tailwindcss';
@import "tw-animate-css";
+@import './styles/main.scss';
@layer base {
* {
diff --git a/src/styles/_animations.scss b/src/styles/_animations.scss
new file mode 100644
index 0000000..e1b0ded
--- /dev/null
+++ b/src/styles/_animations.scss
@@ -0,0 +1,364 @@
+@use './variables' as *;
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fade-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-in-up {
+ from {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-in-down {
+ from {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-in-left {
+ from {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-in-right {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes scale-in {
+ from {
+ transform: scale(0.95);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes scale-out {
+ from {
+ transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ transform: scale(0.95);
+ opacity: 0;
+ }
+}
+
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateY(0);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ transform: translateY(-25%);
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+
+@keyframes ping {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 75%, 100% {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+ 100% {
+ background-position: 1000px 0;
+ }
+}
+
+@keyframes shake {
+ 0%, 100% {
+ transform: translateX(0);
+ }
+ 10%, 30%, 50%, 70%, 90% {
+ transform: translateX(-10px);
+ }
+ 20%, 40%, 60%, 80% {
+ transform: translateX(10px);
+ }
+}
+
+@keyframes swing {
+ 0%, 100% {
+ transform: rotate(0deg);
+ }
+ 20% {
+ transform: rotate(15deg);
+ }
+ 40% {
+ transform: rotate(-10deg);
+ }
+ 60% {
+ transform: rotate(5deg);
+ }
+ 80% {
+ transform: rotate(-5deg);
+ }
+}
+
+@keyframes rotate-in {
+ from {
+ transform: rotate(-180deg) scale(0.8);
+ opacity: 0;
+ }
+ to {
+ transform: rotate(0deg) scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes flip {
+ from {
+ transform: perspective(400px) rotateY(90deg);
+ opacity: 0;
+ }
+ to {
+ transform: perspective(400px) rotateY(0deg);
+ opacity: 1;
+ }
+}
+
+@keyframes glow {
+ 0%, 100% {
+ box-shadow: 0 0 5px rgba($accent-color, 0.2);
+ }
+ 50% {
+ box-shadow: 0 0 20px rgba($accent-color, 0.6);
+ }
+}
+
+@keyframes gradient-shift {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 50% {
+ background-position: 100% 50%;
+ }
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translateY(0px);
+ }
+ 50% {
+ transform: translateY(-20px);
+ }
+}
+
+@keyframes wave {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 10% {
+ transform: rotate(14deg);
+ }
+ 20% {
+ transform: rotate(-8deg);
+ }
+ 30% {
+ transform: rotate(14deg);
+ }
+ 40% {
+ transform: rotate(-4deg);
+ }
+ 50% {
+ transform: rotate(10deg);
+ }
+ 60% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
+@keyframes typing {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+
+@keyframes blink {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+}
+
+.animate-fade-in {
+ animation: fade-in $transition-base forwards;
+}
+
+.animate-fade-out {
+ animation: fade-out $transition-base forwards;
+}
+
+.animate-slide-in-up {
+ animation: slide-in-up $transition-base $easing-ease-out;
+}
+
+.animate-slide-in-down {
+ animation: slide-in-down $transition-base $easing-ease-out;
+}
+
+.animate-slide-in-left {
+ animation: slide-in-left $transition-base $easing-ease-out;
+}
+
+.animate-slide-in-right {
+ animation: slide-in-right $transition-base $easing-ease-out;
+}
+
+.animate-scale-in {
+ animation: scale-in $transition-base $easing-ease-out;
+}
+
+.animate-scale-out {
+ animation: scale-out $transition-base $easing-ease-out;
+}
+
+.animate-bounce {
+ animation: bounce 1s infinite;
+}
+
+.animate-pulse {
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-ping {
+ animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+.animate-spin {
+ animation: spin 1s linear infinite;
+}
+
+.animate-shimmer {
+ animation: shimmer 2s infinite;
+}
+
+.animate-shake {
+ animation: shake 0.5s;
+}
+
+.animate-swing {
+ animation: swing 1s ease-in-out;
+}
+
+.animate-rotate-in {
+ animation: rotate-in $transition-base $easing-ease-out;
+}
+
+.animate-flip {
+ animation: flip $transition-base $easing-ease-out;
+}
+
+.animate-glow {
+ animation: glow 2s ease-in-out infinite;
+}
+
+.animate-gradient-shift {
+ animation: gradient-shift 3s ease infinite;
+ background-size: 200% 200%;
+}
+
+.animate-float {
+ animation: float 3s ease-in-out infinite;
+}
+
+.animate-wave {
+ animation: wave 2s ease-in-out;
+}
+
+.animate-typing {
+ animation: typing 3.5s steps(40, end);
+ overflow: hidden;
+ white-space: nowrap;
+ border-right: 3px solid;
+ animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
new file mode 100644
index 0000000..a5536fa
--- /dev/null
+++ b/src/styles/_utilities.scss
@@ -0,0 +1,333 @@
+@use 'sass:color';
+@use 'sass:map';
+
+$breakpoints: (
+ 'xs': 480px,
+ 'sm': 640px,
+ 'md': 768px,
+ 'lg': 1024px,
+ 'xl': 1280px,
+ '2xl': 1536px,
+);
+
+@function breakpoint($size) {
+ @return map.get($breakpoints, $size);
+}
+
+@mixin respond-to($breakpoint) {
+ @if map.has-key($breakpoints, $breakpoint) {
+ @media (min-width: map.get($breakpoints, $breakpoint)) {
+ @content;
+ }
+ } @else {
+ @warn "Unknown breakpoint: #{$breakpoint}";
+ }
+}
+
+@mixin respond-below($breakpoint) {
+ @if map.has-key($breakpoints, $breakpoint) {
+ @media (max-width: map.get($breakpoints, $breakpoint) - 1px) {
+ @content;
+ }
+ } @else {
+ @warn "Unknown breakpoint: #{$breakpoint}";
+ }
+}
+
+@mixin respond-between($min, $max) {
+ @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
+ @media (min-width: map.get($breakpoints, $min)) and (max-width: map.get($breakpoints, $max) - 1px) {
+ @content;
+ }
+ }
+}
+
+$spacing-scale: (
+ '0': 0,
+ '1': 0.25rem,
+ '2': 0.5rem,
+ '3': 0.75rem,
+ '4': 1rem,
+ '5': 1.25rem,
+ '6': 1.5rem,
+ '8': 2rem,
+ '10': 2.5rem,
+ '12': 3rem,
+ '16': 4rem,
+ '20': 5rem,
+ '24': 6rem,
+);
+
+@function spacing($size) {
+ @return map.get($spacing-scale, $size);
+}
+
+$color-palette: (
+ 'primary': (
+ 50: #eef2ff,
+ 100: #e0e7ff,
+ 200: #c7d2fe,
+ 300: #a5b4fc,
+ 400: #818cf8,
+ 500: #6366f1,
+ 600: #4f46e5,
+ 700: #4338ca,
+ 800: #3730a3,
+ 900: #312e81,
+ ),
+ 'secondary': (
+ 50: #faf5ff,
+ 100: #f3e8ff,
+ 200: #e9d5ff,
+ 300: #d8b4fe,
+ 400: #c084fc,
+ 500: #a855f7,
+ 600: #9333ea,
+ 700: #7e22ce,
+ 800: #6b21a8,
+ 900: #581c87,
+ ),
+ 'accent': (
+ 50: #ecfeff,
+ 100: #cffafe,
+ 200: #a5f3fc,
+ 300: #67e8f9,
+ 400: #22d3ee,
+ 500: #06b6d4,
+ 600: #0891b2,
+ 700: #0e7490,
+ 800: #155e75,
+ 900: #164e63,
+ ),
+ 'success': (
+ 50: #f0fdf4,
+ 100: #dcfce7,
+ 200: #bbf7d0,
+ 300: #86efac,
+ 400: #4ade80,
+ 500: #22c55e,
+ 600: #16a34a,
+ 700: #15803d,
+ 800: #166534,
+ 900: #14532d,
+ ),
+ 'error': (
+ 50: #fef2f2,
+ 100: #fee2e2,
+ 200: #fecaca,
+ 300: #fca5a5,
+ 400: #f87171,
+ 500: #ef4444,
+ 600: #dc2626,
+ 700: #b91c1c,
+ 800: #991b1b,
+ 900: #7f1d1d,
+ ),
+ 'warning': (
+ 50: #fffbeb,
+ 100: #fef3c7,
+ 200: #fde68a,
+ 300: #fcd34d,
+ 400: #fbbf24,
+ 500: #f59e0b,
+ 600: #d97706,
+ 700: #b45309,
+ 800: #92400e,
+ 900: #78350f,
+ ),
+ 'gray': (
+ 50: #f9fafb,
+ 100: #f3f4f6,
+ 200: #e5e7eb,
+ 300: #d1d5db,
+ 400: #9ca3af,
+ 500: #6b7280,
+ 600: #4b5563,
+ 700: #374151,
+ 800: #1f2937,
+ 900: #111827,
+ ),
+);
+
+@function get-color($palette, $shade: 500) {
+ @if map.has-key($color-palette, $palette) {
+ $palette-map: map.get($color-palette, $palette);
+ @return map.get($palette-map, $shade);
+ }
+ @warn "Unknown color palette: #{$palette}";
+ @return null;
+}
+
+@mixin theme-colors($theme-name) {
+ &[data-theme='#{$theme-name}'] {
+ @content;
+ }
+}
+
+@mixin transition($properties: all, $duration: 0.3s, $timing: ease) {
+ transition: $properties $duration $timing;
+}
+
+@mixin truncate($lines: 1) {
+ @if $lines == 1 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ } @else {
+ display: -webkit-box;
+ -webkit-line-clamp: $lines;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+}
+
+@mixin center($direction: 'both') {
+ display: flex;
+
+ @if $direction == 'both' {
+ justify-content: center;
+ align-items: center;
+ } @else if $direction == 'horizontal' {
+ justify-content: center;
+ } @else if $direction == 'vertical' {
+ align-items: center;
+ }
+}
+
+@mixin aspect-ratio($width, $height) {
+ aspect-ratio: #{$width} / #{$height};
+
+ @supports not (aspect-ratio: 1 / 1) {
+ &::before {
+ content: '';
+ padding-top: percentage($height / $width);
+ float: left;
+ }
+
+ &::after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+ }
+}
+
+@mixin focus-ring($color: #06b6d4, $width: 3px, $offset: 2px) {
+ &:focus {
+ outline: none;
+ box-shadow: 0 0 0 $width rgba($color, 0.3);
+ }
+
+ &:focus-visible {
+ outline: $width solid rgba($color, 0.5);
+ outline-offset: $offset;
+ }
+}
+
+@mixin hide-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+@mixin show-scrollbar($track-color: rgba(255, 255, 255, 0.1), $thumb-color: rgba(255, 255, 255, 0.3)) {
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: $track-color;
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: $thumb-color;
+ border-radius: 4px;
+
+ &:hover {
+ background: color.adjust($thumb-color, $lightness: 10%);
+ }
+ }
+}
+
+@mixin visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+@mixin reset-button {
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ font: inherit;
+ color: inherit;
+ cursor: pointer;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+@mixin reset-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+$font-sizes: (
+ 'xs': 0.75rem,
+ 'sm': 0.875rem,
+ 'base': 1rem,
+ 'lg': 1.125rem,
+ 'xl': 1.25rem,
+ '2xl': 1.5rem,
+ '3xl': 1.875rem,
+ '4xl': 2.25rem,
+ '5xl': 3rem,
+);
+
+@function font-size($size) {
+ @return map.get($font-sizes, $size);
+}
+
+$font-weights: (
+ 'thin': 100,
+ 'light': 300,
+ 'normal': 400,
+ 'medium': 500,
+ 'semibold': 600,
+ 'bold': 700,
+ 'extrabold': 800,
+ 'black': 900,
+);
+
+@function font-weight($weight) {
+ @return map.get($font-weights, $weight);
+}
+
+$z-index-layers: (
+ 'base': 0,
+ 'dropdown': 1000,
+ 'sticky': 1020,
+ 'fixed': 1030,
+ 'modal-backdrop': 1040,
+ 'modal': 1050,
+ 'popover': 1060,
+ 'tooltip': 1070,
+);
+
+@function z-index($layer) {
+ @return map.get($z-index-layers, $layer);
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 0000000..9560a8c
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,72 @@
+$primary-color: #6366f1;
+$primary-light: #818cf8;
+$primary-dark: #4338ca;
+
+$secondary-color: #8b5cf6;
+$secondary-light: #a78bfa;
+$secondary-dark: #7c3aed;
+
+$accent-color: #06b6d4;
+$accent-light: #22d3ee;
+$accent-dark: #0891b2;
+
+$success-color: #10b981;
+$error-color: #ef4444;
+$warning-color: #f59e0b;
+$info-color: #3b82f6;
+
+$background-dark: #1a1d29;
+$background-card: #23273a;
+$background-elevated: #2d3348;
+$background-hover: rgba(255, 255, 255, 0.05);
+
+$text-primary: #e8eaed;
+$text-secondary: #a8abb5;
+$text-disabled: #6b6e7b;
+$text-inverse: #1a1d29;
+
+$border-color: rgba(255, 255, 255, 0.1);
+$border-color-strong: rgba(255, 255, 255, 0.2);
+$border-color-weak: rgba(255, 255, 255, 0.05);
+
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+$radius-sm: 0.25rem;
+$radius-md: 0.5rem;
+$radius-lg: 0.75rem;
+$radius-xl: 1rem;
+$radius-2xl: 1.5rem;
+$radius-full: 9999px;
+
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+$spacing-xl: 2rem;
+$spacing-2xl: 3rem;
+
+$font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+$font-family-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+$font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+
+$easing-linear: linear;
+$easing-ease: ease;
+$easing-ease-in: ease-in;
+$easing-ease-out: ease-out;
+$easing-ease-in-out: ease-in-out;
+$easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+$easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+$grid-columns: 12;
+$grid-gutter: 1rem;
+
+$container-max-width: 1280px;
+$container-padding: 1rem;
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..f6d43c7
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,573 @@
+@use './variables' as *;
+@use './utilities' as *;
+@use './animations';
+@use './material-ui-custom';
+
+.mui-enhanced {
+ font-family: $font-family-sans;
+ color: $text-primary;
+
+ * {
+ box-sizing: border-box;
+ }
+
+ code, pre {
+ font-family: $font-family-mono;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: $font-family-display;
+ }
+}
+
+.custom-mui-container {
+ max-width: $container-max-width;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: $container-padding;
+ padding-right: $container-padding;
+
+ @include respond-to('lg') {
+ padding-left: calc($container-padding * 2);
+ padding-right: calc($container-padding * 2);
+ }
+}
+
+.custom-mui-grid {
+ display: grid;
+ gap: $grid-gutter;
+
+ &--cols-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ &--cols-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ &--cols-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ &--cols-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+
+ &--cols-6 {
+ grid-template-columns: repeat(6, 1fr);
+ }
+
+ &--cols-12 {
+ grid-template-columns: repeat(12, 1fr);
+ }
+
+ &--responsive {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ }
+}
+
+.custom-mui-flex {
+ display: flex;
+
+ &--row {
+ flex-direction: row;
+ }
+
+ &--col {
+ flex-direction: column;
+ }
+
+ &--wrap {
+ flex-wrap: wrap;
+ }
+
+ &--center {
+ justify-content: center;
+ align-items: center;
+ }
+
+ &--between {
+ justify-content: space-between;
+ }
+
+ &--around {
+ justify-content: space-around;
+ }
+
+ &--evenly {
+ justify-content: space-evenly;
+ }
+
+ &--start {
+ justify-content: flex-start;
+ align-items: flex-start;
+ }
+
+ &--end {
+ justify-content: flex-end;
+ align-items: flex-end;
+ }
+}
+
+.custom-mui-stack {
+ display: flex;
+ flex-direction: column;
+ gap: spacing('4');
+
+ &--horizontal {
+ flex-direction: row;
+ }
+
+ &--gap-1 {
+ gap: spacing('1');
+ }
+
+ &--gap-2 {
+ gap: spacing('2');
+ }
+
+ &--gap-3 {
+ gap: spacing('3');
+ }
+
+ &--gap-4 {
+ gap: spacing('4');
+ }
+
+ &--gap-6 {
+ gap: spacing('6');
+ }
+
+ &--gap-8 {
+ gap: spacing('8');
+ }
+}
+
+.custom-mui-surface {
+ background: $background-card;
+ border: 1px solid $border-color;
+ border-radius: $radius-lg;
+ padding: spacing('6');
+
+ &--elevated {
+ box-shadow: $shadow-lg;
+ background: $background-elevated;
+ }
+
+ &--interactive {
+ cursor: pointer;
+ transition: all $transition-base;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: $shadow-xl;
+ border-color: $border-color-strong;
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: $shadow-md;
+ }
+ }
+}
+
+.custom-mui-modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.7);
+ backdrop-filter: blur(4px);
+ z-index: z-index('modal-backdrop');
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ animation: fade-in $transition-fast;
+}
+
+.custom-mui-drawer {
+ position: fixed;
+ background: $background-card;
+ z-index: z-index('modal');
+ box-shadow: $shadow-2xl;
+ overflow-y: auto;
+
+ &--left {
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 320px;
+ animation: slide-in-left $transition-base;
+ }
+
+ &--right {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ width: 320px;
+ animation: slide-in-right $transition-base;
+ }
+
+ &--top {
+ top: 0;
+ left: 0;
+ right: 0;
+ height: auto;
+ animation: slide-in-down $transition-base;
+ }
+
+ &--bottom {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: auto;
+ max-height: 90vh;
+ animation: slide-in-up $transition-base;
+ }
+}
+
+.custom-mui-navbar {
+ position: sticky;
+ top: 0;
+ z-index: z-index('sticky');
+ background: rgba($background-card, 0.9);
+ backdrop-filter: blur(12px);
+ border-bottom: 1px solid $border-color;
+ padding: spacing('4') spacing('6');
+
+ @include respond-below('md') {
+ padding: spacing('3') spacing('4');
+ }
+}
+
+.custom-mui-sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 280px;
+ background: $background-card;
+ border-right: 1px solid $border-color;
+ overflow-y: auto;
+ z-index: z-index('fixed');
+
+ @include respond-below('lg') {
+ transform: translateX(-100%);
+ transition: transform $transition-base;
+
+ &--open {
+ transform: translateX(0);
+ }
+ }
+}
+
+.custom-mui-footer {
+ background: $background-card;
+ border-top: 1px solid $border-color;
+ padding: spacing('8') spacing('6');
+ margin-top: auto;
+
+ @include respond-below('md') {
+ padding: spacing('6') spacing('4');
+ }
+}
+
+.custom-mui-breadcrumbs {
+ display: flex;
+ align-items: center;
+ gap: spacing('2');
+ flex-wrap: wrap;
+
+ &-item {
+ display: flex;
+ align-items: center;
+ color: $text-secondary;
+ font-size: font-size('sm');
+
+ &--active {
+ color: $text-primary;
+ font-weight: font-weight('medium');
+ }
+
+ &:not(:last-child)::after {
+ content: '/';
+ margin-left: spacing('2');
+ color: $text-disabled;
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ transition: color $transition-fast;
+
+ &:hover {
+ color: $accent-color;
+ }
+ }
+}
+
+.custom-mui-stepper {
+ display: flex;
+ align-items: center;
+
+ &-step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: spacing('2');
+ flex: 1;
+ position: relative;
+
+ &:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ top: 16px;
+ left: 50%;
+ width: 100%;
+ height: 2px;
+ background: $border-color;
+ }
+
+ &--completed::after {
+ background: $success-color;
+ }
+
+ &--active::after {
+ background: $primary-color;
+ }
+ }
+
+ &-icon {
+ @include center;
+ width: 32px;
+ height: 32px;
+ border-radius: $radius-full;
+ background: $background-elevated;
+ border: 2px solid $border-color;
+ color: $text-secondary;
+ font-size: font-size('sm');
+ font-weight: font-weight('semibold');
+ z-index: 1;
+
+ .custom-mui-stepper-step--completed & {
+ background: $success-color;
+ border-color: $success-color;
+ color: white;
+ }
+
+ .custom-mui-stepper-step--active & {
+ background: $primary-color;
+ border-color: $primary-color;
+ color: white;
+ }
+ }
+
+ &-label {
+ font-size: font-size('sm');
+ color: $text-secondary;
+ text-align: center;
+
+ .custom-mui-stepper-step--active & {
+ color: $text-primary;
+ font-weight: font-weight('medium');
+ }
+ }
+}
+
+.custom-mui-timeline {
+ position: relative;
+ padding-left: spacing('6');
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background: $border-color;
+ }
+
+ &-item {
+ position: relative;
+ padding-bottom: spacing('6');
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: -29px;
+ top: 4px;
+ width: 12px;
+ height: 12px;
+ border-radius: $radius-full;
+ background: $primary-color;
+ border: 2px solid $background-dark;
+ }
+
+ &--success::before {
+ background: $success-color;
+ }
+
+ &--error::before {
+ background: $error-color;
+ }
+
+ &--warning::before {
+ background: $warning-color;
+ }
+ }
+}
+
+.custom-mui-table {
+ width: 100%;
+ border-collapse: collapse;
+
+ thead {
+ background: $background-elevated;
+ border-bottom: 2px solid $border-color-strong;
+ }
+
+ th {
+ padding: spacing('3') spacing('4');
+ text-align: left;
+ font-weight: font-weight('semibold');
+ font-size: font-size('sm');
+ color: $text-secondary;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ td {
+ padding: spacing('3') spacing('4');
+ border-bottom: 1px solid $border-color;
+ }
+
+ tbody tr {
+ transition: background $transition-fast;
+
+ &:hover {
+ background: $background-hover;
+ }
+ }
+
+ &--striped tbody tr:nth-child(even) {
+ background: rgba(255, 255, 255, 0.02);
+ }
+
+ &--bordered {
+ border: 1px solid $border-color;
+
+ td, th {
+ border: 1px solid $border-color;
+ }
+ }
+}
+
+.custom-mui-list {
+ @include reset-list;
+
+ &-item {
+ padding: spacing('3') spacing('4');
+ transition: background $transition-fast;
+ border-radius: $radius-md;
+ cursor: pointer;
+
+ &:hover {
+ background: $background-hover;
+ }
+
+ &--active {
+ background: rgba($primary-color, 0.1);
+ color: $primary-color;
+ font-weight: font-weight('medium');
+ }
+
+ &--disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+ }
+
+ &--bordered &-item {
+ border: 1px solid $border-color;
+ margin-bottom: spacing('2');
+ }
+
+ &--divided &-item {
+ border-bottom: 1px solid $border-color;
+ border-radius: 0;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+}
+
+.custom-mui-code-block {
+ background: $background-elevated;
+ border: 1px solid $border-color;
+ border-radius: $radius-md;
+ padding: spacing('4');
+ overflow-x: auto;
+ font-family: $font-family-mono;
+ font-size: font-size('sm');
+
+ @include show-scrollbar;
+
+ pre {
+ margin: 0;
+ padding: 0;
+ }
+
+ code {
+ color: $text-primary;
+ font-family: inherit;
+ }
+}
+
+.custom-mui-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: spacing('1');
+ padding: spacing('1') spacing('2');
+ border-radius: $radius-md;
+ font-size: font-size('xs');
+ font-weight: font-weight('medium');
+ background: rgba($primary-color, 0.15);
+ color: $primary-color;
+
+ &--sm {
+ padding: 2px spacing('1');
+ font-size: 10px;
+ }
+
+ &--lg {
+ padding: spacing('2') spacing('3');
+ font-size: font-size('sm');
+ }
+}
+
+.utility-text {
+ &-truncate {
+ @include truncate(1);
+ }
+
+ &-truncate-2 {
+ @include truncate(2);
+ }
+
+ &-truncate-3 {
+ @include truncate(3);
+ }
+}
+
+.utility-visually-hidden {
+ @include visually-hidden;
+}
+
+.utility-focus-ring {
+ @include focus-ring;
+}
diff --git a/src/styles/material-ui-custom.scss b/src/styles/material-ui-custom.scss
new file mode 100644
index 0000000..c1e277e
--- /dev/null
+++ b/src/styles/material-ui-custom.scss
@@ -0,0 +1,532 @@
+@use 'sass:color';
+@use 'sass:map';
+
+$primary-color: #6366f1;
+$secondary-color: #8b5cf6;
+$accent-color: #06b6d4;
+$background-dark: #1a1d29;
+$background-card: #23273a;
+$text-light: #e8eaed;
+
+@mixin elevation($level) {
+ @if $level == 1 {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ } @else if $level == 2 {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ } @else if $level == 3 {
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ } @else if $level == 4 {
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+ }
+}
+
+@mixin responsive-padding($base-padding) {
+ padding: $base-padding;
+
+ @media (max-width: 768px) {
+ padding: $base-padding * 0.75;
+ }
+
+ @media (max-width: 480px) {
+ padding: $base-padding * 0.5;
+ }
+}
+
+@mixin glassmorphism($blur: 10px, $opacity: 0.1) {
+ background: rgba(255, 255, 255, $opacity);
+ backdrop-filter: blur($blur);
+ -webkit-backdrop-filter: blur($blur);
+}
+
+@mixin gradient-background($start-color, $end-color, $angle: 135deg) {
+ background: linear-gradient($angle, $start-color, $end-color);
+}
+
+.mui-custom {
+ &-card {
+ @include elevation(2);
+ border-radius: 12px;
+ background-color: $background-card;
+ transition: all 0.3s ease;
+
+ &:hover {
+ @include elevation(3);
+ transform: translateY(-2px);
+ }
+
+ &--gradient {
+ @include gradient-background($primary-color, $secondary-color);
+ color: white;
+ }
+
+ &--glass {
+ @include glassmorphism(16px, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ &-button {
+ @include responsive-padding(12px);
+ border-radius: 8px;
+ font-weight: 600;
+ text-transform: none;
+ transition: all 0.2s ease;
+
+ &--primary {
+ background: $primary-color;
+ color: white;
+
+ &:hover {
+ background: color.adjust($primary-color, $lightness: 10%);
+ box-shadow: 0 4px 12px rgba($primary-color, 0.4);
+ }
+
+ &:active {
+ transform: scale(0.98);
+ }
+ }
+
+ &--secondary {
+ background: $secondary-color;
+ color: white;
+
+ &:hover {
+ background: color.adjust($secondary-color, $lightness: 10%);
+ box-shadow: 0 4px 12px rgba($secondary-color, 0.4);
+ }
+ }
+
+ &--accent {
+ background: $accent-color;
+ color: $background-dark;
+
+ &:hover {
+ background: color.adjust($accent-color, $lightness: 10%);
+ box-shadow: 0 4px 12px rgba($accent-color, 0.4);
+ }
+ }
+
+ &--outline {
+ background: transparent;
+ border: 2px solid $primary-color;
+ color: $primary-color;
+
+ &:hover {
+ background: rgba($primary-color, 0.1);
+ }
+ }
+
+ &--ghost {
+ background: transparent;
+ color: $text-light;
+
+ &:hover {
+ background: rgba($text-light, 0.1);
+ }
+ }
+ }
+
+ &-input {
+ @include responsive-padding(12px);
+ border-radius: 8px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: $text-light;
+ transition: all 0.2s ease;
+
+ &:focus {
+ outline: none;
+ border-color: $accent-color;
+ box-shadow: 0 0 0 3px rgba($accent-color, 0.2);
+ }
+
+ &::placeholder {
+ color: rgba($text-light, 0.5);
+ }
+
+ &--error {
+ border-color: #ef4444;
+
+ &:focus {
+ box-shadow: 0 0 0 3px rgba(#ef4444, 0.2);
+ }
+ }
+
+ &--success {
+ border-color: #10b981;
+
+ &:focus {
+ box-shadow: 0 0 0 3px rgba(#10b981, 0.2);
+ }
+ }
+ }
+
+ &-chip {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 12px;
+ border-radius: 16px;
+ font-size: 12px;
+ font-weight: 500;
+
+ &--primary {
+ background: rgba($primary-color, 0.2);
+ color: $primary-color;
+ border: 1px solid rgba($primary-color, 0.3);
+ }
+
+ &--secondary {
+ background: rgba($secondary-color, 0.2);
+ color: $secondary-color;
+ border: 1px solid rgba($secondary-color, 0.3);
+ }
+
+ &--accent {
+ background: rgba($accent-color, 0.2);
+ color: $accent-color;
+ border: 1px solid rgba($accent-color, 0.3);
+ }
+
+ &--success {
+ background: rgba(#10b981, 0.2);
+ color: #10b981;
+ border: 1px solid rgba(#10b981, 0.3);
+ }
+
+ &--error {
+ background: rgba(#ef4444, 0.2);
+ color: #ef4444;
+ border: 1px solid rgba(#ef4444, 0.3);
+ }
+
+ &--warning {
+ background: rgba(#f59e0b, 0.2);
+ color: #f59e0b;
+ border: 1px solid rgba(#f59e0b, 0.3);
+ }
+ }
+
+ &-panel {
+ @include responsive-padding(24px);
+ @include elevation(1);
+ border-radius: 12px;
+ background: $background-card;
+
+ &--with-header {
+ padding: 0;
+
+ .panel-header {
+ @include responsive-padding(20px);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ font-weight: 600;
+ font-size: 18px;
+ }
+
+ .panel-body {
+ @include responsive-padding(24px);
+ }
+
+ .panel-footer {
+ @include responsive-padding(20px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+
+ &-dialog {
+ .dialog-overlay {
+ background: rgba(0, 0, 0, 0.7);
+ backdrop-filter: blur(4px);
+ }
+
+ .dialog-content {
+ @include elevation(4);
+ border-radius: 16px;
+ background: $background-card;
+ max-width: 600px;
+ animation: dialog-appear 0.3s ease;
+ }
+
+ @keyframes dialog-appear {
+ from {
+ opacity: 0;
+ transform: scale(0.95) translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+ }
+ }
+
+ &-tooltip {
+ @include elevation(2);
+ padding: 8px 12px;
+ border-radius: 6px;
+ background: $background-card;
+ color: $text-light;
+ font-size: 12px;
+ max-width: 200px;
+ animation: tooltip-appear 0.2s ease;
+
+ @keyframes tooltip-appear {
+ from {
+ opacity: 0;
+ transform: translateY(4px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+ }
+
+ &-avatar {
+ border-radius: 50%;
+ overflow: hidden;
+
+ &--small {
+ width: 32px;
+ height: 32px;
+ }
+
+ &--medium {
+ width: 48px;
+ height: 48px;
+ }
+
+ &--large {
+ width: 64px;
+ height: 64px;
+ }
+
+ &--with-ring {
+ box-shadow: 0 0 0 3px $accent-color;
+ }
+ }
+
+ &-badge {
+ position: relative;
+ display: inline-flex;
+
+ .badge-indicator {
+ position: absolute;
+ top: 0;
+ right: 0;
+ transform: translate(50%, -50%);
+ min-width: 20px;
+ height: 20px;
+ padding: 0 6px;
+ border-radius: 10px;
+ background: #ef4444;
+ color: white;
+ font-size: 11px;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 2px solid $background-dark;
+ }
+
+ &--dot {
+ .badge-indicator {
+ min-width: 10px;
+ width: 10px;
+ height: 10px;
+ padding: 0;
+ border-radius: 50%;
+ }
+ }
+ }
+
+ &-skeleton {
+ background: linear-gradient(
+ 90deg,
+ rgba(255, 255, 255, 0.05) 25%,
+ rgba(255, 255, 255, 0.1) 50%,
+ rgba(255, 255, 255, 0.05) 75%
+ );
+ background-size: 200% 100%;
+ animation: skeleton-shimmer 1.5s infinite;
+ border-radius: 4px;
+
+ @keyframes skeleton-shimmer {
+ 0% {
+ background-position: 200% 0;
+ }
+ 100% {
+ background-position: -200% 0;
+ }
+ }
+
+ &--text {
+ height: 16px;
+ margin-bottom: 8px;
+ }
+
+ &--circle {
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+ }
+
+ &--rect {
+ height: 120px;
+ }
+ }
+
+ &-progress {
+ width: 100%;
+ height: 4px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 2px;
+ overflow: hidden;
+
+ .progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, $primary-color, $accent-color);
+ transition: width 0.3s ease;
+ }
+
+ &--indeterminate {
+ .progress-bar {
+ width: 40%;
+ animation: progress-indeterminate 1.5s infinite;
+ }
+ }
+
+ @keyframes progress-indeterminate {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(350%);
+ }
+ }
+ }
+
+ &-divider {
+ height: 1px;
+ background: rgba(255, 255, 255, 0.1);
+ margin: 16px 0;
+
+ &--vertical {
+ width: 1px;
+ height: auto;
+ margin: 0 16px;
+ }
+
+ &--with-text {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ &::before,
+ &::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: rgba(255, 255, 255, 0.1);
+ }
+ }
+ }
+
+ &-accordion {
+ border-radius: 8px;
+ overflow: hidden;
+
+ &-item {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ &-trigger {
+ @include responsive-padding(16px);
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: transparent;
+ border: none;
+ color: $text-light;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background 0.2s ease;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.05);
+ }
+
+ .accordion-icon {
+ transition: transform 0.3s ease;
+ }
+
+ &[data-state='open'] .accordion-icon {
+ transform: rotate(180deg);
+ }
+ }
+
+ &-content {
+ @include responsive-padding(16px);
+ animation: accordion-slide-down 0.3s ease;
+
+ &[data-state='closed'] {
+ animation: accordion-slide-up 0.3s ease;
+ }
+ }
+
+ @keyframes accordion-slide-down {
+ from {
+ height: 0;
+ opacity: 0;
+ }
+ to {
+ height: var(--radix-accordion-content-height);
+ opacity: 1;
+ }
+ }
+
+ @keyframes accordion-slide-up {
+ from {
+ height: var(--radix-accordion-content-height);
+ opacity: 1;
+ }
+ to {
+ height: 0;
+ opacity: 0;
+ }
+ }
+ }
+}
+
+.custom-scrollbar {
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 4px;
+
+ &:hover {
+ background: rgba(255, 255, 255, 0.3);
+ }
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}