From bc73871c82463c3edef14a0a519ae911cd8296df Mon Sep 17 00:00:00 2001 From: padreug Date: Thu, 14 Aug 2025 15:19:13 +0200 Subject: [PATCH] update cursor rules to follow semantic/theme aware color patterns --- .cursorrules | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/.cursorrules b/.cursorrules index 02c997b..0dcac89 100644 --- a/.cursorrules +++ b/.cursorrules @@ -8,6 +8,20 @@ Code Style and Structure - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types. +CSS and Styling Guidelines + +- Always prioritize semantic, theme-aware CSS classes over hard-coded colors and values. +- Use CSS custom properties and semantic class names that automatically adapt to light/dark themes. +- Prefer these semantic classes: + * `bg-background`, `bg-card`, `bg-muted` instead of `bg-white`, `bg-gray-100` + * `text-foreground`, `text-muted-foreground` instead of `text-gray-900`, `text-gray-600` + * `border-border`, `border-input` instead of `border-gray-200`, `border-gray-300` + * `focus:ring-ring`, `focus:border-ring` instead of `focus:ring-blue-500`, `focus:border-blue-500` + * `text-primary`, `text-accent` for semantic color usage +- Avoid hard-coded color values like `text-gray-500`, `bg-white`, `border-blue-500` unless absolutely necessary. +- Use opacity modifiers (e.g., `bg-primary/10`, `text-muted-foreground/70`) for subtle variations. +- Ensure all components work seamlessly in both light and dark themes. + Naming Conventions - Use lowercase with dashes for directories (e.g., components/auth-wizard).