eisaal-theming

@abbas133/eisaal-theming

0 forks

Updated 4/13/2026

Complete Eisaal Sanctuary design system including Karbala shrine-inspired color palette, typography, spacing tokens, glassmorphic effects, and animation patterns. Use for any UI work.

Installation

$npx agent-skills-cli install @abbas133/eisaal-theming

Claude Code

Cursor

Copilot

Codex

Antigravity

Details

Repositoryabbas133/my-claude

Patheisaal-app/.claude/skills/eisaal-theming/SKILL.md

Branchmain

Scoped Name@abbas133/eisaal-theming

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill Instructions

name: eisaal-theming description: Complete Eisaal Sanctuary design system including Karbala shrine-inspired color palette, typography, spacing tokens, glassmorphic effects, and animation patterns. Use for any UI work.

Eisaal Sanctuary Design System

Color Usage Rules

CRITICAL: Never hardcode colors. Always use theme:

final theme = Theme.of(context);
final colors = theme.colorScheme;

// ✅ Correct
Container(color: colors.primary)

// ❌ Wrong
Container(color: Color(0xFFD4AF37))

Color Palette

Core Theme Colors

// Access via theme.colorScheme
primary         // Gold (zareeh/dome)
secondary       // Crimson (Muharram chandeliers)
tertiary        // Green (Hussaini)
surface         // Card background
surfaceVariant  // Alternative surface
background      // Screen background

Extended Colors (Direct Import)

import 'package:eisaal_app/core/theme/sanctuary_colors.dart';

// Golds
SanctuaryColors.zareehGold       // #D4AF37 - Bright shrine gold
SanctuaryColors.antiqueGold      // #C9A227 - Aged patina
SanctuaryColors.champagneGold    // #F7E7CE - Light wash

// Crimsons (Muharram themes)
SanctuaryColors.muharramCrimson  // #8B0000 - Deep blood red
SanctuaryColors.ashuraCrimson    // #C41E3A - Vivid mourning red

// Greens (Hussaini themes)  
SanctuaryColors.hussainiGreen    // #228B22 - Forest green
SanctuaryColors.emeraldGlow      // #50C878 - Bright emerald

Typography

final text = Theme.of(context).textTheme;

// Headlines
text.displayLarge    // 57px, feature headers
text.displayMedium   // 45px, section headers
text.displaySmall    // 36px, page titles

// Titles
text.titleLarge      // 22px, card titles
text.titleMedium     // 16px, list tiles
text.titleSmall      // 14px, small headers

// Body
text.bodyLarge       // 16px, primary body
text.bodyMedium      // 14px, secondary body
text.bodySmall       // 12px, captions

// Labels
text.labelLarge      // 14px, buttons
text.labelMedium     // 12px, chips
text.labelSmall      // 11px, badges

Spacing System

Import AppStyles:

import 'package:eisaal_app/core/styles/app_styles.dart';

AppStyles.paddingXS   // 4px
AppStyles.paddingSM   // 8px
AppStyles.paddingMD   // 16px
AppStyles.paddingLG   // 24px
AppStyles.paddingXL   // 32px

Never use:

// ❌ Wrong
padding: EdgeInsets.all(16)

// ✅ Correct
padding: EdgeInsets.all(AppStyles.paddingMD)

Border Radius

AppStyles.radiusSM   // 8px
AppStyles.radiusMD   // 12px
AppStyles.radiusLG   // 16px
AppStyles.radiusXL   // 20px
AppStyles.radiusFull // 100px (circular)

Shadow Levels

// Level 1 - Cards at rest
BoxShadow(
  color: Colors.black.withOpacity(isDark ? 0.3 : 0.04),
  blurRadius: 8,
  offset: const Offset(0, 2),
)

// Level 2 - Interactive elements
BoxShadow(
  color: Colors.black.withOpacity(isDark ? 0.4 : 0.08),
  blurRadius: 16,
  offset: const Offset(0, 6),
)

// Level 3 - Elevated overlays
BoxShadow(
  color: Colors.black.withOpacity(isDark ? 0.5 : 0.12),
  blurRadius: 24,
  offset: const Offset(0, 10),
)

Glassmorphic Effect

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(AppStyles.radiusLG),
    color: colors.surface.withOpacity(isDark ? 0.7 : 0.85),
    border: Border.all(
      color: colors.primary.withOpacity(0.2),
      width: 1,
    ),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(AppStyles.radiusLG),
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: content,
    ),
  ),
)

Animation Durations

const durationFast = Duration(milliseconds: 150);    // Micro-interactions
const durationNormal = Duration(milliseconds: 250);  // Standard
const durationSlow = Duration(milliseconds: 400);    // Page transitions

Component Naming

All Sanctuary components use prefix:

SanctuaryCard
SanctuaryButton
SanctuaryTextField
SanctuaryAppBar
etc.

Dark Mode Considerations

Always check theme brightness:

final isDark = theme.brightness == Brightness.dark;

final glassOpacity = isDark ? 0.7 : 0.85;
final shadowOpacity = isDark ? 0.3 : 0.04;

Accessibility

Color contrast ratio: Minimum 4.5:1 for normal text
Touch targets: Minimum 48x48 dp
Semantic labels: Add to all interactive elements

More by abbas133

View all

ui-ux-expert

Expert UI/UX design and frontend development guidance. Use when designing interfaces, creating design systems, improving user experience, implementing accessible components, or building responsive layouts. Covers WCAG compliance, design patterns, and CSS/component best practices.

flutter-supabase

Expert Supabase integration for Flutter. Use when working with Supabase auth, database queries, realtime subscriptions, storage, edge functions, or RLS policies. Covers supabase_flutter package patterns.

dart-flutter-expert

Expert Flutter/Dart guidance. Use when working with Flutter projects, implementing BLoC/Riverpod patterns, writing Dart code, optimizing performance, or following Clean Architecture. Provides architecture patterns, widget best practices, and testing strategies.

flutter-firebase

Expert Firebase integration for Flutter. Use when working with Firebase Auth, Firestore, Cloud Storage, Cloud Messaging (FCM), Analytics, Crashlytics, or Remote Config. Covers FlutterFire packages and best practices.