jasmincss 1.0.0

package/src/config/defaults.js

@@ -0,0 +1,263 @@
+// Default JasminCSS Configuration
+export const defaultConfig = {
+  projectName: 'my-project',
+  darkMode: true,
+  prefix: '',
+
+  // Content files to scan for class usage (tree-shaking)
+  content: [
+    './**/*.{html,js,jsx,ts,tsx,vue,svelte,astro}',
+    '!./node_modules/**',
+    '!./dist/**'
+  ],
+
+  // Branding configuration
+  branding: {
+    colors: {
+      primary: '#6366f1',      // Indigo
+      secondary: '#ec4899',    // Pink
+      accent: '#14b8a6',       // Teal
+      success: '#22c55e',      // Green
+      warning: '#f59e0b',      // Amber
+      error: '#ef4444',        // Red
+      info: '#3b82f6'          // Blue
+    },
+    typography: {
+      fontFamily: 'Inter',
+      fontFamilyMono: 'JetBrains Mono',
+      baseFontSize: '16px',
+      lineHeight: 1.6
+    },
+    borderRadius: {
+      none: '0',
+      sm: '0.25rem',
+      default: '0.5rem',
+      md: '0.5rem',
+      lg: '0.75rem',
+      xl: '1rem',
+      '2xl': '1.5rem',
+      full: '9999px'
+    },
+    shadows: {
+      sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+      default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+      '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+      glow: '0 0 20px rgb(99 102 241 / 0.4)',
+      none: 'none'
+    }
+  },
+
+  // Selected components
+  components: ['buttons', 'cards', 'forms', 'navigation', 'alerts', 'badges'],
+
+  // Selected utilities
+  utilities: ['layout', 'spacing', 'typography', 'colors', 'effects', 'animations'],
+
+  // Extended colors palette
+  colors: {
+    // Grays - Neutral tones with slight warmth
+    gray: {
+      50: '#fafafa',
+      100: '#f4f4f5',
+      200: '#e4e4e7',
+      300: '#d4d4d8',
+      400: '#a1a1aa',
+      500: '#71717a',
+      600: '#52525b',
+      700: '#3f3f46',
+      800: '#27272a',
+      900: '#18181b',
+      950: '#09090b'
+    },
+
+    // Slate - Cool gray
+    slate: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+      950: '#020617'
+    },
+
+    // Future-forward colors
+    neon: {
+      cyan: '#00f5ff',
+      pink: '#ff00f5',
+      green: '#00ff88',
+      blue: '#0088ff',
+      purple: '#8800ff',
+      yellow: '#ffee00'
+    },
+
+    // Glass effects base colors
+    glass: {
+      light: 'rgba(255, 255, 255, 0.1)',
+      medium: 'rgba(255, 255, 255, 0.2)',
+      heavy: 'rgba(255, 255, 255, 0.3)',
+      dark: 'rgba(0, 0, 0, 0.1)'
+    }
+  },
+
+  // Spacing scale
+  spacing: {
+    px: '1px',
+    0: '0',
+    0.5: '0.125rem',
+    1: '0.25rem',
+    1.5: '0.375rem',
+    2: '0.5rem',
+    2.5: '0.625rem',
+    3: '0.75rem',
+    3.5: '0.875rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    11: '2.75rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+    28: '7rem',
+    32: '8rem',
+    36: '9rem',
+    40: '10rem',
+    44: '11rem',
+    48: '12rem',
+    52: '13rem',
+    56: '14rem',
+    60: '15rem',
+    64: '16rem',
+    72: '18rem',
+    80: '20rem',
+    96: '24rem'
+  },
+
+  // Breakpoints
+  breakpoints: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px'
+  },
+
+  // Animation durations
+  animation: {
+    duration: {
+      fast: '150ms',
+      normal: '300ms',
+      slow: '500ms',
+      slower: '700ms'
+    },
+    easing: {
+      linear: 'linear',
+      ease: 'ease',
+      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+      easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
+      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+    }
+  }
+};
+
+// Design templates
+export const templates = {
+  futuristic: {
+    branding: {
+      colors: {
+        primary: '#00f5ff',
+        secondary: '#ff00f5',
+        accent: '#00ff88',
+        success: '#00ff88',
+        warning: '#ffee00',
+        error: '#ff3366',
+        info: '#0088ff'
+      },
+      typography: {
+        fontFamily: 'Space Grotesk'
+      },
+      borderRadius: {
+        default: '0.25rem'
+      }
+    },
+    darkMode: true
+  },
+
+  minimal: {
+    branding: {
+      colors: {
+        primary: '#18181b',
+        secondary: '#71717a',
+        accent: '#3b82f6',
+        success: '#22c55e',
+        warning: '#f59e0b',
+        error: '#ef4444',
+        info: '#3b82f6'
+      },
+      typography: {
+        fontFamily: 'Inter'
+      },
+      borderRadius: {
+        default: '0.25rem'
+      }
+    },
+    darkMode: true
+  },
+
+  corporate: {
+    branding: {
+      colors: {
+        primary: '#1e40af',
+        secondary: '#475569',
+        accent: '#0891b2',
+        success: '#15803d',
+        warning: '#b45309',
+        error: '#b91c1c',
+        info: '#0369a1'
+      },
+      typography: {
+        fontFamily: 'DM Sans'
+      },
+      borderRadius: {
+        default: '0.375rem'
+      }
+    },
+    darkMode: true
+  },
+
+  creative: {
+    branding: {
+      colors: {
+        primary: '#7c3aed',
+        secondary: '#ec4899',
+        accent: '#f59e0b',
+        success: '#10b981',
+        warning: '#f97316',
+        error: '#f43f5e',
+        info: '#6366f1'
+      },
+      typography: {
+        fontFamily: 'Outfit'
+      },
+      borderRadius: {
+        default: '1rem'
+      }
+    },
+    darkMode: true
+  }
+};

