mirrors/archon
1
0
Fork 0
mirror of https://github.com/coleam00/Archon.git synced 2025-12-24 02:39:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

Another round of Coderabbit feedback.

Browse Source
This commit is contained in:
sean-eskerium
2025-10-09 20:40:47 -04:00
parent c3f42504ea
commit ad82f6e9f6
6 changed files with 108 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
archon-ui-main/src/features/projects/tasks/utils/task-styles.tsx
View File

@@ -39,7 +39,7 @@ export const getOrderColor = (order: number) => {
if (order <= 3) return "bg-rose-500";
if (order <= 6) return "bg-orange-500";
if (order <= 10) return "bg-blue-500";
return "bg-emerald-500";
return "bg-green-500";
};
// Get glow effect based on task priority/order
@@ -47,7 +47,7 @@ export const getOrderGlow = (order: number) => {
if (order <= 3) return "shadow-[0_0_10px_rgba(244,63,94,0.7)]";
if (order <= 6) return "shadow-[0_0_10px_rgba(249,115,22,0.7)]";
if (order <= 10) return "shadow-[0_0_10px_rgba(59,130,246,0.7)]";
return "shadow-[0_0_10px_rgba(16,185,129,0.7)]";
return "shadow-[0_0_10px_rgba(34,197,94,0.7)]";
};
// Get column header color based on status
@@ -74,6 +74,6 @@ export const getColumnGlow = (status: "todo" | "doing" | "review" | "done") => {
case "review":
return "bg-purple-500/30 shadow-[0_0_10px_2px_rgba(168,85,247,0.2)]";
case "done":
return "bg-green-500/30 shadow-[0_0_10px_2px_rgba(16,185,129,0.2)]";
return "bg-green-500/30 shadow-[0_0_10px_2px_rgba(34,197,94,0.2)]";
}
};

72
archon-ui-main/src/features/style-guide/layouts/ProjectsLayoutExample.tsx
View File

