ngx-form-designer 0.0.23

package/tailwind.preset.js

@@ -0,0 +1,62 @@
+// Tailwind CSS Preset for ngx-form-designer
+// This file can be used by consumers to inherit the library's design tokens.
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        accent: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          500: '#2563eb',
+          600: '#1d4ed8',
+          700: '#1e40af'
+        },
+        primary: {
+          50: '#ECF3FF', // Primary selected background
+          500: '#3F8CFF', // Primary action
+        },
+        ink: {
+          900: '#0f172a',
+          700: '#1f2937',
+          600: '#374151',
+          500: '#4b5563',
+          400: '#6b7280'
+        },
+        slate: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1'
+        },
+        // Figma Tokens
+        'text-primary': '#1C2431',
+        'text-strong': '#000000',
+        'border-default': '#E6EAF0',
+        'surface-default': '#FFFFFF',
+        'focus-border': '#7FB2FF',
+
+        // Light theme tokens (Webflow-style inspector)
+        'panel-dark': '#ffffff',
+        'input-dark': '#f9fafb',
+        'border-dark': '#e5e7eb',
+        'text-secondary-dark': '#6b7280',
+        'highlight-orange': '#c46c35',
+        'primary-blue': '#0073e6'
+      },
+      borderRadius: {
+        'md': '10px',
+        'lg': '12px'
+      },
+      boxShadow: {
+        'card': '0 1px 2px rgba(15, 23, 42, 0.05)',
+        'popover': '0 10px 40px rgba(15, 23, 42, 0.12)'
+      },
+      fontFamily: {
+        sans: ['Lato', 'Inter', 'Segoe UI', 'system-ui', 'sans-serif']
+      }
+    },
+  },
+}