@moontra/moonui-cli/src/theme-presets.ts

CLI tool for MoonUI component library

export interface ThemePreset {
  name: string;
  description: string;
  category: string;
  colors: Record<string, string>;
  dark?: Record<string, string>;
  radius: number;
}

export const themePresets: Record<string, ThemePreset> = {
  default: {
    name: "Default",
    description: "Clean and modern default theme",
    category: "general",
    colors: {
      background: "0 0% 100%",
      foreground: "222.2 84% 4.9%",
      card: "0 0% 100%",
      "card-foreground": "222.2 84% 4.9%",
      popover: "0 0% 100%",
      "popover-foreground": "222.2 84% 4.9%",
      primary: "222.2 47.4% 11.2%",
      "primary-foreground": "210 40% 98%",
      secondary: "210 40% 96.1%",
      "secondary-foreground": "222.2 47.4% 11.2%",
      muted: "210 40% 96.1%",
      "muted-foreground": "215.4 16.3% 46.9%",
      accent: "210 40% 96.1%",
      "accent-foreground": "222.2 47.4% 11.2%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "210 40% 98%",
      border: "214.3 31.8% 91.4%",
      input: "214.3 31.8% 91.4%",
      ring: "222.2 84% 4.9%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 84.2% 60.2%",
      "error-foreground": "210 40% 98%"
    },
    dark: {
      background: "222.2 84% 4.9%",
      foreground: "210 40% 98%",
      card: "222.2 84% 4.9%",
      "card-foreground": "210 40% 98%",
      popover: "222.2 84% 4.9%",
      "popover-foreground": "210 40% 98%",
      primary: "210 40% 98%",
      "primary-foreground": "222.2 47.4% 11.2%",
      secondary: "217.2 32.6% 17.5%",
      "secondary-foreground": "210 40% 98%",
      muted: "217.2 32.6% 17.5%",
      "muted-foreground": "215 20.2% 65.1%",
      accent: "217.2 32.6% 17.5%",
      "accent-foreground": "210 40% 98%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "210 40% 98%",
      border: "217.2 32.6% 17.5%",
      input: "217.2 32.6% 17.5%",
      ring: "212.7 26.8% 83.9%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 62.8% 30.6%",
      "error-foreground": "210 40% 98%"
    },
    radius: 0.5
  },
  corporate: {
    name: "Corporate",
    description: "Professional theme for business applications",
    category: "business",
    colors: {
      background: "0 0% 100%",
      foreground: "222.2 84% 4.9%",
      card: "0 0% 100%",
      "card-foreground": "222.2 84% 4.9%",
      popover: "0 0% 100%",
      "popover-foreground": "222.2 84% 4.9%",
      primary: "217.2 91.2% 59.8%",
      "primary-foreground": "222.2 47.4% 11.2%",
      secondary: "217.2 32.6% 94%",
      "secondary-foreground": "217.2 91.2% 59.8%",
      muted: "217.2 32.6% 96%",
      "muted-foreground": "215.4 16.3% 46.9%",
      accent: "217.2 32.6% 94%",
      "accent-foreground": "217.2 91.2% 59.8%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "210 40% 98%",
      border: "214.3 31.8% 91.4%",
      input: "214.3 31.8% 91.4%",
      ring: "217.2 91.2% 59.8%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 84.2% 60.2%",
      "error-foreground": "210 40% 98%"
    },
    dark: {
      background: "224 71.4% 4.1%",
      foreground: "210 40% 98%",
      card: "224 71.4% 4.1%",
      "card-foreground": "210 40% 98%",
      popover: "224 71.4% 4.1%",
      "popover-foreground": "210 40% 98%",
      primary: "217.2 91.2% 59.8%",
      "primary-foreground": "222.2 47.4% 11.2%",
      secondary: "217.2 32.6% 17.5%",
      "secondary-foreground": "210 40% 98%",
      muted: "217.2 32.6% 17.5%",
      "muted-foreground": "215 20.2% 65.1%",
      accent: "217.2 32.6% 17.5%",
      "accent-foreground": "210 40% 98%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "210 40% 98%",
      border: "217.2 32.6% 17.5%",
      input: "217.2 32.6% 17.5%",
      ring: "217.2 91.2% 59.8%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 62.8% 30.6%",
      "error-foreground": "210 40% 98%"
    },
    radius: 0.25
  },
  creative: {
    name: "Creative",
    description: "Vibrant and playful theme for creative projects",
    category: "creative",
    colors: {
      background: "0 0% 100%",
      foreground: "240 10% 3.9%",
      card: "0 0% 100%",
      "card-foreground": "240 10% 3.9%",
      popover: "0 0% 100%",
      "popover-foreground": "240 10% 3.9%",
      primary: "280.5 100% 69.8%",
      "primary-foreground": "0 0% 100%",
      secondary: "325 84.6% 95%",
      "secondary-foreground": "280.5 100% 69.8%",
      muted: "325 84.6% 95%",
      "muted-foreground": "215.4 16.3% 46.9%",
      accent: "325 84.6% 89%",
      "accent-foreground": "280.5 100% 69.8%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "0 0% 98%",
      border: "325 84.6% 91.4%",
      input: "325 84.6% 91.4%",
      ring: "280.5 100% 69.8%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 84.2% 60.2%",
      "error-foreground": "0 0% 98%"
    },
    dark: {
      background: "240 10% 3.9%",
      foreground: "0 0% 98%",
      card: "240 10% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "240 10% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "280.5 100% 69.8%",
      "primary-foreground": "240 5.9% 10%",
      secondary: "240 3.7% 15.9%",
      "secondary-foreground": "0 0% 98%",
      muted: "240 3.7% 15.9%",
      "muted-foreground": "240 5% 64.9%",
      accent: "280.5 100% 15%",
      "accent-foreground": "280.5 100% 69.8%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "0 0% 98%",
      border: "240 3.7% 15.9%",
      input: "240 3.7% 15.9%",
      ring: "280.5 100% 69.8%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 62.8% 30.6%",
      "error-foreground": "0 0% 98%"
    },
    radius: 1
  },
  nature: {
    name: "Nature",
    description: "Calming earthy tones inspired by nature",
    category: "nature",
    colors: {
      background: "60 20% 99%",
      foreground: "140 30% 15%",
      card: "60 20% 99%",
      "card-foreground": "140 30% 15%",
      popover: "60 20% 99%",
      "popover-foreground": "140 30% 15%",
      primary: "142.1 76.2% 36.3%",
      "primary-foreground": "355.7 100% 97.3%",
      secondary: "142.1 30% 85%",
      "secondary-foreground": "142.1 76.2% 25%",
      muted: "142.1 30% 90%",
      "muted-foreground": "140 20% 40%",
      accent: "142.1 30% 85%",
      "accent-foreground": "142.1 76.2% 25%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "0 0% 98%",
      border: "142.1 30% 82%",
      input: "142.1 30% 82%",
      ring: "142.1 76.2% 36.3%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 84.2% 60.2%",
      "error-foreground": "0 0% 98%"
    },
    dark: {
      background: "140 30% 10%",
      foreground: "60 20% 95%",
      card: "140 30% 10%",
      "card-foreground": "60 20% 95%",
      popover: "140 30% 10%",
      "popover-foreground": "60 20% 95%",
      primary: "142.1 70.6% 45.3%",
      "primary-foreground": "144.9 80.4% 10%",
      secondary: "140 30% 20%",
      "secondary-foreground": "60 20% 95%",
      muted: "140 30% 20%",
      "muted-foreground": "140 20% 65%",
      accent: "140 30% 25%",
      "accent-foreground": "60 20% 95%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "0 0% 98%",
      border: "140 30% 20%",
      input: "140 30% 20%",
      ring: "142.1 76.2% 36.3%",
      success: "142 70% 45%",
      "success-foreground": "144.9 80.4% 10%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 10%",
      error: "0 62.8% 30.6%",
      "error-foreground": "0 0% 98%"
    },
    radius: 0.75
  },
  minimal: {
    name: "Minimal",
    description: "Clean minimal design with neutral colors",
    category: "minimal",
    colors: {
      background: "0 0% 100%",
      foreground: "0 0% 3.9%",
      card: "0 0% 100%",
      "card-foreground": "0 0% 3.9%",
      popover: "0 0% 100%",
      "popover-foreground": "0 0% 3.9%",
      primary: "0 0% 9%",
      "primary-foreground": "0 0% 98%",
      secondary: "0 0% 96.1%",
      "secondary-foreground": "0 0% 9%",
      muted: "0 0% 96.1%",
      "muted-foreground": "0 0% 45.1%",
      accent: "0 0% 96.1%",
      "accent-foreground": "0 0% 9%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "0 0% 98%",
      border: "0 0% 89.8%",
      input: "0 0% 89.8%",
      ring: "0 0% 3.9%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 84.2% 60.2%",
      "error-foreground": "0 0% 98%"
    },
    dark: {
      background: "0 0% 3.9%",
      foreground: "0 0% 98%",
      card: "0 0% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "0 0% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "0 0% 98%",
      "primary-foreground": "0 0% 9%",
      secondary: "0 0% 14.9%",
      "secondary-foreground": "0 0% 98%",
      muted: "0 0% 14.9%",
      "muted-foreground": "0 0% 63.9%",
      accent: "0 0% 14.9%",
      "accent-foreground": "0 0% 98%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "0 0% 98%",
      border: "0 0% 14.9%",
      input: "0 0% 14.9%",
      ring: "0 0% 83.1%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 62.8% 30.6%",
      "error-foreground": "0 0% 98%"
    },
    radius: 0
  },
  ocean: {
    name: "Ocean",
    description: "Cool and calm ocean-inspired theme",
    category: "nature",
    colors: {
      background: "210 100% 99%",
      foreground: "210 40% 10%",
      card: "210 100% 99%",
      "card-foreground": "210 40% 10%",
      popover: "210 100% 99%",
      "popover-foreground": "210 40% 10%",
      primary: "201 96% 32%",
      "primary-foreground": "210 100% 98%",
      secondary: "201 30% 85%",
      "secondary-foreground": "201 96% 20%",
      muted: "201 30% 90%",
      "muted-foreground": "210 20% 40%",
      accent: "201 60% 80%",
      "accent-foreground": "201 96% 20%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "0 0% 98%",
      border: "201 30% 82%",
      input: "201 30% 82%",
      ring: "201 96% 32%",
      success: "142 76% 36%",
      "success-foreground": "356 100% 97%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 96%",
      error: "0 84.2% 60.2%",
      "error-foreground": "0 0% 98%"
    },
    dark: {
      background: "210 40% 8%",
      foreground: "210 100% 95%",
      card: "210 40% 8%",
      "card-foreground": "210 100% 95%",
      popover: "210 40% 8%",
      "popover-foreground": "210 100% 95%",
      primary: "201 90% 45%",
      "primary-foreground": "210 40% 10%",
      secondary: "210 30% 20%",
      "secondary-foreground": "210 100% 95%",
      muted: "210 30% 20%",
      "muted-foreground": "210 20% 65%",
      accent: "210 40% 25%",
      "accent-foreground": "210 100% 95%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "0 0% 98%",
      border: "210 30% 20%",
      input: "210 30% 20%",
      ring: "201 90% 45%",
      success: "142 70% 45%",
      "success-foreground": "144.9 80.4% 10%",
      warning: "38 92% 50%",
      "warning-foreground": "48 100% 10%",
      error: "0 62.8% 30.6%",
      "error-foreground": "0 0% 98%"
    },
    radius: 0.5
  }
};