package/src/config/loader.js

@@ -0,0 +1,109 @@
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
+import { defaultConfig } from './defaults.js';
+
+export async function loadConfig(configPath) {
+  if (!fs.existsSync(configPath)) {
+    throw new Error(`Config file not found: ${configPath}`);
+  }
+
+  // Convert to file URL for ESM import
+  const fileUrl = pathToFileURL(configPath).href;
+
+  // Add cache buster for watch mode
+  const cacheBuster = `?t=${Date.now()}`;
+  const module = await import(fileUrl + cacheBuster);
+
+  // Deep merge with defaults
+  return deepMerge(defaultConfig, module.default || module);
+}
+
+function deepMerge(target, source) {
+  const result = { ...target };
+
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      result[key] = deepMerge(target[key] || {}, source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+
+  return result;
+}
+
+export function resolveConfig(config) {
+  // Resolve font imports
+  const fonts = [];
+  const { fontFamily, fontFamilyMono } = config.branding.typography;
+
+  if (fontFamily && fontFamily !== 'system-ui') {
+    fonts.push(fontFamily.replace(/\s+/g, '+'));
+  }
+  if (fontFamilyMono && fontFamilyMono !== 'monospace') {
+    fonts.push(fontFamilyMono.replace(/\s+/g, '+'));
+  }
+
+  config.resolvedFonts = fonts;
+
+  // Generate CSS custom properties
+  config.cssVariables = generateCssVariables(config);
+
+  return config;
+}
+
+function generateCssVariables(config) {
+  const vars = {};
+  const { branding, colors, spacing, breakpoints } = config;
+
+  // Brand colors
+  if (branding.colors) {
+    Object.entries(branding.colors).forEach(([name, value]) => {
+      vars[`--j-${name}`] = value;
+    });
+  }
+
+  // Extended colors
+  if (colors) {
+    Object.entries(colors).forEach(([colorName, shades]) => {
+      if (typeof shades === 'object') {
+        Object.entries(shades).forEach(([shade, value]) => {
+          vars[`--j-${colorName}-${shade}`] = value;
+        });
+      }
+    });
+  }
+
+  // Spacing
+  if (spacing) {
+    Object.entries(spacing).forEach(([key, value]) => {
+      vars[`--j-space-${key}`] = value;
+    });
+  }
+
+  // Typography
+  if (branding.typography) {
+    const { fontFamily, fontFamilyMono, baseFontSize, lineHeight } = branding.typography;
+    vars['--j-font-sans'] = `"${fontFamily}", system-ui, -apple-system, sans-serif`;
+    vars['--j-font-mono'] = `"${fontFamilyMono}", ui-monospace, monospace`;
+    vars['--j-font-size-base'] = baseFontSize;
+    vars['--j-line-height'] = lineHeight;
+  }
+
+  // Border radius
+  if (branding.borderRadius) {
+    Object.entries(branding.borderRadius).forEach(([key, value]) => {
+      vars[`--j-radius-${key}`] = value;
+    });
+  }
+
+  // Shadows
+  if (branding.shadows) {
+    Object.entries(branding.shadows).forEach(([key, value]) => {
+      vars[`--j-shadow-${key}`] = value;
+    });
+  }
+
+  return vars;
+}

package/src/core/base.js

@@ -0,0 +1,241 @@
+export function generateBase(config) {
+  const { cssVariables, resolvedFonts, branding, darkMode } = config;
+
+  // Generate CSS custom properties
+  const customProps = Object.entries(cssVariables)
+    .map(([key, value]) => `  ${key}: ${value};`)
+    .join('\n');
+
+  // Font imports
+  const fontImports = resolvedFonts.length > 0
+    ? `@import url('https://fonts.googleapis.com/css2?family=${resolvedFonts.join('&family=')}&display=swap');`
+    : '';
+
+  return `/* JasminCSS v1.0.0 - Modern CSS Framework */
+/* https://github.com/jasmaine/JasminCSS */
+
+${fontImports}
+
+/* CSS Reset & Base Styles */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+button, [role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+/* CSS Custom Properties */
+:root {
+${customProps}
+
+  /* Additional computed values */
+  --j-font-size-xs: 0.75rem;
+  --j-font-size-sm: 0.875rem;
+  --j-font-size-base: 1rem;
+  --j-font-size-lg: 1.125rem;
+  --j-font-size-xl: 1.25rem;
+  --j-font-size-2xl: 1.5rem;
+  --j-font-size-3xl: 1.875rem;
+  --j-font-size-4xl: 2.25rem;
+  --j-font-size-5xl: 3rem;
+  --j-font-size-6xl: 3.75rem;
+  --j-font-size-7xl: 4.5rem;
+  --j-font-size-8xl: 6rem;
+  --j-font-size-9xl: 8rem;
+
+  /* Line heights */
+  --j-leading-none: 1;
+  --j-leading-tight: 1.25;
+  --j-leading-snug: 1.375;
+  --j-leading-normal: 1.5;
+  --j-leading-relaxed: 1.625;
+  --j-leading-loose: 2;
+
+  /* Letter spacing */
+  --j-tracking-tighter: -0.05em;
+  --j-tracking-tight: -0.025em;
+  --j-tracking-normal: 0;
+  --j-tracking-wide: 0.025em;
+  --j-tracking-wider: 0.05em;
+  --j-tracking-widest: 0.1em;
+
+  /* Z-index scale */
+  --j-z-auto: auto;
+  --j-z-0: 0;
+  --j-z-10: 10;
+  --j-z-20: 20;
+  --j-z-30: 30;
+  --j-z-40: 40;
+  --j-z-50: 50;
+  --j-z-dropdown: 1000;
+  --j-z-sticky: 1020;
+  --j-z-fixed: 1030;
+  --j-z-modal-backdrop: 1040;
+  --j-z-modal: 1050;
+  --j-z-popover: 1060;
+  --j-z-tooltip: 1070;
+
+  /* Transition durations */
+  --j-duration-75: 75ms;
+  --j-duration-100: 100ms;
+  --j-duration-150: 150ms;
+  --j-duration-200: 200ms;
+  --j-duration-300: 300ms;
+  --j-duration-500: 500ms;
+  --j-duration-700: 700ms;
+  --j-duration-1000: 1000ms;
+
+  /* Easings */
+  --j-ease-linear: linear;
+  --j-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --j-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --j-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --j-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* Background for light mode */
+  --j-bg: #ffffff;
+  --j-bg-subtle: #f4f4f5;
+  --j-bg-muted: #e4e4e7;
+  --j-text: #18181b;
+  --j-text-subtle: #71717a;
+  --j-text-muted: #a1a1aa;
+  --j-border: #e4e4e7;
+  --j-border-subtle: #f4f4f5;
+  --j-ring: var(--j-primary);
+}
+
+${darkMode ? `/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --j-bg: #09090b;
+    --j-bg-subtle: #18181b;
+    --j-bg-muted: #27272a;
+    --j-text: #fafafa;
+    --j-text-subtle: #a1a1aa;
+    --j-text-muted: #71717a;
+    --j-border: #27272a;
+    --j-border-subtle: #18181b;
+  }
+}
+
+.dark {
+  --j-bg: #09090b;
+  --j-bg-subtle: #18181b;
+  --j-bg-muted: #27272a;
+  --j-text: #fafafa;
+  --j-text-subtle: #a1a1aa;
+  --j-text-muted: #71717a;
+  --j-border: #27272a;
+  --j-border-subtle: #18181b;
+}` : ''}
+
+/* Base Typography */
+html {
+  font-family: var(--j-font-sans);
+  font-size: var(--j-font-size-base);
+  line-height: var(--j-line-height);
+  color: var(--j-text);
+  background-color: var(--j-bg);
+}
+
+code, kbd, samp, pre {
+  font-family: var(--j-font-mono);
+}
+
+/* Focus Styles */
+:focus-visible {
+  outline: 2px solid var(--j-ring);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background-color: var(--j-primary);
+  color: white;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--j-bg-subtle);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--j-border);
+  border-radius: var(--j-radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--j-text-muted);
+}
+
+/* Screen Reader Only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+`;
+}