@automa8e/ui 0.2.0

package/tailwind/preset.cjs

@@ -0,0 +1,98 @@
+/**
+ * @automa8e/ui Tailwind CSS Preset — CommonJS (Tailwind v3)
+ * Import via: const preset = require('@automa8e/ui/tailwind-v3')
+ *
+ * Color values use var(--x) directly (not hsl(var(--x))) so they resolve
+ * correctly with the oklch CSS vars defined in globals.css.
+ */
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
+/** @type {Omit<import('tailwindcss').Config, 'content'>} */
+const automa8ePreset = {
+  darkMode: ['class'],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          'powder-blue':    '#ECF2FA',
+          'primary-blue':   '#3278A0',
+          'header-blue':    '#44799E',
+          'deep-blue':      '#4B506D',
+          'baby-blue':      '#0F67B1',
+          'soft-blue':      '#E7F5FD',
+          'primary-orange': '#FC6501',
+          'deep-orange':    '#D84132',
+          'success-green':  '#1E791C',
+          'red-danger':     '#ff0000',
+          'mark-gray':      '#E0E6EE',
+          'line-gray':      '#C7C8CA',
+          'item-border':    '#DFE0EB',
+          'primary-gray':   '#939598',
+          'dark-gray':      '#222222',
+        },
+        border:      'var(--border)',
+        input:       'var(--input)',
+        ring:        'var(--ring)',
+        background:  'var(--background)',
+        foreground:  'var(--foreground)',
+        primary:     { DEFAULT: 'var(--primary)',     foreground: 'var(--primary-foreground)' },
+        secondary:   { DEFAULT: 'var(--secondary)',   foreground: 'var(--secondary-foreground)' },
+        destructive: { DEFAULT: 'var(--destructive)', foreground: 'var(--destructive-foreground)' },
+        muted:       { DEFAULT: 'var(--muted)',       foreground: 'var(--muted-foreground)' },
+        accent:      { DEFAULT: 'var(--accent)',      foreground: 'var(--accent-foreground)' },
+        popover:     { DEFAULT: 'var(--popover)',     foreground: 'var(--popover-foreground)' },
+        card:        { DEFAULT: 'var(--card)',        foreground: 'var(--card-foreground)' },
+        success:     { DEFAULT: 'var(--success)',     foreground: 'var(--success-foreground)' },
+        warning:     { DEFAULT: 'var(--warning)',     foreground: 'var(--warning-foreground)' },
+        info:        { DEFAULT: 'var(--info)',        foreground: 'var(--info-foreground)' },
+        workflow: {
+          running:   'var(--workflow-running)',
+          completed: 'var(--workflow-completed)',
+          failed:    'var(--workflow-failed)',
+          pending:   'var(--workflow-pending)',
+          paused:    'var(--workflow-paused)',
+          cancelled: 'var(--workflow-cancelled)',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans:    ['DM Sans',       ...fontFamily.sans],
+        mono:    ['IBM Plex Mono', ...fontFamily.mono],
+        display: ['Syne',          ...fontFamily.sans],
+      },
+      keyframes: {
+        'accordion-down': { from: { height: '0' }, to: { height: 'var(--radix-accordion-content-height)' } },
+        'accordion-up':   { from: { height: 'var(--radix-accordion-content-height)' }, to: { height: '0' } },
+        'fade-in':        { from: { opacity: '0', transform: 'translateY(4px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
+        'slide-in-right': { from: { transform: 'translateX(100%)', opacity: '0' }, to: { transform: 'translateX(0)', opacity: '1' } },
+        'workflow-pulse': {
+          '0%, 100%': { opacity: '1',   boxShadow: '0 0 8px color-mix(in oklch, var(--workflow-running) 50%, transparent)' },
+          '50%':      { opacity: '0.6', boxShadow: '0 0 20px color-mix(in oklch, var(--workflow-running) 80%, transparent)' },
+        },
+        shimmer:     { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' } },
+        'spin-slow': { from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' } },
+      },
+      animation: {
+        'accordion-down':  'accordion-down 0.2s ease-out',
+        'accordion-up':    'accordion-up 0.2s ease-out',
+        'fade-in':         'fade-in 0.15s ease-out',
+        'slide-in-right':  'slide-in-right 0.2s ease-out',
+        'workflow-pulse':  'workflow-pulse 2s ease-in-out infinite',
+        shimmer:           'shimmer 2s linear infinite',
+        'spin-slow':       'spin-slow 3s linear infinite',
+      },
+      boxShadow: {
+        'glow-primary':    '0 0 16px -2px color-mix(in oklch, var(--primary) 40%, transparent)',
+        'glow-primary-lg': '0 0 32px -4px color-mix(in oklch, var(--primary) 30%, transparent)',
+        card:              '0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4)',
+      },
+    },
+  },
+  plugins: [],
+}
+
+module.exports = automa8ePreset

package/tailwind/preset.css

@@ -0,0 +1,5 @@
+/* tailwind/preset.css
+   Full Tailwind v4 setup for @automa8e/ui consumers.
+   Import this ONCE in your root CSS — do not also @import "tailwindcss" separately. */
+@import "tailwindcss";
+@import "../src/styles/globals.css";

package/tailwind/preset.ts

@@ -0,0 +1,159 @@
+/**
+ * @automa8e/ui Tailwind CSS Preset
+ *
+ * @example
+ * import automa8ePreset from '@automa8e/ui/tailwind'
+ *
+ * export default {
+ *   presets: [automa8ePreset],
+ *   content: ['./src/**\/*.{ts,tsx}', './node_modules/@automa8e/ui/src/**\/*.{ts,tsx}'],
+ * }
+ */
+import type { Config } from 'tailwindcss'
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+const { fontFamily } = defaultTheme
+
+const automa8ePreset: Omit<Config, 'content'> = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // ── Automa8e Brand Palette ──────────────────────────────────────────
+        brand: {
+          'powder-blue': '#ECF2FA',
+          'primary-blue': '#3278A0',
+          'header-blue': '#44799E',
+          'deep-blue': '#4B506D',
+          'baby-blue': '#0F67B1',
+          'soft-blue': '#E7F5FD',
+          'primary-orange': '#FC6501',
+          'deep-orange': '#D84132',
+          'success-green': '#1E791C',
+          'red-danger': '#ff0000',
+          'mark-gray': '#E0E6EE',
+          'line-gray': '#C7C8CA',
+          'item-border': '#DFE0EB',
+          'primary-gray': '#939598',
+          'dark-gray': '#222222',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
+        },
+        workflow: {
+          running: 'hsl(var(--workflow-running))',
+          completed: 'hsl(var(--workflow-completed))',
+          failed: 'hsl(var(--workflow-failed))',
+          pending: 'hsl(var(--workflow-pending))',
+          paused: 'hsl(var(--workflow-paused))',
+          cancelled: 'hsl(var(--workflow-cancelled))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['DM Sans', ...fontFamily.sans],
+        mono: ['IBM Plex Mono', ...fontFamily.mono],
+        display: ['Syne', ...fontFamily.sans],
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+        'fade-in': {
+          from: { opacity: '0', transform: 'translateY(4px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-in-right': {
+          from: { transform: 'translateX(100%)', opacity: '0' },
+          to: { transform: 'translateX(0)', opacity: '1' },
+        },
+        'workflow-pulse': {
+          '0%, 100%': {
+            opacity: '1',
+            boxShadow: '0 0 8px hsl(var(--workflow-running) / 0.5)',
+          },
+          '50%': {
+            opacity: '0.6',
+            boxShadow: '0 0 20px hsl(var(--workflow-running) / 0.8)',
+          },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+        'spin-slow': {
+          from: { transform: 'rotate(0deg)' },
+          to: { transform: 'rotate(360deg)' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'fade-in': 'fade-in 0.15s ease-out',
+        'slide-in-right': 'slide-in-right 0.2s ease-out',
+        'workflow-pulse': 'workflow-pulse 2s ease-in-out infinite',
+        shimmer: 'shimmer 2s linear infinite',
+        'spin-slow': 'spin-slow 3s linear infinite',
+      },
+      boxShadow: {
+        'glow-primary': '0 0 16px -2px hsl(var(--primary) / 0.4)',
+        'glow-primary-lg': '0 0 32px -4px hsl(var(--primary) / 0.3)',
+        card: '0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4)',
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default automa8ePreset