|
2 | 2 | // Project: ProX Programming Language (ProXPL) |
3 | 3 | // Author: ProgrammerKR |
4 | 4 | // Created: 2026-02-26 |
5 | | -// Description: UI Library marker file. |
| 5 | +// Description: ProXPL UI Standard Library (UI Kit) |
6 | 6 | // -------------------------------------------------- |
7 | 7 |
|
8 | | -// This file serves as a marker for the built-in UI library. |
9 | | -// Importing this library enables UI keywords and components. |
| 8 | +// --- Design System Tokens --- |
| 9 | + |
| 10 | +// Colors (ProX Design System) |
| 11 | +const COLOR_PRIMARY = "#3b82f6"; |
| 12 | +const COLOR_SECONDARY = "#10b981"; |
| 13 | +const COLOR_DANGER = "#ef4444"; |
| 14 | +const COLOR_WARNING = "#f59e0b"; |
| 15 | +const COLOR_INFO = "#3b82f6"; |
| 16 | +const COLOR_DARK = "#1f2937"; |
| 17 | +const COLOR_LIGHT = "#f3f4f6"; |
| 18 | +const COLOR_WHITE = "#ffffff"; |
| 19 | +const COLOR_BLACK = "#000000"; |
| 20 | + |
| 21 | +// Gradients |
| 22 | +const GRADIENT_PRIMARY = "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"; |
| 23 | +const GRADIENT_DARK = "linear-gradient(135deg, #1f2937 0%, #111827 100%)"; |
| 24 | +const GRADIENT_SUCCESS = "linear-gradient(135deg, #10b981 0%, #059669 100%)"; |
| 25 | + |
| 26 | +// Typography |
| 27 | +const FONT_SANS = "Inter, system-ui, sans-serif"; |
| 28 | +const FONT_MONO = "Fira Code, monospace"; |
| 29 | +const TEXT_XS = "0.75rem"; |
| 30 | +const TEXT_SM = "0.875rem"; |
| 31 | +const TEXT_BASE = "1rem"; |
| 32 | +const TEXT_LG = "1.125rem"; |
| 33 | +const TEXT_XL = "1.25rem"; |
| 34 | +const TEXT_2XL = "1.5rem"; |
| 35 | +const TEXT_3XL = "1.875rem"; |
| 36 | + |
| 37 | +// Spacing (Utility Classes) |
| 38 | +const P_0 = "padding: 0"; |
| 39 | +const P_1 = "padding: 0.25rem"; |
| 40 | +const P_2 = "padding: 0.5rem"; |
| 41 | +const P_4 = "padding: 1rem"; |
| 42 | +const P_8 = "padding: 2rem"; |
| 43 | + |
| 44 | +const M_0 = "margin: 0"; |
| 45 | +const M_1 = "margin: 0.25rem"; |
| 46 | +const M_2 = "margin: 0.5rem"; |
| 47 | +const M_4 = "margin: 1rem"; |
| 48 | +const M_auto = "margin: auto"; |
| 49 | + |
| 50 | +// --- Styled Component Primitives (CSS Class Strings) --- |
| 51 | + |
| 52 | +// Layouts |
| 53 | +const LAYOUT_CENTER = "display: flex; justify-content: center; align-items: center;"; |
| 54 | +const LAYOUT_COL = "display: flex; flex-direction: column;"; |
| 55 | +const LAYOUT_ROW = "display: flex; flex-direction: row;"; |
| 56 | +const LAYOUT_GRID = "display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"; |
| 57 | + |
| 58 | +// Buttons |
| 59 | +const BTN_BASE = "px-4 py-2 rounded-lg font-medium transition-all transform hover:scale-105 active:scale-95 cursor-pointer"; |
| 60 | +const BTN_PRIMARY = "bg-blue-600 text-white hover:bg-blue-700 shadow-lg"; |
| 61 | +const BTN_SECONDARY = "bg-green-600 text-white hover:bg-green-700 shadow-lg"; |
| 62 | +const BTN_OUTLINE = "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"; |
| 63 | +const BTN_GHOST = "text-gray-600 hover:bg-gray-100"; |
| 64 | + |
| 65 | +// Inputs |
| 66 | +const INPUT_BASE = "w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 transition-all outline-none"; |
| 67 | +const INPUT_ERROR = "border-red-500 focus:border-red-600"; |
| 68 | +const INPUT_SUCCESS = "border-green-500 focus:border-green-600"; |
| 69 | + |
| 70 | +// Cards |
| 71 | +const CARD_BASE = "bg-white p-6 rounded-2xl shadow-xl border border-gray-100 hover:shadow-2xl transition-shadow"; |
| 72 | +const CARD_GLASS = "backdrop-blur-xl bg-white/30 border border-white/20 shadow-2xl rounded-2xl p-6"; |
| 73 | + |
| 74 | +// Navigation |
| 75 | +const NAV_BASE = "flex items-center justify-between px-8 py-4 bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50"; |
| 76 | +const NAV_LINK = "text-gray-600 hover:text-blue-600 font-medium transition-colors"; |
| 77 | + |
| 78 | +// --- Animation Keyframes (CSS Snippets) --- |
| 79 | + |
| 80 | +const ANIM_FADE_IN = "@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } animation: fadeIn 0.5s ease-out;"; |
| 81 | +const ANIM_SLIDE_UP = "@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } animation: slideUp 0.5s ease-out;"; |
| 82 | +const ANIM_BOUNCE = "@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } animation: bounce 1s infinite;"; |
| 83 | +const ANIM_SPIN = "@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } animation: spin 1s linear infinite;"; |
| 84 | + |
| 85 | +// --- Shadow Tiers --- |
| 86 | +const SHADOW_SM = "box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"; |
| 87 | +const SHADOW_MD = "box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);"; |
| 88 | +const SHADOW_LG = "box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);"; |
| 89 | +const SHADOW_XL = "box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);"; |
| 90 | +const SHADOW_INNER = "box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);"; |
| 91 | + |
| 92 | +// --- Responsive Breakpoints (Helper Strings) --- |
| 93 | +const SCREEN_SM = "640px"; |
| 94 | +const SCREEN_MD = "768px"; |
| 95 | +const SCREEN_LG = "1024px"; |
| 96 | +const SCREEN_XL = "1280px"; |
| 97 | + |
| 98 | +// --- Layout Presets --- |
| 99 | +const CENTER_FULL = "display: flex; justify-content: center; align-items: center; min-height: 100vh; background: " + COLOR_LIGHT; |
| 100 | +const GRID_DASHBOARD = "display: grid; grid-template-columns: 250px 1fr; min-height: 100vh;"; |
| 101 | +const FLEX_BETWEEN = "display: flex; justify-content: space-between; align-items: center;"; |
| 102 | + |
| 103 | +// --- Global Theme Object --- |
| 104 | +const THEME_DARK = "background-color: " + COLOR_DARK + "; color: " + COLOR_WHITE + ";"; |
| 105 | +const THEME_LIGHT = "background-color: " + COLOR_WHITE + "; color: " + COLOR_BLACK + ";"; |
| 106 | + |
| 107 | +// --- More CSS Utilities --- |
| 108 | +const CURSOR_POINTER = "cursor: pointer;"; |
| 109 | +const SELECT_NONE = "user-select: none;"; |
| 110 | +const OVERFLOW_HIDDEN = "overflow: hidden;"; |
| 111 | +const BORDER_B = "border-bottom: 1px solid " + COLOR_LIGHT; |
| 112 | +const TRANSITION_FAST = "transition: all 0.2s ease-in-out;"; |
| 113 | +const TRANSITION_NORMAL = "transition: all 0.3s ease-in-out;"; |
| 114 | + |
| 115 | +// --- Standard UI Components (Templates) --- |
| 116 | + |
| 117 | +// Note: These can be used in className props |
| 118 | +const UTIL_HIDDEN = "display: none;"; |
| 119 | +const UTIL_FLEX = "display: flex;"; |
| 120 | +const UTIL_W_FULL = "width: 100%;"; |
| 121 | +const UTIL_H_FULL = "height: 100%;"; |
| 122 | +const UTIL_ROUNDED_FULL = "border-radius: 9999px;"; |
| 123 | + |
| 124 | +// --- Standard UI Components (Templates) --- |
| 125 | + |
| 126 | +/* |
| 127 | +Usage Example: |
| 128 | +use UI; |
| 129 | + |
| 130 | +App Main { |
| 131 | + State userLoggedIn = false; |
| 132 | + |
| 133 | + Container(style: CARD_BASE) { |
| 134 | + Header() { |
| 135 | + Icon(className: "fas fa-user", style: "color: " + COLOR_PRIMARY); |
| 136 | + Text(style: "font-weight: bold; margin-left: 0.5rem") { "Account Details" } |
| 137 | + } |
| 138 | + |
| 139 | + Section(style: "margin-top: 1rem") { |
| 140 | + Input(placeholder: "Username", style: INPUT_BASE); |
| 141 | + Button(style: BTN_BASE + " " + BTN_PRIMARY) { "Login" } |
| 142 | + } |
| 143 | + |
| 144 | + Footer() { |
| 145 | + Link(href: "#", style: NAV_LINK) { "Forgot Password?" } |
| 146 | + } |
| 147 | + } |
| 148 | +} |
| 149 | +*/ |
0 commit comments