astralkit 0.2.0 → 0.3.0

package/tailwind.cjs

@@ -0,0 +1,416 @@
+/**
+ * AstralKit Tailwind CSS v3 Compatibility Plugin
+ *
+ * Registers all ak-* design tokens as Tailwind theme extensions
+ * so that utility classes like bg-ak-bg, text-ak-text, p-ak-2, etc.
+ * work in Tailwind v3 projects.
+ *
+ * Usage (tailwind.config.js):
+ *   const astralkit = require('astralkit/tailwind')
+ *   module.exports = { plugins: [astralkit] }
+ *
+ * In Tailwind v4, this plugin is NOT needed — the @theme directive
+ * in astralkit/theme handles everything automatically.
+ */
+
+const plugin = require('tailwindcss/plugin')
+
+// Shared spacing map — used by spacing, width, height, minWidth, minHeight, maxWidth
+// In Tailwind v4 spacing auto-feeds all sizing utils; in v3 we must extend each explicitly
+const AK_SPACING = {
+  'ak-0':    'var(--spacing-ak-0)',
+  'ak-px':   'var(--spacing-ak-px)',
+  'ak-0_5':  'var(--spacing-ak-0_5)',
+  'ak-0.5':  'var(--spacing-ak-0_5)',
+  'ak-1':    'var(--spacing-ak-1)',
+  'ak-1_5':  'var(--spacing-ak-1_5)',
+  'ak-1.5':  'var(--spacing-ak-1_5)',
+  'ak-2':    'var(--spacing-ak-2)',
+  'ak-2_5':  'var(--spacing-ak-2_5)',
+  'ak-2.5':  'var(--spacing-ak-2_5)',
+  'ak-3':    'var(--spacing-ak-3)',
+  'ak-3_5':  'var(--spacing-ak-3_5)',
+  'ak-3.5':  'var(--spacing-ak-3_5)',
+  'ak-4':    'var(--spacing-ak-4)',
+  'ak-4_5':  'var(--spacing-ak-4_5)',
+  'ak-4.5':  'var(--spacing-ak-4_5)',
+  'ak-5':    'var(--spacing-ak-5)',
+  'ak-5_5':  'var(--spacing-ak-5_5)',
+  'ak-5.5':  'var(--spacing-ak-5_5)',
+  'ak-6':    'var(--spacing-ak-6)',
+  'ak-7':    'var(--spacing-ak-7)',
+  'ak-8':    'var(--spacing-ak-8)',
+  'ak-10':   'var(--spacing-ak-10)',
+  'ak-12':   'var(--spacing-ak-12)',
+  'ak-16':   'var(--spacing-ak-16)',
+  'ak-20':   'var(--spacing-ak-20)',
+  'ak-24':   'var(--spacing-ak-24)',
+  'ak-mobile-bar': 'var(--spacing-ak-mobile-bar)',
+}
+
+module.exports = plugin(
+  // Plugin function — intentionally empty.
+  // Token values (CSS custom properties) now live in astralkit-utilities.css
+  // inside @layer ak-tokens. This eliminates duplication and enables
+  // native CSS @layer for cascade control.
+  // Compatible with Tailwind v3 and v4.
+  function () {},
+
+  // Config — extends Tailwind's theme with ak-* utilities
+  {
+    theme: {
+      extend: {
+        /* ── Colors ──
+           Every ak-* color token becomes a Tailwind color utility:
+           bg-ak-bg, text-ak-text, border-ak-border, etc. */
+        colors: {
+          // Neutral scale
+          'ak-neutral-0':   'var(--color-ak-neutral-0)',
+          'ak-neutral-50':  'var(--color-ak-neutral-50)',
+          'ak-neutral-100': 'var(--color-ak-neutral-100)',
+          'ak-neutral-200': 'var(--color-ak-neutral-200)',
+          'ak-neutral-300': 'var(--color-ak-neutral-300)',
+          'ak-neutral-400': 'var(--color-ak-neutral-400)',
+          'ak-neutral-500': 'var(--color-ak-neutral-500)',
+          'ak-neutral-600': 'var(--color-ak-neutral-600)',
+          'ak-neutral-700': 'var(--color-ak-neutral-700)',
+          'ak-neutral-800': 'var(--color-ak-neutral-800)',
+          'ak-neutral-900': 'var(--color-ak-neutral-900)',
+          'ak-neutral-950': 'var(--color-ak-neutral-950)',
+
+          // Primary scale
+          'ak-primary-50':  'var(--color-ak-primary-50)',
+          'ak-primary-100': 'var(--color-ak-primary-100)',
+          'ak-primary-200': 'var(--color-ak-primary-200)',
+          'ak-primary-300': 'var(--color-ak-primary-300)',
+          'ak-primary-400': 'var(--color-ak-primary-400)',
+          'ak-primary-500': 'var(--color-ak-primary-500)',
+          'ak-primary-600': 'var(--color-ak-primary-600)',
+          'ak-primary-700': 'var(--color-ak-primary-700)',
+          'ak-primary-800': 'var(--color-ak-primary-800)',
+          'ak-primary-900': 'var(--color-ak-primary-900)',
+          'ak-primary-950': 'var(--color-ak-primary-950)',
+
+          // Primary action
+          'ak-primary':        'var(--color-ak-primary)',
+          'ak-primary-hover':  'var(--color-ak-primary-hover)',
+          'ak-primary-active': 'var(--color-ak-primary-active)',
+
+          // Semantic surfaces
+          'ak-bg':              'var(--color-ak-bg)',
+          'ak-surface':         'var(--color-ak-surface)',
+          'ak-surface-2':       'var(--color-ak-surface-2)',
+          'ak-hover':           'var(--color-ak-hover)',
+          'ak-active':          'var(--color-ak-active)',
+          'ak-elevated':        'var(--color-ak-elevated)',
+          'ak-on-primary':      'var(--color-ak-on-primary)',
+          'ak-primary-subtle':  'var(--color-ak-primary-subtle)',
+          'ak-overlay':         'var(--color-ak-overlay)',
+
+          // Semantic text
+          'ak-text':            'var(--color-ak-text)',
+          'ak-text-secondary':  'var(--color-ak-text-secondary)',
+          'ak-text-muted':      'var(--color-ak-text-muted)',
+          'ak-text-disabled':   'var(--color-ak-text-disabled)',
+          'ak-text-inverse':    'var(--color-ak-text-inverse)',
+          'ak-text-link':       'var(--color-ak-text-link)',
+          'ak-text-placeholder':'var(--color-ak-text-placeholder)',
+
+          // Semantic border
+          'ak-border':        'var(--color-ak-border)',
+          'ak-border-subtle': 'var(--color-ak-border-subtle)',
+          'ak-border-strong': 'var(--color-ak-border-strong)',
+          'ak-border-focus':  'var(--color-ak-border-focus)',
+
+          // Status
+          'ak-success':        'var(--color-ak-success)',
+          'ak-success-subtle': 'var(--color-ak-success-subtle)',
+          'ak-success-text':   'var(--color-ak-success-text)',
+          'ak-warning':        'var(--color-ak-warning)',
+          'ak-warning-subtle': 'var(--color-ak-warning-subtle)',
+          'ak-warning-text':   'var(--color-ak-warning-text)',
+          'ak-danger':         'var(--color-ak-danger)',
+          'ak-danger-subtle':  'var(--color-ak-danger-subtle)',
+          'ak-danger-text':    'var(--color-ak-danger-text)',
+          'ak-info':           'var(--color-ak-info)',
+          'ak-info-subtle':    'var(--color-ak-info-subtle)',
+          'ak-info-text':      'var(--color-ak-info-text)',
+          'ak-chart-1':       'var(--color-ak-chart-1)',
+          'ak-chart-2':       'var(--color-ak-chart-2)',
+          'ak-chart-3':       'var(--color-ak-chart-3)',
+          'ak-chart-4':       'var(--color-ak-chart-4)',
+          'ak-chart-5':       'var(--color-ak-chart-5)',
+          'ak-chart-6':       'var(--color-ak-chart-6)',
+
+          // Neobrutalist
+          'ak-brutal-ink':          'var(--color-ak-brutal-ink)',
+          'ak-brutal-face':         'var(--color-ak-brutal-face)',
+          'ak-brutal-face-dark':    'var(--color-ak-brutal-face-dark)',
+          'ak-brutal-on-face':      'var(--color-ak-brutal-on-face)',
+          'ak-brutal-on-face-dark': 'var(--color-ak-brutal-on-face-dark)',
+        },
+
+        /* ── Spacing ──
+           p-ak-2, m-ak-3, gap-ak-1, etc.
+           In v3, spacing doesn't auto-feed into w-/h-/min-w-/min-h-/max-w-
+           so we also spread AK_SPACING into those configs below. */
+        spacing: {
+          ...AK_SPACING,
+          // Fluid spacing
+          'ak-fl-3xs': 'clamp(0.25rem, 0.21rem + 0.14vw, 0.375rem)',
+          'ak-fl-2xs': 'clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem)',
+          'ak-fl-xs':  'clamp(0.75rem, 0.65rem + 0.42vw, 1rem)',
+          'ak-fl-sm':  'clamp(1rem, 0.86rem + 0.56vw, 1.5rem)',
+          'ak-fl-md':  'clamp(1.5rem, 1.29rem + 0.83vw, 2rem)',
+          'ak-fl-lg':  'clamp(2rem, 1.72rem + 1.11vw, 3rem)',
+          'ak-fl-xl':  'clamp(3rem, 2.5rem + 1.85vw, 4.5rem)',
+          'ak-fl-2xl': 'clamp(4rem, 3.22rem + 2.78vw, 6rem)',
+          'ak-fl-3xl': 'clamp(6rem, 4.86rem + 4.17vw, 9rem)',
+          // Fluid space pairs
+          'ak-fl-xs-md':  'clamp(0.75rem, 0.43rem + 1.39vw, 2rem)',
+          'ak-fl-xs-lg':  'clamp(0.75rem, 0.14rem + 2.78vw, 3rem)',
+          'ak-fl-sm-lg':  'clamp(1rem, 0.43rem + 2.78vw, 3rem)',
+          'ak-fl-sm-xl':  'clamp(1rem, 0rem + 4.17vw, 4.5rem)',
+          'ak-fl-md-xl':  'clamp(1.5rem, 0.57rem + 3.47vw, 4.5rem)',
+          'ak-fl-md-2xl': 'clamp(1.5rem, 0rem + 5.56vw, 6rem)',
+          'ak-fl-lg-2xl': 'clamp(2rem, 0.57rem + 5.56vw, 6rem)',
+          'ak-fl-xl-3xl': 'clamp(3rem, 0.57rem + 8.33vw, 9rem)',
+          'ak-fl-page-margin': 'var(--spacing-ak-fl-page-margin)',
+        },
+
+        /* ── Font Family ── */
+        fontFamily: {
+          'ak-sans':  ['DM Sans', 'system-ui', '-apple-system', 'sans-serif'],
+          'ak-serif': ['DM Serif Display', 'Georgia', 'serif'],
+          'ak-mono':  ['JetBrains Mono', 'Fira Code', 'ui-monospace', 'monospace'],
+        },
+
+        /* ── Font Size ──
+           text-ak-base, text-ak-lg, text-ak-fl-2xl, etc. */
+        fontSize: {
+          // Static scale
+          'ak-2xs':  'var(--text-ak-2xs)',
+          'ak-xs':   'var(--text-ak-xs)',
+          'ak-sm':   'var(--text-ak-sm)',
+          'ak-base': 'var(--text-ak-base)',
+          'ak-lg':   'var(--text-ak-lg)',
+          'ak-xl':   'var(--text-ak-xl)',
+          'ak-2xl':  'var(--text-ak-2xl)',
+          'ak-3xl':  'var(--text-ak-3xl)',
+          'ak-4xl':  'var(--text-ak-4xl)',
+          'ak-5xl':  'var(--text-ak-5xl)',
+          'ak-6xl':  'var(--text-ak-6xl)',
+          'ak-7xl':  'var(--text-ak-7xl)',
+          'ak-8xl':  'var(--text-ak-8xl)',
+          'ak-9xl':  'var(--text-ak-9xl)',
+          // Fluid scale
+          'ak-fl-xs':   'clamp(0.6875rem, 0.67rem + 0.06vw, 0.75rem)',
+          'ak-fl-sm':   'clamp(0.75rem, 0.71rem + 0.12vw, 0.875rem)',
+          'ak-fl-base': 'clamp(0.875rem, 0.84rem + 0.12vw, 1rem)',
+          'ak-fl-lg':   'clamp(1rem, 0.96rem + 0.12vw, 1.125rem)',
+          'ak-fl-xl':   'clamp(1.125rem, 1.09rem + 0.12vw, 1.25rem)',
+          'ak-fl-2xl':  'clamp(1.25rem, 1.18rem + 0.23vw, 1.5rem)',
+          'ak-fl-3xl':  'clamp(1.5rem, 1.39rem + 0.35vw, 1.875rem)',
+          'ak-fl-4xl':  'clamp(1.875rem, 1.76rem + 0.35vw, 2.25rem)',
+          'ak-fl-5xl':  'clamp(2.25rem, 2.03rem + 0.69vw, 3rem)',
+          'ak-fl-6xl':  'clamp(3rem, 2.78rem + 0.69vw, 3.75rem)',
+          'ak-fl-7xl':  'clamp(3.5rem, 3.2rem + 0.93vw, 4.5rem)',
+          'ak-fl-8xl':  'clamp(4.5rem, 4.06rem + 1.39vw, 6rem)',
+          'ak-fl-9xl':  'clamp(5.25rem, 4.73rem + 1.62vw, 7rem)',
+          // Display scale
+          'ak-display-xs':   'clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)',
+          'ak-display-sm':   'clamp(0.875rem, 0.83rem + 0.19vw, 1rem)',
+          'ak-display-base': 'clamp(1rem, 0.94rem + 0.28vw, 1.1875rem)',
+          'ak-display-lg':   'clamp(1.125rem, 1.01rem + 0.52vw, 1.5rem)',
+          'ak-display-xl':   'clamp(1.25rem, 1.07rem + 0.83vw, 1.875rem)',
+          'ak-display-2xl':  'clamp(1.5rem, 1.2rem + 1.11vw, 2.25rem)',
+          'ak-display-3xl':  'clamp(1.875rem, 1.42rem + 1.67vw, 3rem)',
+          'ak-display-4xl':  'clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem)',
+          'ak-display-5xl':  'clamp(3rem, 2.07rem + 3.47vw, 5.25rem)',
+          'ak-display-6xl':  'clamp(3.75rem, 2.5rem + 4.63vw, 7rem)',
+          'ak-display-7xl':  'clamp(4.5rem, 3.06rem + 5.56vw, 8rem)',
+          'ak-display-8xl':  'clamp(5rem, 3.06rem + 6.94vw, 9rem)',
+          'ak-display-9xl':  'clamp(5.5rem, 3.06rem + 7.64vw, 10rem)',
+        },
+
+        /* ── Line Height ── */
+        lineHeight: {
+          'ak-display': 'var(--leading-ak-display)',
+          'ak-tighter': 'var(--leading-ak-tighter)',
+          'ak-none':    'var(--leading-ak-none)',
+          'ak-tight':   'var(--leading-ak-tight)',
+          'ak-snug':    'var(--leading-ak-snug)',
+          'ak-normal':  'var(--leading-ak-normal)',
+          'ak-relaxed': 'var(--leading-ak-relaxed)',
+          'ak-prose':   'var(--leading-ak-prose)',
+          'ak-loose':   'var(--leading-ak-loose)',
+        },
+
+        /* ── Letter Spacing ── */
+        letterSpacing: {
+          'ak-tighter': 'var(--tracking-ak-tighter)',
+          'ak-tight':   'var(--tracking-ak-tight)',
+          'ak-subtle':  'var(--tracking-ak-subtle)',
+          'ak-normal':  'var(--tracking-ak-normal)',
+          'ak-wide':    'var(--tracking-ak-wide)',
+          'ak-wider':   'var(--tracking-ak-wider)',
+          'ak-widest':  'var(--tracking-ak-widest)',
+          'ak-section': 'var(--tracking-ak-section)',
+        },
+
+        /* ── Border Radius ── */
+        borderRadius: {
+          'ak-none':  'var(--radius-ak-none)',
+          'ak-sm':    'var(--radius-ak-sm)',
+          'ak-md':    'var(--radius-ak-md)',
+          'ak-lg':    'var(--radius-ak-lg)',
+          'ak-xl':    'var(--radius-ak-xl)',
+          'ak-2xl':   'var(--radius-ak-2xl)',
+          'ak-3xl':   'var(--radius-ak-3xl)',
+          'ak-full':  'var(--radius-ak-full)',
+          'ak-input': 'var(--radius-ak-input)',
+          // Neobrutalist
+          'ak-brutal':    'var(--radius-ak-brutal)',
+          'ak-brutal-sm': 'var(--radius-ak-brutal-sm)',
+        },
+
+        /* ── Border Width ── */
+        borderWidth: {
+          'ak-brutal':    'var(--border-ak-brutal)',
+          'ak-brutal-lg': 'var(--border-ak-brutal-lg)',
+        },
+
+        /* ── Box Shadow ── */
+        boxShadow: {
+          'ak-xs':            'var(--shadow-ak-xs)',
+          'ak-sm':            'var(--shadow-ak-sm)',
+          'ak-md':            'var(--shadow-ak-md)',
+          'ak-lg':            'var(--shadow-ak-lg)',
+          'ak-xl':            'var(--shadow-ak-xl)',
+          'ak-2xl':           'var(--shadow-ak-2xl)',
+          'ak-focus':         'var(--shadow-ak-focus)',
+          'ak-focus-primary': 'var(--shadow-ak-focus-primary)',
+          'ak-focus-danger':  'var(--shadow-ak-focus-danger)',
+          'ak-focus-success': 'var(--shadow-ak-focus-success)',
+          // Neobrutalist
+          'ak-brutal-xs':     'var(--shadow-ak-brutal-xs)',
+          'ak-brutal-sm':     'var(--shadow-ak-brutal-sm)',
+          'ak-brutal':        'var(--shadow-ak-brutal)',
+          'ak-brutal-lg':     'var(--shadow-ak-brutal-lg)',
+          'ak-brutal-xl':     'var(--shadow-ak-brutal-xl)',
+          'ak-brutal-none':   '0 0 0 0 #000',
+        },
+
+        /* ── Max Width (containers) ── */
+        maxWidth: {
+          'ak-page':  'var(--container-ak-page)',
+          'ak-xs':    'var(--container-ak-xs)',
+          'ak-sm':    'var(--container-ak-sm)',
+          'ak-md':    'var(--container-ak-md)',
+          'ak-lg':    'var(--container-ak-lg)',
+          'ak-xl':    'var(--container-ak-xl)',
+          'ak-2xl':   'var(--container-ak-2xl)',
+          'ak-3xl':   'var(--container-ak-3xl)',
+          'ak-4xl':   'var(--container-ak-4xl)',
+          'ak-prose': 'var(--container-ak-prose)',
+        },
+
+        /* ── Z-Index (Chakra-inspired scale) ── */
+        zIndex: {
+          'ak-base':      'var(--z-ak-base)',
+          'ak-docked':    'var(--z-ak-docked)',
+          'ak-dropdown':  'var(--z-ak-dropdown)',
+          'ak-sticky':    'var(--z-ak-sticky)',
+          'ak-banner':    'var(--z-ak-banner)',
+          'ak-overlay':   'var(--z-ak-overlay)',
+          'ak-modal':     'var(--z-ak-modal)',
+          'ak-popover':   'var(--z-ak-popover)',
+          'ak-toast':     'var(--z-ak-toast)',
+          'ak-tooltip':   'var(--z-ak-tooltip)',
+        },
+
+        /* ── Height ── (spacing + named heights) */
+        height: {
+          ...AK_SPACING,
+          'ak-nav':        'var(--height-ak-nav)',
+          'ak-touch':      'var(--height-ak-touch)',
+          'ak-control-sm': 'var(--height-ak-control-sm)',
+          'ak-control-md': 'var(--height-ak-control-md)',
+          'ak-control-lg': 'var(--height-ak-control-lg)',
+          'ak-control-xl': 'var(--height-ak-control-xl)',
+          'ak-row-compact':     'var(--height-ak-row-compact)',
+          'ak-row-default':     'var(--height-ak-row-default)',
+          'ak-row-comfortable': 'var(--height-ak-row-comfortable)',
+        },
+
+        /* ── Min Height ── */
+        minHeight: {
+          ...AK_SPACING,
+          'ak-nav':        'var(--height-ak-nav)',
+          'ak-touch':      'var(--height-ak-touch)',
+          'ak-touch-min':  'var(--size-ak-touch-min)',
+          'ak-control-sm': 'var(--height-ak-control-sm)',
+          'ak-control-md': 'var(--height-ak-control-md)',
+          'ak-control-lg': 'var(--height-ak-control-lg)',
+          'ak-control-xl': 'var(--height-ak-control-xl)',
+          'ak-row-compact':     'var(--height-ak-row-compact)',
+          'ak-row-default':     'var(--height-ak-row-default)',
+          'ak-row-comfortable': 'var(--height-ak-row-comfortable)',
+        },
+
+        /* ── Width ── */
+        width: {
+          ...AK_SPACING,
+          'ak-touch':              'var(--width-ak-touch)',
+          'ak-panel-width':        'var(--size-ak-panel-width)',
+          'ak-sidebar-collapsed':  'var(--width-ak-sidebar-collapsed)',
+          'ak-sidebar-expanded':   'var(--width-ak-sidebar-expanded)',
+        },
+
+        /* ── Min Width ── */
+        minWidth: {
+          ...AK_SPACING,
+          'ak-touch':              'var(--width-ak-touch)',
+          'ak-panel-width':        'var(--size-ak-panel-width)',
+          'ak-sidebar-collapsed':  'var(--width-ak-sidebar-collapsed)',
+        },
+
+        /* ── Size (width + height shorthand) ── */
+        size: {
+          ...AK_SPACING,
+          'ak-icon-xs':    'var(--size-ak-icon-xs)',
+          'ak-icon-sm':    'var(--size-ak-icon-sm)',
+          'ak-icon-md':    'var(--size-ak-icon-md)',
+          'ak-icon-lg':    'var(--size-ak-icon-lg)',
+          'ak-icon-xl':    'var(--size-ak-icon-xl)',
+          'ak-icon-2xl':   'var(--size-ak-icon-2xl)',
+          'ak-icon-3xl':   'var(--size-ak-icon-3xl)',
+          'ak-avatar-sm':  'var(--size-ak-avatar-sm)',
+          'ak-avatar-md':  'var(--size-ak-avatar-md)',
+          'ak-avatar-lg':  'var(--size-ak-avatar-lg)',
+          'ak-avatar-xl':  'var(--size-ak-avatar-xl)',
+          'ak-avatar-2xl': 'var(--size-ak-avatar-2xl)',
+          'ak-avatar-3xl': 'var(--size-ak-avatar-3xl)',
+          'ak-touch':      'var(--width-ak-touch)',
+          'ak-touch-min':  'var(--size-ak-touch-min)',
+        },
+
+        /* ── Transition Duration ── */
+        transitionDuration: {
+          'ak-fast': 'var(--duration-ak-fast)',
+          'ak-base': 'var(--duration-ak-base)',
+          'ak-slow': 'var(--duration-ak-slow)',
+        },
+
+        /* ── Transition Timing Function ── */
+        transitionTimingFunction: {
+          'ak-default': 'var(--ease-ak-default)',
+          'ak-in':      'var(--ease-ak-in)',
+          'ak-out':     'var(--ease-ak-out)',
+          'ak-spring':  'var(--ease-ak-spring)',
+          'ak-bounce':  'var(--ease-ak-bounce)',
+        },
+      },
+    },
+  }
+)