@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/tailwind.preset.cjs

@@ -3,6 +3,12 @@
  * 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.
+ *
+ * DEFAULT of each semantic color points at the bare base var (var(--color-primary),
+ * not a fixed rung) so `bg-primary` resolves to exactly what the library's own
+ * components paint, and follows the active theme + dark mode automatically:
+ * the monochrome base theme aliases --color-primary -> -900, a colored theme
+ * (e.g. iris) sets it -> -600. Numbered utilities (bg-primary-600) are unchanged.
  */
 
 module.exports = {
@@ -21,7 +27,7 @@ module.exports = {
           800: 'var(--color-primary-800)',
           900: 'var(--color-primary-900)',
           950: 'var(--color-primary-950)',
-          DEFAULT: 'var(--color-primary-600)'
+          DEFAULT: 'var(--color-primary)'
         },
         danger: {
           50: 'var(--color-danger-50)',
@@ -35,7 +41,7 @@ module.exports = {
           800: 'var(--color-danger-800)',
           900: 'var(--color-danger-900)',
           950: 'var(--color-danger-950)',
-          DEFAULT: 'var(--color-danger-600)'
+          DEFAULT: 'var(--color-danger)'
         },
         success: {
           50: 'var(--color-success-50)',
@@ -49,7 +55,7 @@ module.exports = {
           800: 'var(--color-success-800)',
           900: 'var(--color-success-900)',
           950: 'var(--color-success-950)',
-          DEFAULT: 'var(--color-success-500)'
+          DEFAULT: 'var(--color-success)'
         },
         warning: {
           50: 'var(--color-warning-50)',
@@ -63,24 +69,27 @@ module.exports = {
           800: 'var(--color-warning-800)',
           900: 'var(--color-warning-900)',
           950: 'var(--color-warning-950)',
-          DEFAULT: 'var(--color-warning-600)'
+          DEFAULT: 'var(--color-warning)'
         },
-        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)'
+        // The gray/neutral role. Named `mono` (not `neutral`) on purpose:
+        // mapping `neutral` here would override Tailwind's own built-in neutral
+        // palette, so a consumer could no longer reach Tailwind's real neutral.
+        // `mono` leaves neutral/slate/zinc/gray/stone intact for the consumer.
+        mono: {
+          50: 'var(--color-mono-50)',
+          100: 'var(--color-mono-100)',
+          200: 'var(--color-mono-200)',
+          300: 'var(--color-mono-300)',
+          400: 'var(--color-mono-400)',
+          500: 'var(--color-mono-500)',
+          600: 'var(--color-mono-600)',
+          700: 'var(--color-mono-700)',
+          800: 'var(--color-mono-800)',
+          900: 'var(--color-mono-900)',
+          950: 'var(--color-mono-950)',
+          DEFAULT: 'var(--color-mono)'
         },
-        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)',
+        // DEPRECATED (remove next major): alias of the gray scale. Prefer `mono`.
         secondary: {
           50: 'var(--color-secondary-50)',
           100: 'var(--color-secondary-100)',
@@ -93,23 +102,32 @@ module.exports = {
           800: 'var(--color-secondary-800)',
           900: 'var(--color-secondary-900)',
           950: 'var(--color-secondary-950)',
-          DEFAULT: 'var(--color-secondary-600)'
+          DEFAULT: 'var(--color-secondary)'
+        },
+        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)'
+        },
+        // Page/app floor. (background-secondary..quinary were deprecated — use the surface ladder.)
+        background: 'var(--color-background)',
+        // Surface elevation ladder — see docs/SURFACE_ELEVATION.md.
+        surface: {
+          DEFAULT: 'var(--color-surface)',
+          raised: 'var(--color-surface-raised)',
+          overlay: 'var(--color-surface-overlay)',
+          sunken: 'var(--color-surface-sunken)',
+          hover: 'var(--color-surface-hover)'
         },
-        neutral: {
-          50: 'var(--color-neutral-50)',
-          100: 'var(--color-neutral-100)',
-          200: 'var(--color-neutral-200)',
-          300: 'var(--color-neutral-300)',
-          400: 'var(--color-neutral-400)',
-          500: 'var(--color-neutral-500)',
-          600: 'var(--color-neutral-600)',
-          700: 'var(--color-neutral-700)',
-          800: 'var(--color-neutral-800)',
-          900: 'var(--color-neutral-900)',
-          950: 'var(--color-neutral-950)',
-          DEFAULT: 'var(--color-neutral-500)'
+        border: {
+          DEFAULT: 'var(--color-border)',
+          secondary: 'var(--color-border-secondary)',
+          hover: 'var(--color-border-hover)'
         },
-        dark: 'var(--color-neutral-950)'
+        dark: 'var(--color-mono-950)'
       },
       fontFamily: {
         sans: ['var(--font-family-base)', 'sans-serif']

package/dist/components/core/Pill/Pill.animations.d.ts

@@ -1,32 +0,0 @@
-import { Variants } from 'motion/react';
-/**
- * Animation variants for Pill component
- *
- * Reuses Badge's proven animation patterns with spring physics
- * for natural, responsive interactions.
- */
-/**
- * Main pill animation variants
- * Uses spring physics for smooth, natural motion
- */
-export declare const pillVariants: Variants;
-/**
- * Tap/click animation variant
- * Subtle scale down on press for tactile feedback
- */
-export declare const pillTapVariant: {
-    scale: number;
-    transition: {
-        duration: number;
-        type: "spring";
-        stiffness: number;
-        damping: number;
-    };
-};
-/**
- * Utility to check if animations should be enabled
- * Respects user's reduced-motion preference and Storybook environment
- *
- * @returns {boolean} True if animations should be enabled
- */
-export declare const getShouldAnimate: () => boolean;

package/dist/components/core/Pill/Pill.animations.js

@@ -1,16 +0,0 @@
-"use client";
-/**
- * Tap/click animation variant
- * Subtle scale down on press for tactile feedback
- */
-const pillTapVariant = {
-    scale: 0.975,
-    transition: {
-        duration: 0.1,
-        type: 'spring',
-        stiffness: 400,
-        damping: 10,
-    },
-};
-
-export { pillTapVariant };