From 2e68403db09a21ff6592b47ef8315a3c3875e581 Mon Sep 17 00:00:00 2001 From: sean-eskerium Date: Thu, 9 Oct 2025 09:51:50 -0400 Subject: [PATCH] update styles of the primitives. --- PRPs/ai_docs/UI_STANDARDS.md | 10 ++++ .../src/features/ui/primitives/data-card.tsx | 55 ++++++------------- .../features/ui/primitives/grouped-card.tsx | 6 +- .../src/features/ui/primitives/styles.ts | 25 ++++++--- 4 files changed, 49 insertions(+), 47 deletions(-) diff --git a/PRPs/ai_docs/UI_STANDARDS.md b/PRPs/ai_docs/UI_STANDARDS.md index f7685041..fc63c135 100644 --- a/PRPs/ai_docs/UI_STANDARDS.md +++ b/PRPs/ai_docs/UI_STANDARDS.md @@ -371,6 +371,7 @@ export function Button({ variant = "primary", className = "", ...props }) { - **Use PillNavigation component** for tab navigation - NEVER create custom pill navigation. - **Use Radix UI primitives** for all interactive elements (Select, Checkbox, RadioGroup, Dialog, Popover, etc.). - **Import from styles.ts** when you need pre-defined class objects - this is the design system's foundation. +- **CRITICAL: Primitives MUST use styles.ts, not define their own blur/transparency classes**. Import `glassCard.blur` and `glassCard.transparency` instead of creating inline `const blurClasses` or hardcoding `backdrop-blur-md`. - **Centralize repeated patterns** - if you find yourself copying the same class strings 3+ times, create a wrapper component. ### The styles.ts Design System @@ -766,6 +767,15 @@ grep -rn "import.*from.*primitives" [path] --include="*.tsx" -L **Rule**: Section 0, Section 5 - Use shared component primitives **Fix**: Import and use Card, PillNavigation, Radix primitives +**Primitives Defining Own Blur/Transparency (Should Use styles.ts)** +```bash +# Find primitives with hardcoded blur/transparency definitions +grep -rn "const blurClasses\|const transparencyClasses" [path]/features/ui/primitives --include="*.tsx" +grep -rn "backdrop-blur-sm\|backdrop-blur-md\|backdrop-blur-lg" [path]/features/ui/primitives --include="*.tsx" +``` +**Rule**: Section 5 - Primitives MUST use glassCard.blur and glassCard.transparency from styles.ts +**Fix**: Import `glassCard` from styles.ts and use `glassCard.blur[blur]` and `glassCard.transparency[transparency]` + **Missing min-w-0 on Flex Children (CRITICAL for scroll containers)** ```bash # Find flex-1 without min-w-0 (manual review for children containing scroll containers) diff --git a/archon-ui-main/src/features/ui/primitives/data-card.tsx b/archon-ui-main/src/features/ui/primitives/data-card.tsx index b52e6a0d..9765b073 100644 --- a/archon-ui-main/src/features/ui/primitives/data-card.tsx +++ b/archon-ui-main/src/features/ui/primitives/data-card.tsx @@ -18,33 +18,6 @@ interface DataCardHeaderProps extends React.HTMLAttributes {} interface DataCardContentProps extends React.HTMLAttributes {} interface DataCardFooterProps extends React.HTMLAttributes {} -// Edge color mappings for edge-lit cards -const edgeColors = { - purple: { solid: 'bg-purple-500', gradient: 'from-purple-500/40', border: 'border-purple-500/30', bg: 'bg-gradient-to-br from-purple-500/15 to-purple-600/5' }, - blue: { solid: 'bg-blue-500', gradient: 'from-blue-500/40', border: 'border-blue-500/30', bg: 'bg-gradient-to-br from-blue-500/15 to-blue-600/5' }, - cyan: { solid: 'bg-cyan-500', gradient: 'from-cyan-500/40', border: 'border-cyan-500/30', bg: 'bg-gradient-to-br from-cyan-500/15 to-cyan-600/5' }, - green: { solid: 'bg-green-500', gradient: 'from-green-500/40', border: 'border-green-500/30', bg: 'bg-gradient-to-br from-green-500/15 to-green-600/5' }, - orange: { solid: 'bg-orange-500', gradient: 'from-orange-500/40', border: 'border-orange-500/30', bg: 'bg-gradient-to-br from-orange-500/15 to-orange-600/5' }, - pink: { solid: 'bg-pink-500', gradient: 'from-pink-500/40', border: 'border-pink-500/30', bg: 'bg-gradient-to-br from-pink-500/15 to-pink-600/5' }, - red: { solid: 'bg-red-500', gradient: 'from-red-500/40', border: 'border-red-500/30', bg: 'bg-gradient-to-br from-red-500/15 to-red-600/5' }, -}; - -const blurClasses = { - none: "backdrop-blur-none", - sm: "backdrop-blur-sm", - md: "backdrop-blur-md", - lg: "backdrop-blur-lg", - xl: "backdrop-blur-xl", -}; - -const transparencyClasses = { - clear: "bg-white/[0.02] dark:bg-white/[0.01]", - light: "bg-white/[0.08] dark:bg-white/[0.05]", - medium: "bg-white/[0.15] dark:bg-white/[0.08]", - frosted: "bg-white/[0.40] dark:bg-black/[0.40]", - solid: "bg-white/[0.90] dark:bg-black/[0.95]", -}; - export const DataCard = React.forwardRef( ({ className, @@ -57,29 +30,37 @@ export const DataCard = React.forwardRef( ...props }, ref) => { const hasEdge = edgePosition !== 'none'; - const edgeStyle = hasEdge ? edgeColors[edgeColor] : null; if (hasEdge && edgePosition === 'top') { return (
- {/* Top edge light */} -
+ {/* Top edge light with glow */} +
{/* Glow bleeding down */} -
+
{/* Content wrapper with flex layout */}
{children}
@@ -93,8 +74,8 @@ export const DataCard = React.forwardRef( ref={ref} className={cn( "relative rounded-xl overflow-hidden border border-gray-300/20 dark:border-white/10 min-h-[240px]", - blurClasses[blur], - transparencyClasses[transparency], + glassCard.blur[blur], + glassCard.transparency[transparency], "flex flex-col", className )} diff --git a/archon-ui-main/src/features/ui/primitives/grouped-card.tsx b/archon-ui-main/src/features/ui/primitives/grouped-card.tsx index fb26d56f..bb168d21 100644 --- a/archon-ui-main/src/features/ui/primitives/grouped-card.tsx +++ b/archon-ui-main/src/features/ui/primitives/grouped-card.tsx @@ -31,8 +31,8 @@ export const GroupedCard = React.forwardRef( {visibleCards.map((card, index) => { const isTop = index === 0; const zIndex = cardCount - index; - const scale = 1 - (index * 0.05); // 5% smaller per card - const yOffset = index * 8; // 8px raised per card + const scale = 1 - (index * 0.03); // 3% smaller per card + const yOffset = index * 16; // 16px raised per card to show edge lights const opacity = 1 - (index * 0.15); // Fade background cards slightly return ( @@ -64,7 +64,7 @@ export const GroupedCard = React.forwardRef( ); })} {/* Spacer to maintain height based on bottom card */} -
+

{visibleCards[0]?.title || "Placeholder"}

diff --git a/archon-ui-main/src/features/ui/primitives/styles.ts b/archon-ui-main/src/features/ui/primitives/styles.ts index f24dcc11..3bcc5286 100644 --- a/archon-ui-main/src/features/ui/primitives/styles.ts +++ b/archon-ui-main/src/features/ui/primitives/styles.ts @@ -123,15 +123,15 @@ export const glassCard = { // Base glass card (true transparency) - NO blur here, controlled separately base: "relative rounded-lg overflow-hidden border transition-all duration-300", - // Blur intensity levels - EXTREMELY SUBTLE for true glass + // Blur intensity levels - Visible glass effect blur: { none: "backdrop-blur-none", // No blur (0px) - sm: "backdrop-blur-[0.5px]", // Barely perceptible - md: "backdrop-blur-[1px]", // Very subtle hint - lg: "backdrop-blur-[2px]", // Light glass effect - xl: "backdrop-blur-[3px]", // Standard glass - "2xl": "backdrop-blur-[5px]", // Noticeable glass - "3xl": "backdrop-blur-[8px]" // Maximum (what was "standard" before) + sm: "backdrop-blur-sm", // 4px - Light glass + md: "backdrop-blur-md", // 12px - Medium glass (visible blur) + lg: "backdrop-blur-lg", // 16px - Strong glass + xl: "backdrop-blur-xl", // 24px - Very strong glass + "2xl": "backdrop-blur-2xl", // 40px - Heavy glass + "3xl": "backdrop-blur-3xl" // 64px - Maximum glass }, // Glass transparency levels - Theme-aware for better color visibility @@ -143,6 +143,17 @@ export const glassCard = { solid: "bg-white/[0.90] dark:bg-black/[0.95]" // Solid - opaque }, + // Edge color mappings for DataCard (edge-lit cards with colored gradients) + edgeColors: { + purple: { solid: 'bg-purple-500', gradient: 'from-purple-500/40', border: 'border-purple-500/30', bg: 'bg-gradient-to-br from-purple-500/8 to-purple-600/3' }, + blue: { solid: 'bg-blue-500', gradient: 'from-blue-500/40', border: 'border-blue-500/30', bg: 'bg-gradient-to-br from-blue-500/8 to-blue-600/3' }, + cyan: { solid: 'bg-cyan-500', gradient: 'from-cyan-500/40', border: 'border-cyan-500/30', bg: 'bg-gradient-to-br from-cyan-500/8 to-cyan-600/3' }, + green: { solid: 'bg-green-500', gradient: 'from-green-500/40', border: 'border-green-500/30', bg: 'bg-gradient-to-br from-green-500/8 to-green-600/3' }, + orange: { solid: 'bg-orange-500', gradient: 'from-orange-500/40', border: 'border-orange-500/30', bg: 'bg-gradient-to-br from-orange-500/8 to-orange-600/3' }, + pink: { solid: 'bg-pink-500', gradient: 'from-pink-500/40', border: 'border-pink-500/30', bg: 'bg-gradient-to-br from-pink-500/8 to-pink-600/3' }, + red: { solid: 'bg-red-500', gradient: 'from-red-500/40', border: 'border-red-500/30', bg: 'bg-gradient-to-br from-red-500/8 to-red-600/3' }, + }, + // Colored glass tints - BRIGHT NEON COLORS with higher opacity tints: { none: "",