@@ -568,32 +568,52 @@ const ProjectCardExample = ({
{/* Action icons */}
<div className="flex items-center gap-2">
<button
type="button"
onClick={(e) => e.stopPropagation()}
className="p-1.5 rounded-md hover:bg-red-500/10 text-gray-500 hover:text-red-500 transition-colors"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
<button
type="button"
onClick={(e) => e.stopPropagation()}
className={cn(
"p-1.5 rounded-md transition-colors",
project.pinned
? "bg-purple-500/10 text-purple-500"
: "hover:bg-purple-500/10 text-gray-500 hover:text-purple-500",
)}
>
<Pin className="w-3.5 h-3.5" />
</button>
<button
type="button"
onClick={(e) => e.stopPropagation()}
className="p-1.5 rounded-md hover:bg-cyan-500/10 text-gray-500 hover:text-cyan-500 transition-colors"
>
<Copy className="w-3.5 h-3.5" />
</button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={(e) => e.stopPropagation()}
className="p-1.5 rounded-md hover:bg-red-500/10 text-gray-500 hover:text-red-500 transition-colors"
aria-label="Delete project"
>
<Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
</button>
</TooltipTrigger>
<TooltipContent>Delete project</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={(e) => e.stopPropagation()}
className={cn(
"p-1.5 rounded-md transition-colors",
project.pinned
? "bg-purple-500/10 text-purple-500"
: "hover:bg-purple-500/10 text-gray-500 hover:text-purple-500",
)}
aria-label={project.pinned ? "Unpin project" : "Pin project"}
>
<Pin className="w-3.5 h-3.5" aria-hidden="true" />
</button>
</TooltipTrigger>
<TooltipContent>{project.pinned ? "Unpin project" : "Pin project"}</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={(e) => e.stopPropagation()}
className="p-1.5 rounded-md hover:bg-cyan-500/10 text-gray-500 hover:text-cyan-500 transition-colors"
aria-label="Duplicate project"
>
<Copy className="w-3.5 h-3.5" aria-hidden="true" />
</button>
</TooltipTrigger>
<TooltipContent>Duplicate project</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
</SelectableCard>

39
archon-ui-main/src/features/style-guide/showcases/StaticColors.tsx
View File

@@ -1,6 +1,19 @@
import { Card } from "@/features/ui/primitives/card";
import { cn } from "@/features/ui/primitives/styles";
const GRAY_CLASSES: Record<number, string> = {
50: "bg-gray-50",
100: "bg-gray-100",
200: "bg-gray-200",
300: "bg-gray-300",
400: "bg-gray-400",
500: "bg-gray-500",
600: "bg-gray-600",
700: "bg-gray-700",
800: "bg-gray-800",
900: "bg-gray-900",
};
export const StaticColors = () => {
const semanticColors = [
{ name: "Primary", hex: "#3b82f6", tailwind: "blue-500", usage: "Primary actions, links, focus states" },
@@ -68,26 +81,12 @@ export const StaticColors = () => {
<div>
<h3 className="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Grayscale</h3>
<div className="flex gap-1">
{[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((weight) => {
const grayClasses: Record<number, string> = {
50: "bg-gray-50",
100: "bg-gray-100",
200: "bg-gray-200",
300: "bg-gray-300",
400: "bg-gray-400",
500: "bg-gray-500",
600: "bg-gray-600",
700: "bg-gray-700",
800: "bg-gray-800",
900: "bg-gray-900",
};
return (
<div key={weight} className="flex-1">
<div className={cn("h-12 rounded", grayClasses[weight])} />
<p className="text-xs text-center mt-1 text-gray-500 dark:text-gray-400">{weight}</p>
</div>
);
})}
{[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map((weight) => (
<div key={weight} className="flex-1">
<div className={cn("h-12 rounded", GRAY_CLASSES[weight])} />
<p className="text-xs text-center mt-1 text-gray-500 dark:text-gray-400">{weight}</p>
</div>
))}
</div>
</div>
</div>

12
archon-ui-main/src/features/ui/primitives/pill.tsx
View File

@@ -1,7 +1,7 @@
import type React from "react";
import { cn } from "./styles";
export type PillColor = "blue" | "orange" | "cyan" | "purple" | "pink" | "emerald" | "gray";
export type PillColor = "blue" | "orange" | "cyan" | "purple" | "pink" | "green" | "gray";
export interface StatPillProps extends React.HTMLAttributes<HTMLDivElement> {
color?: PillColor;
@@ -47,11 +47,11 @@ const COLOR_MAP: Record<PillColor, { bg: string; text: string; border: string; g
border: "border-pink-300/60 dark:border-purple-500/50",
glow: "shadow-[0_0_10px_rgba(236,72,153,0.35)]",
},
emerald: {
bg: "from-emerald-100/80 to-white/60 dark:from-emerald-500/20 dark:to-emerald-500/10",
text: "text-emerald-700 dark:text-emerald-200",
border: "border-emerald-300/60 dark:border-emerald-500/50",
glow: "shadow-[0_0_10px_rgba(16,185,129,0.35)]",
green: {
bg: "from-green-100/80 to-white/60 dark:from-green-500/20 dark:to-green-500/10",
text: "text-green-700 dark:text-green-200",
border: "border-green-300/60 dark:border-green-500/50",
glow: "shadow-[0_0_10px_rgba(34,197,94,0.35)]",
},
gray: {
bg: "from-gray-100/80 to-white/60 dark:from-gray-500/20 dark:to-gray-500/10",

58
archon-ui-main/src/features/ui/primitives/styles.ts
View File

@@ -62,7 +62,7 @@ export const glassmorphism = {
glow: {
purple: "shadow-[0_0_30px_10px_rgba(168,85,247,0.5)] dark:shadow-[0_0_40px_15px_rgba(168,85,247,0.7)]",
blue: "shadow-[0_0_30px_10px_rgba(59,130,246,0.5)] dark:shadow-[0_0_40px_15px_rgba(59,130,246,0.7)]",
green: "shadow-[0_0_30px_10px_rgba(16,185,129,0.5)] dark:shadow-[0_0_40px_15px_rgba(16,185,129,0.7)]",
green: "shadow-[0_0_30px_10px_rgba(34,197,94,0.5)] dark:shadow-[0_0_40px_15px_rgba(34,197,94,0.7)]",
red: "shadow-[0_0_30px_10px_rgba(239,68,68,0.5)] dark:shadow-[0_0_40px_15px_rgba(239,68,68,0.7)]",
orange: "shadow-[0_0_30px_10px_rgba(251,146,60,0.5)] dark:shadow-[0_0_40px_15px_rgba(251,146,60,0.7)]",
cyan: "shadow-[0_0_30px_10px_rgba(34,211,238,0.5)] dark:shadow-[0_0_40px_15px_rgba(34,211,238,0.7)]",
@@ -214,11 +214,11 @@ export const glassCard = {
solid: "bg-cyan-500/[0.40] dark:bg-cyan-400/[0.60]",
},
green: {
clear: "bg-emerald-500/[0.03] dark:bg-emerald-400/[0.04]",
light: "bg-emerald-500/[0.08] dark:bg-emerald-400/[0.10]",
medium: "bg-emerald-500/[0.15] dark:bg-emerald-400/[0.20]",
frosted: "bg-emerald-500/[0.25] dark:bg-emerald-400/[0.35]",
solid: "bg-emerald-500/[0.40] dark:bg-emerald-400/[0.60]",
clear: "bg-green-500/[0.03] dark:bg-green-400/[0.04]",
light: "bg-green-500/[0.08] dark:bg-green-400/[0.10]",
medium: "bg-green-500/[0.15] dark:bg-green-400/[0.20]",
frosted: "bg-green-500/[0.25] dark:bg-green-400/[0.35]",
solid: "bg-green-500/[0.40] dark:bg-green-400/[0.60]",
},
orange: {
clear: "bg-orange-500/[0.03] dark:bg-orange-400/[0.04]",
@@ -261,9 +261,9 @@ export const glassCard = {
hover: "hover:shadow-[0_0_50px_20px_rgba(59,130,246,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(59,130,246,0.8)]",
},
green: {
border: "border-emerald-500/50 dark:border-emerald-400/40",
glow: "shadow-[0_0_40px_15px_rgba(16,185,129,0.4)] dark:shadow-[0_0_60px_25px_rgba(16,185,129,0.7)]",
hover: "hover:shadow-[0_0_50px_20px_rgba(16,185,129,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(16,185,129,0.8)]",
border: "border-green-500/50 dark:border-green-400/40",
glow: "shadow-[0_0_40px_15px_rgba(34,197,94,0.4)] dark:shadow-[0_0_60px_25px_rgba(34,197,94,0.7)]",
hover: "hover:shadow-[0_0_50px_20px_rgba(34,197,94,0.5)] dark:hover:shadow-[0_0_80px_30px_rgba(34,197,94,0.8)]",
},
cyan: {
border: "border-cyan-500/50 dark:border-cyan-400/40",
@@ -314,10 +314,10 @@ export const glassCard = {
xl: "shadow-[0_0_100px_rgba(236,72,153,0.6)]",
},
green: {
sm: "shadow-[0_0_20px_rgba(16,185,129,0.3)]",
md: "shadow-[0_0_40px_rgba(16,185,129,0.4)]",
lg: "shadow-[0_0_70px_rgba(16,185,129,0.5)]",
xl: "shadow-[0_0_100px_rgba(16,185,129,0.6)]",
sm: "shadow-[0_0_20px_rgba(34,197,94,0.3)]",
md: "shadow-[0_0_40px_rgba(34,197,94,0.4)]",
lg: "shadow-[0_0_70px_rgba(34,197,94,0.5)]",
xl: "shadow-[0_0_100px_rgba(34,197,94,0.6)]",
},
orange: {
sm: "shadow-[0_0_20px_rgba(251,146,60,0.3)]",
@@ -360,10 +360,10 @@ export const glassCard = {
xl: "shadow-[inset_0_0_120px_rgba(236,72,153,0.5)]",
},
green: {
sm: "shadow-[inset_0_0_15px_rgba(16,185,129,0.2)]",
md: "shadow-[inset_0_0_40px_rgba(16,185,129,0.3)]",
lg: "shadow-[inset_0_0_80px_rgba(16,185,129,0.4)]",
xl: "shadow-[inset_0_0_120px_rgba(16,185,129,0.5)]",
sm: "shadow-[inset_0_0_15px_rgba(34,197,94,0.2)]",
md: "shadow-[inset_0_0_40px_rgba(34,197,94,0.3)]",
lg: "shadow-[inset_0_0_80px_rgba(34,197,94,0.4)]",
xl: "shadow-[inset_0_0_120px_rgba(34,197,94,0.5)]",
},
orange: {
sm: "shadow-[inset_0_0_15px_rgba(251,146,60,0.2)]",
@@ -406,10 +406,10 @@ export const glassCard = {
xl: "hover:shadow-[0_0_100px_rgba(236,72,153,0.8)]",
},
green: {
sm: "hover:shadow-[0_0_20px_rgba(16,185,129,0.5)]",
md: "hover:shadow-[0_0_40px_rgba(16,185,129,0.6)]",
lg: "hover:shadow-[0_0_70px_rgba(16,185,129,0.7)]",
xl: "hover:shadow-[0_0_100px_rgba(16,185,129,0.8)]",
sm: "hover:shadow-[0_0_20px_rgba(34,197,94,0.5)]",
md: "hover:shadow-[0_0_40px_rgba(34,197,94,0.6)]",
lg: "hover:shadow-[0_0_70px_rgba(34,197,94,0.7)]",
xl: "hover:shadow-[0_0_100px_rgba(34,197,94,0.8)]",
},
orange: {
sm: "hover:shadow-[0_0_20px_rgba(251,146,60,0.5)]",
@@ -451,10 +451,10 @@ export const glassCard = {
xl: "hover:shadow-[inset_0_0_120px_rgba(236,72,153,0.7)]",
},
green: {
sm: "hover:shadow-[inset_0_0_15px_rgba(16,185,129,0.4)]",
md: "hover:shadow-[inset_0_0_40px_rgba(16,185,129,0.5)]",
lg: "hover:shadow-[inset_0_0_80px_rgba(16,185,129,0.6)]",
xl: "hover:shadow-[inset_0_0_120px_rgba(16,185,129,0.7)]",
sm: "hover:shadow-[inset_0_0_15px_rgba(34,197,94,0.4)]",
md: "hover:shadow-[inset_0_0_40px_rgba(34,197,94,0.5)]",
lg: "hover:shadow-[inset_0_0_80px_rgba(34,197,94,0.6)]",
xl: "hover:shadow-[inset_0_0_120px_rgba(34,197,94,0.7)]",
},
orange: {
sm: "hover:shadow-[inset_0_0_15px_rgba(251,146,60,0.4)]",
@@ -522,13 +522,13 @@ export const glassCard = {
},
},
green: {
line: "before:bg-emerald-500 dark:before:bg-emerald-400",
glow: "before:shadow-[0_0_15px_4px_rgba(16,185,129,0.8)]",
line: "before:bg-green-500 dark:before:bg-green-400",
glow: "before:shadow-[0_0_15px_4px_rgba(34,197,94,0.8)]",
gradient: {
horizontal:
"before:bg-gradient-to-r before:from-transparent before:via-emerald-500 dark:before:via-emerald-400 before:to-transparent",
"before:bg-gradient-to-r before:from-transparent before:via-green-500 dark:before:via-green-400 before:to-transparent",
vertical:
"before:bg-gradient-to-b before:from-transparent before:via-emerald-500 dark:before:via-emerald-400 before:to-transparent",
"before:bg-gradient-to-b before:from-transparent before:via-green-500 dark:before:via-green-400 before:to-transparent",
},
},
orange: {

10
archon-ui-main/src/features/ui/primitives/switch.tsx
View File

@@ -47,11 +47,11 @@ const switchVariants = {
focusRing: "focus-visible:ring-blue-500",
},
green: {
checked: "data-[state=checked]:bg-emerald-500/20 data-[state=checked]:border-emerald-500/50",
glow: "data-[state=checked]:shadow-[0_0_20px_rgba(16,185,129,0.5)]",
thumb: "data-[state=checked]:border-emerald-400 data-[state=checked]:shadow-[0_0_10px_rgba(16,185,129,0.5)]",
icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-emerald-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(16,185,129,0.7)]",
focusRing: "focus-visible:ring-emerald-500",
checked: "data-[state=checked]:bg-green-500/20 data-[state=checked]:border-green-500/50",
glow: "data-[state=checked]:shadow-[0_0_20px_rgba(34,197,94,0.5)]",
thumb: "data-[state=checked]:border-green-400 data-[state=checked]:shadow-[0_0_10px_rgba(34,197,94,0.5)]",
icon: "text-gray-500 dark:text-gray-400 data-[state=checked]:text-green-400 data-[state=checked]:drop-shadow-[0_0_5px_rgba(34,197,94,0.7)]",
focusRing: "focus-visible:ring-green-500",
},
pink: {
checked: "data-[state=checked]:bg-pink-500/20 data-[state=checked]:border-pink-500/50",