@onesaz/tailwind-config 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @onesaz/tailwind-config
 
-Shared Tailwind CSS preset for Onesaz applications.
+Shared Tailwind CSS configuration for Onesaz applications. Supports both Tailwind v3 and v4.
 
 ## Installation
 
@@ -10,7 +10,20 @@ npm install @onesaz/tailwind-config tailwindcss
 
 ## Usage
 
-Add the preset to your `tailwind.config.js`:
+### Tailwind v4 (CSS-first)
+
+In your main CSS file:
+
+```css
+@import "tailwindcss";
+@import "@onesaz/tailwind-config/v4.css";
+
+/* Your custom styles */
+```
+
+### Tailwind v3 (JS preset)
+
+In your `tailwind.config.js`:
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
@@ -25,14 +38,41 @@ module.exports = {
 
 ## Features
 
-- Pre-configured color palette using design tokens
+- Pre-configured color palette (purple, blue, cyan, teal, green, orange, red, pink)
+- Gray scales (slate, neutral)
+- Semantic colors (success, warning, error, info)
 - CSS variable-based colors for dynamic theming
-- Consistent spacing, typography, and border radius scales
+- Typography scale
+- Border radius scale
+- Shadow scale
+- Animation keyframes
 - Dark mode support
 
+## Included Colors
+
+### Accent Colors
+- `purple-1` to `purple-12`
+- `blue-1` to `blue-12`
+- `cyan-1` to `cyan-12`
+- `teal-1` to `teal-12`
+- `green-1` to `green-12`
+- `orange-1` to `orange-12`
+- `red-1` to `red-12`
+- `pink-1` to `pink-12`
+
+### Gray Colors
+- `slate-1` to `slate-12`
+- `neutral-1` to `neutral-12`
+
+### Semantic Colors
+- `success`, `success-light`, `success-dark`
+- `warning`, `warning-light`, `warning-dark`
+- `error`, `error-light`, `error-dark`
+- `info`, `info-light`, `info-dark`
+
 ## Peer Dependencies
 
-- `tailwindcss` ^3.4.0
+- `tailwindcss` ^3.4.0 or ^4.0.0
 
 ## License
 

package/dist/v4.css

@@ -0,0 +1,290 @@
+/*
+ * Onesaz Tailwind v4 Theme
+ * Import this file in your Tailwind v4 project:
+ * @import "@onesaz/tailwind-config/v4.css";
+ */
+
+@theme {
+  /* ========================================
+   * ACCENT COLORS - Purple
+   * ======================================== */
+  --color-purple-1: #faf5ff;
+  --color-purple-2: #f3e8ff;
+  --color-purple-3: #e9d5ff;
+  --color-purple-4: #d8b4fe;
+  --color-purple-5: #c084fc;
+  --color-purple-6: #a855f7;
+  --color-purple-7: #9333ea;
+  --color-purple-8: #7c3aed;
+  --color-purple-9: #6d28d9;
+  --color-purple-10: #5b21b6;
+  --color-purple-11: #4c1d95;
+  --color-purple-12: #2e1065;
+
+  /* Blue */
+  --color-blue-1: #eff6ff;
+  --color-blue-2: #dbeafe;
+  --color-blue-3: #bfdbfe;
+  --color-blue-4: #93c5fd;
+  --color-blue-5: #60a5fa;
+  --color-blue-6: #3b82f6;
+  --color-blue-7: #2563eb;
+  --color-blue-8: #1d4ed8;
+  --color-blue-9: #1e40af;
+  --color-blue-10: #1e3a8a;
+  --color-blue-11: #172554;
+  --color-blue-12: #0c1a3d;
+
+  /* Cyan */
+  --color-cyan-1: #ecfeff;
+  --color-cyan-2: #cffafe;
+  --color-cyan-3: #a5f3fc;
+  --color-cyan-4: #67e8f9;
+  --color-cyan-5: #22d3ee;
+  --color-cyan-6: #06b6d4;
+  --color-cyan-7: #0891b2;
+  --color-cyan-8: #0e7490;
+  --color-cyan-9: #155e75;
+  --color-cyan-10: #164e63;
+  --color-cyan-11: #083344;
+  --color-cyan-12: #042f2e;
+
+  /* Teal */
+  --color-teal-1: #f0fdfa;
+  --color-teal-2: #ccfbf1;
+  --color-teal-3: #99f6e4;
+  --color-teal-4: #5eead4;
+  --color-teal-5: #2dd4bf;
+  --color-teal-6: #14b8a6;
+  --color-teal-7: #0d9488;
+  --color-teal-8: #0f766e;
+  --color-teal-9: #115e59;
+  --color-teal-10: #134e4a;
+  --color-teal-11: #042f2e;
+  --color-teal-12: #022322;
+
+  /* Green */
+  --color-green-1: #f0fdf4;
+  --color-green-2: #dcfce7;
+  --color-green-3: #bbf7d0;
+  --color-green-4: #86efac;
+  --color-green-5: #4ade80;
+  --color-green-6: #22c55e;
+  --color-green-7: #16a34a;
+  --color-green-8: #15803d;
+  --color-green-9: #166534;
+  --color-green-10: #14532d;
+  --color-green-11: #052e16;
+  --color-green-12: #022c0d;
+
+  /* Orange */
+  --color-orange-1: #fff7ed;
+  --color-orange-2: #ffedd5;
+  --color-orange-3: #fed7aa;
+  --color-orange-4: #fdba74;
+  --color-orange-5: #fb923c;
+  --color-orange-6: #f97316;
+  --color-orange-7: #ea580c;
+  --color-orange-8: #c2410c;
+  --color-orange-9: #9a3412;
+  --color-orange-10: #7c2d12;
+  --color-orange-11: #431407;
+  --color-orange-12: #27130a;
+
+  /* Red */
+  --color-red-1: #fef2f2;
+  --color-red-2: #fee2e2;
+  --color-red-3: #fecaca;
+  --color-red-4: #fca5a5;
+  --color-red-5: #f87171;
+  --color-red-6: #ef4444;
+  --color-red-7: #dc2626;
+  --color-red-8: #b91c1c;
+  --color-red-9: #991b1b;
+  --color-red-10: #7f1d1d;
+  --color-red-11: #450a0a;
+  --color-red-12: #2a0808;
+
+  /* Pink */
+  --color-pink-1: #fdf2f8;
+  --color-pink-2: #fce7f3;
+  --color-pink-3: #fbcfe8;
+  --color-pink-4: #f9a8d4;
+  --color-pink-5: #f472b6;
+  --color-pink-6: #ec4899;
+  --color-pink-7: #db2777;
+  --color-pink-8: #be185d;
+  --color-pink-9: #9d174d;
+  --color-pink-10: #831843;
+  --color-pink-11: #500724;
+  --color-pink-12: #2e0515;
+
+  /* ========================================
+   * GRAY COLORS - Slate
+   * ======================================== */
+  --color-slate-1: #f8fafc;
+  --color-slate-2: #f1f5f9;
+  --color-slate-3: #e2e8f0;
+  --color-slate-4: #cbd5e1;
+  --color-slate-5: #94a3b8;
+  --color-slate-6: #64748b;
+  --color-slate-7: #475569;
+  --color-slate-8: #334155;
+  --color-slate-9: #1e293b;
+  --color-slate-10: #0f172a;
+  --color-slate-11: #020617;
+  --color-slate-12: #010409;
+
+  /* Neutral */
+  --color-neutral-1: #fafafa;
+  --color-neutral-2: #f5f5f5;
+  --color-neutral-3: #e5e5e5;
+  --color-neutral-4: #d4d4d4;
+  --color-neutral-5: #a3a3a3;
+  --color-neutral-6: #737373;
+  --color-neutral-7: #525252;
+  --color-neutral-8: #404040;
+  --color-neutral-9: #262626;
+  --color-neutral-10: #171717;
+  --color-neutral-11: #0a0a0a;
+  --color-neutral-12: #050505;
+
+  /* ========================================
+   * SEMANTIC COLORS
+   * ======================================== */
+  --color-success: #22c55e;
+  --color-success-light: #dcfce7;
+  --color-success-dark: #16a34a;
+
+  --color-warning: #f59e0b;
+  --color-warning-light: #fef3c7;
+  --color-warning-dark: #d97706;
+
+  --color-error: #ef4444;
+  --color-error-light: #fee2e2;
+  --color-error-dark: #dc2626;
+
+  --color-info: #3b82f6;
+  --color-info-light: #dbeafe;
+  --color-info-dark: #2563eb;
+
+  /* ========================================
+   * CSS VARIABLE BASED COLORS (for dynamic theming)
+   * ======================================== */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* ========================================
+   * TYPOGRAPHY
+   * ======================================== */
+  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+
+  /* ========================================
+   * BORDER RADIUS
+   * ======================================== */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;
+  --radius-default: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* ========================================
+   * SHADOWS
+   * ======================================== */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* ========================================
+   * Z-INDEX (high values for modals)
+   * ======================================== */
+  --z-modal: 99999;
+  --z-tooltip: 99998;
+  --z-dropdown: 99997;
+  --z-overlay: 99996;
+
+  /* ========================================
+   * ANIMATIONS
+   * ======================================== */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-fade-out: fade-out 0.2s ease-out;
+  --animate-zoom-in: zoom-in 0.2s ease-out;
+  --animate-zoom-out: zoom-out 0.2s ease-out;
+}
+
+/* Keyframes */
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes zoom-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes zoom-out {
+  from { transform: scale(1); opacity: 1; }
+  to { transform: scale(0.95); opacity: 0; }
+}
+
+@keyframes slide-in-from-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+/* Scan @onesaz/ui for class generation */
+@source "../../node_modules/@onesaz/ui/dist/**/*.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@onesaz/tailwind-config",
-  "version": "0.1.0",
-  "description": "Tailwind CSS preset for Onesaz UI - shared configuration with design tokens",
+  "version": "0.2.0",
+  "description": "Tailwind CSS preset for Onesaz UI - shared configuration with design tokens (supports v3 and v4)",
   "type": "module",
   "license": "MIT",
   "author": "Onesaz <engineering@onesaz.com>",
@@ -18,6 +18,7 @@
     "tailwindcss",
     "tailwind-preset",
     "design-system",
+    "tailwindcss-v4",
     "onesaz"
   ],
   "publishConfig": {
@@ -31,11 +32,13 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./v4": "./dist/v4.css",
+    "./v4.css": "./dist/v4.css"
   },
   "files": ["dist"],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cp src/v4.css dist/v4.css",
     "dev": "tsup --watch",
     "clean": "rm -rf dist"
   },
@@ -48,6 +51,6 @@
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0 || ^4.0.0"
   }
 }