mljr-css 0.1.0

package/src/plugin.ts

@@ -0,0 +1,130 @@
+import plugin from 'tailwindcss/plugin';
+import type { Config } from 'tailwindcss';
+
+export interface MljrPluginOptions {
+  /** Prefix for custom CSS classes (default: 'mljr') */
+  prefix?: string;
+  /** Enable dark mode support (default: true) */
+  darkMode?: boolean;
+}
+
+const defaultColors = {
+  primary: {
+    50: '#e6f3ff',
+    100: '#cce7ff',
+    200: '#99cfff',
+    300: '#66b7ff',
+    400: '#339eff',
+    500: '#0080ff',
+    600: '#0066cc',
+    700: '#004d99',
+    800: '#003366',
+    900: '#001a33',
+    950: '#000d1a',
+  },
+  secondary: {
+    50: '#fff4e6',
+    100: '#ffe8cc',
+    200: '#ffd199',
+    300: '#ffba66',
+    400: '#ffa333',
+    500: '#ff8c00',
+    600: '#cc7000',
+    700: '#995400',
+    800: '#663800',
+    900: '#331c00',
+    950: '#1a0e00',
+  },
+  accent: {
+    50: '#f5e6ff',
+    100: '#ebccff',
+    200: '#d699ff',
+    300: '#c266ff',
+    400: '#ad33ff',
+    500: '#9900ff',
+    600: '#7a00cc',
+    700: '#5c0099',
+    800: '#3d0066',
+    900: '#1f0033',
+    950: '#0f001a',
+  },
+};
+
+/**
+ * MLJR CSS Tailwind Plugin
+ *
+ * A TailwindCSS plugin that provides the MLJR color scheme
+ * and design system utilities.
+ *
+ * @example
+ * ```js
+ * // tailwind.config.js
+ * import mljrPlugin from 'mljr-css';
+ *
+ * export default {
+ *   plugins: [mljrPlugin()],
+ * }
+ * ```
+ */
+export const mljrPlugin = (options: MljrPluginOptions = {}) => {
+  const { darkMode = true } = options;
+
+  return plugin(
+    function ({ addUtilities }) {
+      // Add focus ring utility
+      addUtilities({
+        '.mljr-focus-ring': {
+          '&:focus-visible': {
+            outline: '2px solid var(--mljr-ring)',
+            'outline-offset': '2px',
+          },
+        },
+      });
+    },
+    {
+      // Extend Tailwind theme
+      theme: {
+        extend: {
+          colors: {
+            primary: defaultColors.primary,
+            secondary: defaultColors.secondary,
+            accent: defaultColors.accent,
+          },
+          fontFamily: {
+            sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+            display: ['Inter', 'system-ui', 'sans-serif'],
+            mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+          },
+          borderRadius: {
+            DEFAULT: '0.375rem',
+          },
+        },
+      },
+    }
+  );
+};
+
+// Export preset configuration for use with Tailwind
+export const mljrPreset: Partial<Config> = {
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        primary: defaultColors.primary,
+        secondary: defaultColors.secondary,
+        accent: defaultColors.accent,
+      },
+      fontFamily: {
+        display: ['Inter', 'system-ui', 'sans-serif'],
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
+      },
+    },
+  },
+};
+
+// Default export
+export default mljrPlugin;
+
+// Named exports
+export { defaultColors };

package/src/themes/variables.css

