flikkui 0.1.0-beta.11

package/tailwind.preset.cjs

@@ -0,0 +1,102 @@
+/**
+ * Flikkui Tailwind Preset
+ * Usage (Tailwind v3/v4 config file):
+ *   module.exports = { presets: [require('flikkui/tailwind.preset.cjs')] }
+ * This maps Flikkui CSS variables to Tailwind color tokens like bg-primary.
+ */
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: 'var(--color-primary-50)',
+          100: 'var(--color-primary-100)',
+          200: 'var(--color-primary-200)',
+          300: 'var(--color-primary-300)',
+          400: 'var(--color-primary-400)',
+          500: 'var(--color-primary-500)',
+          600: 'var(--color-primary-600)',
+          700: 'var(--color-primary-700)',
+          800: 'var(--color-primary-800)',
+          900: 'var(--color-primary-900)',
+          950: 'var(--color-primary-950)',
+          DEFAULT: 'var(--color-primary-600)'
+        },
+        danger: {
+          50: 'var(--color-danger-50)',
+          100: 'var(--color-danger-100)',
+          200: 'var(--color-danger-200)',
+          300: 'var(--color-danger-300)',
+          400: 'var(--color-danger-400)',
+          500: 'var(--color-danger-500)',
+          600: 'var(--color-danger-600)',
+          700: 'var(--color-danger-700)',
+          800: 'var(--color-danger-800)',
+          900: 'var(--color-danger-900)',
+          950: 'var(--color-danger-950)',
+          DEFAULT: 'var(--color-danger-600)'
+        },
+        success: {
+          50: 'var(--color-success-50)',
+          100: 'var(--color-success-100)',
+          200: 'var(--color-success-200)',
+          300: 'var(--color-success-300)',
+          400: 'var(--color-success-400)',
+          500: 'var(--color-success-500)',
+          600: 'var(--color-success-600)',
+          700: 'var(--color-success-700)',
+          800: 'var(--color-success-800)',
+          900: 'var(--color-success-900)',
+          950: 'var(--color-success-950)',
+          DEFAULT: 'var(--color-success-500)'
+        },
+        warning: {
+          50: 'var(--color-warning-50)',
+          100: 'var(--color-warning-100)',
+          200: 'var(--color-warning-200)',
+          300: 'var(--color-warning-300)',
+          400: 'var(--color-warning-400)',
+          500: 'var(--color-warning-500)',
+          600: 'var(--color-warning-600)',
+          700: 'var(--color-warning-700)',
+          800: 'var(--color-warning-800)',
+          900: 'var(--color-warning-900)',
+          950: 'var(--color-warning-950)',
+          DEFAULT: 'var(--color-warning-600)'
+        },
+        text: {
+          primary: 'var(--color-text-primary)',
+          secondary: 'var(--color-text-secondary)',
+          muted: 'var(--color-text-muted)',
+          placeholder: 'var(--color-text-placeholder)',
+          disabled: 'var(--color-text-disabled)',
+          inverse: 'var(--color-text-inverse)'
+        },
+        background: {
+          DEFAULT: 'var(--color-background)',
+          secondary: 'var(--color-background-secondary)',
+          tertiary: 'var(--color-background-tertiary)',
+          quaternary: 'var(--color-background-quaternary)',
+          quinary: 'var(--color-background-quinary)'
+        },
+        border: 'var(--color-border)'
+      },
+      fontFamily: {
+        sans: ['var(--font-family-base)', 'sans-serif']
+      },
+      fontWeight: {
+        light: 'var(--font-weight-light)',
+        normal: 'var(--font-weight-normal)',
+        medium: 'var(--font-weight-medium)',
+        semibold: 'var(--font-weight-semibold)',
+        bold: 'var(--font-weight-bold)',
+        extrabold: 'var(--font-weight-extrabold)'
+      },
+      borderRadius: {
+        form: 'var(--form-rounded)',
+        button: 'var(--button-rounded)'
+      }
+    }
+  }
+};