mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-21 07:27:20 +00:00
b3c308b2c8
- ModuleManager: Central tracking for installed marketplace modules - DataAnalyzerWidget: Real-time CPU/RAM/Battery/Storage widget (unlocked by Data Analyzer module) - BottomNavBar: Navigation bar for Projects/Chat/Marketplace/Settings - RootShell: Real root command execution utility - TerminalActivity: Full root shell with neofetch, sysinfo, real Linux commands - Terminal Pro module: Adds aliases (ll, la, h), command history - ArcadeActivity + SnakeGame: Pixel Arcade module unlocks retro games - fade_in/fade_out animations for smooth transitions
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
/**
|
|
* AeThex Design System - Spacing & Layout Utilities
|
|
* Consistent spacing tokens across the entire application
|
|
*/
|
|
|
|
export const SPACING = {
|
|
// Container Classes
|
|
CONTAINER: "container mx-auto px-4 sm:px-6 lg:px-8",
|
|
|
|
// Page Containers with vertical padding
|
|
PAGE_CONTAINER: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12",
|
|
|
|
// Max Widths
|
|
MAX_WIDTH: {
|
|
full: "max-w-7xl", // Main app pages (1280px)
|
|
content: "max-w-6xl", // Content pages (1152px)
|
|
article: "max-w-4xl", // Articles, docs (896px)
|
|
card: "max-w-2xl", // Centered cards (672px)
|
|
},
|
|
|
|
// Vertical Spacing (space-y-*)
|
|
VERTICAL: {
|
|
xs: "space-y-2", // 8px - Tight grouped items
|
|
sm: "space-y-4", // 16px - Related content
|
|
md: "space-y-6", // 24px - Card sections
|
|
lg: "space-y-8", // 32px - Page sections
|
|
xl: "space-y-12", // 48px - Major sections
|
|
"2xl": "space-y-16", // 64px - Section breaks
|
|
},
|
|
|
|
// Horizontal Gaps
|
|
GAP: {
|
|
xs: "gap-2", // 8px - Badges, tags
|
|
sm: "gap-4", // 16px - Buttons, forms
|
|
md: "gap-6", // 24px - Card grids
|
|
lg: "gap-8", // 32px - Wide layouts
|
|
},
|
|
|
|
// Card Padding
|
|
CARD: {
|
|
sm: "p-4 sm:p-6",
|
|
md: "p-6 lg:p-8",
|
|
lg: "p-8 lg:p-12",
|
|
},
|
|
} as const;
|
|
|
|
/**
|
|
* Utility functions for building class strings
|
|
*/
|
|
export const buildPageContainer = (maxWidth: keyof typeof SPACING.MAX_WIDTH = "full") => {
|
|
return `${SPACING.PAGE_CONTAINER} ${SPACING.MAX_WIDTH[maxWidth]}`;
|
|
};
|
|
|
|
export const buildContainer = (maxWidth: keyof typeof SPACING.MAX_WIDTH = "full") => {
|
|
return `${SPACING.CONTAINER} ${SPACING.MAX_WIDTH[maxWidth]}`;
|
|
};
|