@@ -0,0 +1,345 @@
+/* ============================================
+   MLJR CSS Framework - Design Tokens
+   Claymorphism: Soft, playful 3D aesthetic
+   Warm pastels complementing the orange/coral logo
+   ============================================ */
+
+:root {
+  /* Primary Colors (Warm Orange/Coral - matches logo gradient) */
+  --mljr-primary-50: #fff7ed;
+  --mljr-primary-100: #ffedd5;
+  --mljr-primary-200: #fed7aa;
+  --mljr-primary-300: #fdba74;
+  --mljr-primary-400: #fb923c;
+  --mljr-primary-500: #f97316;
+  --mljr-primary-600: #ea580c;
+  --mljr-primary-700: #c2410c;
+  --mljr-primary-800: #9a3412;
+  --mljr-primary-900: #7c2d12;
+  --mljr-primary-950: #431407;
+
+  /* Secondary Colors (Soft Purple - complementary to orange) */
+  --mljr-secondary-50: #faf5ff;
+  --mljr-secondary-100: #f3e8ff;
+  --mljr-secondary-200: #e9d5ff;
+  --mljr-secondary-300: #d8b4fe;
+  --mljr-secondary-400: #c084fc;
+  --mljr-secondary-500: #a855f7;
+  --mljr-secondary-600: #9333ea;
+  --mljr-secondary-700: #7c3aed;
+  --mljr-secondary-800: #6b21a8;
+  --mljr-secondary-900: #581c87;
+  --mljr-secondary-950: #3b0764;
+
+  /* Accent Colors (Soft Teal - for variety) */
+  --mljr-accent-50: #f0fdfa;
+  --mljr-accent-100: #ccfbf1;
+  --mljr-accent-200: #99f6e4;
+  --mljr-accent-300: #5eead4;
+  --mljr-accent-400: #2dd4bf;
+  --mljr-accent-500: #14b8a6;
+  --mljr-accent-600: #0d9488;
+  --mljr-accent-700: #0f766e;
+  --mljr-accent-800: #115e59;
+  --mljr-accent-900: #134e4a;
+  --mljr-accent-950: #042f2e;
+
+  /* Neutral Colors (Warm stone tones) */
+  --mljr-gray-50: #fafaf9;
+  --mljr-gray-100: #f5f5f4;
+  --mljr-gray-200: #e7e5e4;
+  --mljr-gray-300: #d6d3d1;
+  --mljr-gray-400: #a8a29e;
+  --mljr-gray-500: #78716c;
+  --mljr-gray-600: #57534e;
+  --mljr-gray-700: #44403c;
+  --mljr-gray-800: #292524;
+  --mljr-gray-900: #1c1917;
+  --mljr-gray-950: #0c0a09;
+
+  /* Semantic Colors - High contrast, colorblind-friendly */
+  /* Success: Teal-leaning green (distinct from red for colorblind) */
+  --mljr-success: #10b981;
+  --mljr-success-light: #34d399;
+  --mljr-success-dark: #059669;
+  /* Warning: Rich amber/gold */
+  --mljr-warning: #f59e0b;
+  --mljr-warning-light: #fbbf24;
+  --mljr-warning-dark: #d97706;
+  /* Error: Deep crimson (very distinct from orange) */
+  --mljr-error: #ef4444;
+  --mljr-error-light: #f87171;
+  --mljr-error-dark: #dc2626;
+  /* Info: Soft blue */
+  --mljr-info: #3b82f6;
+  --mljr-info-light: #60a5fa;
+  --mljr-info-dark: #2563eb;
+
+  /* Light Mode Theme Colors - Slightly darker for better contrast */
+  --mljr-bg: #f5f0eb;
+  --mljr-bg-secondary: #efe8e1;
+  --mljr-bg-tertiary: #e8dfd6;
+  --mljr-bg-gradient: linear-gradient(135deg, #f5f0eb 0%, #efe8e1 50%, #f0ebe5 100%);
+  --mljr-text: #44403c;
+  --mljr-text-secondary: #78716c;
+  --mljr-text-muted: #a8a29e;
+  --mljr-border: #e7e5e4;
+  --mljr-border-strong: #d6d3d1;
+  --mljr-ring: var(--mljr-primary-500);
+
+  /* ============================================
+     Claymorphism Shadow System
+     Smooth gradual shadows with subtle warm tint
+     Size-aware: xs for tiny, sm for small, default for medium, lg/xl for large
+     ============================================ */
+
+  /* Extra small - for badges, status dots, tiny elements */
+  --mljr-clay-shadow-xs:
+    3px 3px 6px rgba(100, 60, 30, 0.12),
+    -2px -2px 4px rgba(255, 255, 255, 0.8);
+
+  /* Small - for buttons, inputs, small cards */
+  --mljr-clay-shadow-sm:
+    5px 5px 12px rgba(100, 60, 30, 0.15),
+    -3px -3px 8px rgba(255, 255, 255, 0.9),
+    inset 0px 1px 2px rgba(255, 255, 255, 0.5);
+
+  /* Default - for cards, panels */
+  --mljr-clay-shadow:
+    8px 8px 20px rgba(100, 60, 30, 0.18),
+    -6px -6px 16px rgba(255, 255, 255, 0.95),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.6);
+
+  /* Large - for modals, elevated cards */
+  --mljr-clay-shadow-lg:
+    14px 14px 35px rgba(100, 60, 30, 0.2),
+    -10px -10px 25px rgba(255, 255, 255, 0.95),
+    inset 0px 3px 6px rgba(255, 255, 255, 0.6);
+
+  /* Extra large - for hero sections, major overlays */
+  --mljr-clay-shadow-xl:
+    20px 20px 50px rgba(100, 60, 30, 0.22),
+    -14px -14px 35px rgba(255, 255, 255, 0.98),
+    inset 0px 4px 10px rgba(255, 255, 255, 0.7);
+
+  /* Inset shadows (concave/pressed effect) */
+  --mljr-clay-inset-xs:
+    inset 2px 2px 4px rgba(100, 60, 30, 0.12),
+    inset -1px -1px 3px rgba(255, 255, 255, 0.7);
+
+  --mljr-clay-inset-sm:
+    inset 3px 3px 7px rgba(100, 60, 30, 0.14),
+    inset -2px -2px 5px rgba(255, 255, 255, 0.8);
+
+  --mljr-clay-inset:
+    inset 5px 5px 12px rgba(100, 60, 30, 0.16),
+    inset -4px -4px 10px rgba(255, 255, 255, 0.85);
+
+  --mljr-clay-inset-lg:
+    inset 8px 8px 18px rgba(100, 60, 30, 0.18),
+    inset -6px -6px 14px rgba(255, 255, 255, 0.9);
+
+  /* Button shadow (convex with subtle inner highlight) */
+  --mljr-clay-btn:
+    6px 6px 14px rgba(100, 60, 30, 0.16),
+    -4px -4px 10px rgba(255, 255, 255, 0.9),
+    inset 0px 2px 4px rgba(255, 255, 255, 0.6);
+
+  /* Button pressed state */
+  --mljr-clay-btn-pressed:
+    inset 3px 3px 8px rgba(120, 80, 50, 0.15),
+    inset -2px -2px 6px rgba(255, 255, 255, 0.5);
+
+  /* Primary colored clay shadow (for primary buttons/elements) - smooth gradient */
+  --mljr-clay-primary:
+    5px 5px 14px rgba(234, 88, 12, 0.2),
+    -3px -3px 10px rgba(255, 255, 255, 0.85),
+    inset 0px 2px 5px rgba(255, 255, 255, 0.4);
+
+  /* Secondary colored clay shadow (purple) */
+  --mljr-clay-secondary:
+    5px 5px 14px rgba(147, 51, 234, 0.18),
+    -3px -3px 10px rgba(255, 255, 255, 0.85),
+    inset 0px 2px 5px rgba(255, 255, 255, 0.4);
+
+  /* Accent colored clay shadow (teal) */
+  --mljr-clay-accent:
+    5px 5px 14px rgba(13, 148, 136, 0.18),
+    -3px -3px 10px rgba(255, 255, 255, 0.85),
+    inset 0px 2px 5px rgba(255, 255, 255, 0.4);
+
+  /* Traditional shadows (kept for compatibility) */
+  --mljr-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --mljr-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mljr-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mljr-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --mljr-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* ============================================
+     Border Radius System (Soft, rounded)
+     ============================================ */
+  --mljr-radius-sm: 12px;
+  --mljr-radius: 16px;
+  --mljr-radius-md: 20px;
+  --mljr-radius-lg: 28px;
+  --mljr-radius-xl: 36px;
+  --mljr-radius-2xl: 48px;
+  --mljr-radius-full: 9999px;
+
+  /* Gradient definitions - more visible color transitions */
+  --mljr-gradient-primary: linear-gradient(135deg, #fdba74 0%, #f97316 50%, #c2410c 100%);
+  --mljr-gradient-secondary: linear-gradient(135deg, #d8b4fe 0%, #a855f7 50%, #7c3aed 100%);
+  --mljr-gradient-accent: linear-gradient(135deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%);
+  --mljr-gradient-brand: linear-gradient(135deg, #fdba74 0%, #f97316 35%, #ea580c 65%, #9a3412 100%);
+  --mljr-gradient-warm: linear-gradient(135deg, #fef3c7 0%, #fcd34d 30%, #f59e0b 70%, #d97706 100%);
+
+  /* Spacing Scale */
+  --mljr-space-1: 0.25rem;
+  --mljr-space-2: 0.5rem;
+  --mljr-space-3: 0.75rem;
+  --mljr-space-4: 1rem;
+  --mljr-space-5: 1.25rem;
+  --mljr-space-6: 1.5rem;
+  --mljr-space-8: 2rem;
+  --mljr-space-10: 2.5rem;
+  --mljr-space-12: 3rem;
+  --mljr-space-16: 4rem;
+
+  /* Typography - Friendly, rounded fonts */
+  --mljr-font-display: 'Inter', system-ui, sans-serif;
+  --mljr-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --mljr-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+  --mljr-text-xs: 0.75rem;
+  --mljr-text-sm: 0.875rem;
+  --mljr-text-base: 1rem;
+  --mljr-text-lg: 1.125rem;
+  --mljr-text-xl: 1.25rem;
+  --mljr-text-2xl: 1.5rem;
+  --mljr-text-3xl: 1.875rem;
+  --mljr-text-4xl: 2.25rem;
+
+  /* Line Heights */
+  --mljr-leading-tight: 1.25;
+  --mljr-leading-normal: 1.5;
+  --mljr-leading-relaxed: 1.625;
+
+  /* Transitions */
+  --mljr-transition-fast: 150ms ease;
+  --mljr-transition: 200ms ease;
+  --mljr-transition-slow: 300ms ease;
+  --mljr-transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* Frosted Glass Effect Variables */
+  --mljr-frosted-bg: rgba(255, 255, 255, 0.7);
+  --mljr-frosted-bg-strong: rgba(255, 255, 255, 0.85);
+  --mljr-frosted-bg-subtle: rgba(255, 255, 255, 0.5);
+  --mljr-frosted-border: rgba(255, 255, 255, 0.5);
+  --mljr-frosted-border-strong: rgba(255, 255, 255, 0.6);
+
+  /* Z-index Scale */
+  --mljr-z-dropdown: 1000;
+  --mljr-z-toast: 1080;
+  --mljr-z-sticky: 1020;
+  --mljr-z-fixed: 1030;
+  --mljr-z-modal-backdrop: 1040;
+  --mljr-z-modal: 1050;
+  --mljr-z-popover: 1060;
+  --mljr-z-tooltip: 1070;
+}
+
+/* Dark Mode (Warm dark tones - slightly lighter for better contrast) */
+.dark,
+[data-theme="dark"] {
+  --mljr-bg: #2a2522;
+  --mljr-bg-secondary: #332e2b;
+  --mljr-bg-tertiary: #4a4542;
+  --mljr-bg-gradient: linear-gradient(135deg, #2a2522 0%, #332e2b 100%);
+  --mljr-text: #fafaf9;
+  --mljr-text-secondary: #d6d3d1;
+  --mljr-text-muted: #a8a29e;
+  --mljr-border: #4a4542;
+  --mljr-border-strong: #5c5652;
+
+  /* Clay shadows adapted for dark mode - more visible floating effect */
+  --mljr-clay-shadow-xs:
+    3px 3px 6px rgba(0, 0, 0, 0.5),
+    -2px -2px 4px rgba(80, 75, 70, 0.2);
+
+  --mljr-clay-shadow-sm:
+    5px 5px 12px rgba(0, 0, 0, 0.55),
+    -3px -3px 8px rgba(80, 75, 70, 0.18),
+    inset 0px 1px 2px rgba(255, 200, 150, 0.08);
+
+  --mljr-clay-shadow:
+    8px 8px 22px rgba(0, 0, 0, 0.6),
+    -6px -6px 16px rgba(80, 75, 70, 0.2),
+    inset 0px 2px 4px rgba(255, 200, 150, 0.1);
+
+  --mljr-clay-shadow-lg:
+    14px 14px 38px rgba(0, 0, 0, 0.65),
+    -10px -10px 26px rgba(80, 75, 70, 0.22),
+    inset 0px 3px 6px rgba(255, 200, 150, 0.12);
+
+  --mljr-clay-shadow-xl:
+    20px 20px 55px rgba(0, 0, 0, 0.7),
+    -14px -14px 40px rgba(80, 75, 70, 0.25),
+    inset 0px 4px 10px rgba(255, 200, 150, 0.15);
+
+  --mljr-clay-inset-xs:
+    inset 2px 2px 4px rgba(0, 0, 0, 0.5),
+    inset -1px -1px 3px rgba(80, 75, 70, 0.15);
+
+  --mljr-clay-inset-sm:
+    inset 3px 3px 7px rgba(0, 0, 0, 0.55),
+    inset -2px -2px 5px rgba(80, 75, 70, 0.18);
+
+  --mljr-clay-inset:
+    inset 5px 5px 14px rgba(0, 0, 0, 0.6),
+    inset -4px -4px 10px rgba(80, 75, 70, 0.2);
+
+  --mljr-clay-inset-lg:
+    inset 6px 6px 14px rgba(0, 0, 0, 0.55),
+    inset -6px -6px 12px rgba(70, 65, 60, 0.18);
+
+  --mljr-clay-btn:
+    4px 4px 10px rgba(0, 0, 0, 0.45),
+    -3px -3px 8px rgba(70, 65, 60, 0.15),
+    inset 0px 2px 4px rgba(255, 200, 150, 0.06);
+
+  --mljr-clay-btn-pressed:
+    inset 3px 3px 8px rgba(0, 0, 0, 0.5),
+    inset -2px -2px 6px rgba(70, 65, 60, 0.1);
+
+  /* Primary colored clay shadow for dark mode - warm glow */
+  --mljr-clay-primary:
+    5px 5px 14px rgba(234, 88, 12, 0.25),
+    -3px -3px 10px rgba(70, 65, 60, 0.15),
+    inset 0px 2px 5px rgba(255, 200, 150, 0.08);
+
+  /* Secondary colored clay shadow for dark mode (purple) */
+  --mljr-clay-secondary:
+    5px 5px 14px rgba(147, 51, 234, 0.22),
+    -3px -3px 10px rgba(70, 65, 60, 0.15),
+    inset 0px 2px 5px rgba(255, 200, 150, 0.06);
+
+  /* Accent colored clay shadow for dark mode (teal) */
+  --mljr-clay-accent:
+    5px 5px 14px rgba(13, 148, 136, 0.22),
+    -3px -3px 10px rgba(70, 65, 60, 0.15),
+    inset 0px 2px 5px rgba(255, 200, 150, 0.06);
+
+  /* Frosted Glass for dark mode */
+  --mljr-frosted-bg: rgba(51, 46, 43, 0.75);
+  --mljr-frosted-bg-strong: rgba(51, 46, 43, 0.9);
+  --mljr-frosted-bg-subtle: rgba(51, 46, 43, 0.55);
+  --mljr-frosted-border: rgba(74, 69, 66, 0.5);
+  --mljr-frosted-border-strong: rgba(74, 69, 66, 0.65);
+
+  /* Traditional shadows for dark mode */
+  --mljr-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --mljr-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --mljr-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --mljr-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+  --mljr-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
+}