organify-ui 0.2.16 → 0.3.2

package/dist/tokens/index.d.ts

@@ -1,35 +1,37 @@
 /**
  * @organify/ui — Color Tokens
  *
- * Organify Organic Design System — 3 Themes:
- *   Dark  (Organic-Dark)  — deep void, glassmorphism, glow accents
- *   Cream (Organic-Cream) — soft whites, indigo accents, light glass
- *   Fluid (Library)       — vibrant mesh, neon glows, deep blacks
+ * Organify Organic Design System — Vibrant Violet
+ *   Purple-dominant glassmorphism with violet accents.
+ *   Inspired by the Organify landing page aesthetic.
+ *
+ *   Themes: Dark (default), Cream (light), Fluid (vibrant)
  */
 declare const colors: {
     readonly primary: {
-        readonly DEFAULT: "#241979";
-        readonly light: "#4C35DE";
-        readonly soft: "#3A2E9E";
-        readonly electric: "#4F39F6";
-        readonly 'electric-light': "#7C6AF8";
-        readonly dark: "#0f0a38";
+        readonly DEFAULT: "#7C3AED";
+        readonly light: "#A78BFA";
+        readonly soft: "#6D28D9";
+        readonly electric: "#8B5CF6";
+        readonly 'electric-light': "#C4B5FD";
+        readonly dark: "#4C1D95";
+        readonly deep: "#3B0764";
     };
     readonly neutral: {
-        readonly 900: "#191919";
-        readonly 875: "#0b0c10";
-        readonly 850: "#161618";
-        readonly 800: "#1F1F21";
-        readonly 750: "#1a1a1c";
-        readonly 700: "#2A2A2E";
-        readonly 600: "#3a3a3e";
-        readonly 500: "#6B6B76";
-        readonly 400: "#9CA3AF";
-        readonly 300: "#d1d5db";
-        readonly 200: "#e5e7eb";
-        readonly 100: "#f3f4f6";
-        readonly 50: "#F9F9F7";
-        readonly 25: "#FEFEFD";
+        readonly 900: "#0D0A1A";
+        readonly 875: "#110E22";
+        readonly 850: "#16122E";
+        readonly 800: "#1A1530";
+        readonly 750: "#211B3A";
+        readonly 700: "#2A2245";
+        readonly 600: "#352D52";
+        readonly 500: "#7B7394";
+        readonly 400: "#A49BBF";
+        readonly 300: "#C4BDD9";
+        readonly 200: "#DDD8EB";
+        readonly 100: "#F0ECF9";
+        readonly 50: "#F8F6FC";
+        readonly 25: "#FCFBFE";
         readonly 0: "#FFFFFF";
     };
     readonly semantic: {
@@ -37,76 +39,102 @@ declare const colors: {
             readonly DEFAULT: "#10B981";
             readonly light: "#34d399";
             readonly dark: "#065f46";
-            readonly surface: "rgba(16, 185, 129, 0.10)";
+            readonly surface: "rgba(16, 185, 129, 0.12)";
             readonly border: "rgba(16, 185, 129, 0.30)";
         };
         readonly warning: {
             readonly DEFAULT: "#F59E0B";
             readonly light: "#fbbf24";
             readonly dark: "#92400e";
-            readonly surface: "rgba(245, 158, 11, 0.10)";
+            readonly surface: "rgba(245, 158, 11, 0.12)";
             readonly border: "rgba(245, 158, 11, 0.30)";
         };
         readonly error: {
-            readonly DEFAULT: "#E0115F";
-            readonly light: "#f43f5e";
-            readonly dark: "#9f1239";
-            readonly surface: "rgba(244, 63, 94, 0.10)";
-            readonly border: "rgba(244, 63, 94, 0.30)";
+            readonly DEFAULT: "#EF4444";
+            readonly light: "#f87171";
+            readonly dark: "#991b1b";
+            readonly surface: "rgba(239, 68, 68, 0.12)";
+            readonly border: "rgba(239, 68, 68, 0.30)";
         };
         readonly info: {
             readonly DEFAULT: "#3B82F6";
             readonly light: "#60a5fa";
             readonly dark: "#1e40af";
-            readonly surface: "rgba(59, 130, 246, 0.10)";
+            readonly surface: "rgba(59, 130, 246, 0.12)";
             readonly border: "rgba(59, 130, 246, 0.30)";
         };
     };
     readonly glass: {
-        readonly bg: "rgba(31, 31, 33, 0.40)";
-        readonly bgHeavy: "rgba(31, 31, 33, 0.80)";
-        readonly surface: "rgba(31, 31, 33, 0.70)";
-        readonly border: "rgba(255, 255, 255, 0.03)";
-        readonly borderMedium: "rgba(255, 255, 255, 0.08)";
-        readonly borderStrong: "rgba(255, 255, 255, 0.20)";
-        readonly highlight: "rgba(255, 255, 255, 0.05)";
+        readonly bg: "rgba(124, 58, 237, 0.06)";
+        readonly bgHeavy: "rgba(124, 58, 237, 0.12)";
+        readonly surface: "rgba(255, 255, 255, 0.05)";
+        readonly border: "rgba(167, 139, 250, 0.15)";
+        readonly borderMedium: "rgba(167, 139, 250, 0.25)";
+        readonly borderStrong: "rgba(167, 139, 250, 0.40)";
+        readonly highlight: "rgba(255, 255, 255, 0.06)";
         readonly white5: "rgba(255, 255, 255, 0.05)";
         readonly white10: "rgba(255, 255, 255, 0.10)";
         readonly white20: "rgba(255, 255, 255, 0.20)";
         readonly white40: "rgba(255, 255, 255, 0.40)";
     };
     readonly cream: {
-        readonly base: "#F9F9F7";
-        readonly surface: "rgba(255, 255, 255, 0.70)";
-        readonly surfaceStrong: "rgba(255, 255, 255, 0.90)";
-        readonly border: "rgba(255, 255, 255, 0.60)";
-        readonly borderMedium: "rgba(36, 25, 121, 0.06)";
-        readonly borderStrong: "rgba(36, 25, 121, 0.15)";
-        readonly glassBorder: "rgba(36, 25, 121, 0.03)";
-        readonly text: "#191919";
-        readonly textMuted: "#6B6B76";
-        readonly textSubtle: "#9CA3AF";
+        readonly base: "#F8F6FC";
+        readonly surface: "rgba(255, 255, 255, 0.75)";
+        readonly surfaceStrong: "rgba(255, 255, 255, 0.92)";
+        readonly border: "rgba(124, 58, 237, 0.08)";
+        readonly borderMedium: "rgba(124, 58, 237, 0.12)";
+        readonly borderStrong: "rgba(124, 58, 237, 0.20)";
+        readonly glassBorder: "rgba(124, 58, 237, 0.04)";
+        readonly text: "#1A1530";
+        readonly textMuted: "#7B7394";
+        readonly textSubtle: "#A49BBF";
     };
     readonly fluid: {
-        readonly bg: "rgba(255, 255, 255, 0.03)";
-        readonly surface: "#161618";
-        readonly border: "rgba(255, 255, 255, 0.05)";
-        readonly borderMedium: "rgba(255, 255, 255, 0.08)";
-        readonly borderStrong: "rgba(255, 255, 255, 0.10)";
-        readonly highlight: "rgba(255, 255, 255, 0.05)";
-        readonly primarySoft: "rgba(124, 106, 248, 0.20)";
+        readonly bg: "rgba(124, 58, 237, 0.05)";
+        readonly surface: "#1A1530";
+        readonly border: "rgba(167, 139, 250, 0.08)";
+        readonly borderMedium: "rgba(167, 139, 250, 0.12)";
+        readonly borderStrong: "rgba(167, 139, 250, 0.18)";
+        readonly highlight: "rgba(167, 139, 250, 0.06)";
+        readonly primarySoft: "rgba(124, 58, 237, 0.20)";
+    };
+    readonly liquid: {
+        readonly void: "#0D0A1A";
+        readonly surface: "#110E22";
+        readonly elevated: "#1A1530";
+        readonly card: "#13102A";
+        readonly text: "#F0ECF9";
+        readonly textSecondary: "#C4BDD9";
+        readonly textMuted: "#7B7394";
+        readonly border: "rgba(139, 92, 246, 0.10)";
+        readonly borderMedium: "rgba(139, 92, 246, 0.18)";
+        readonly borderStrong: "rgba(167, 139, 250, 0.28)";
+        readonly glassBg: "rgba(124, 58, 237, 0.06)";
+        readonly glassBgHeavy: "rgba(17, 14, 34, 0.85)";
+        readonly glassSurface: "rgba(17, 14, 34, 0.70)";
+        readonly glassBorder: "rgba(139, 92, 246, 0.08)";
+        readonly glassBorderMedium: "rgba(139, 92, 246, 0.15)";
+        readonly glassBorderStrong: "rgba(167, 139, 250, 0.25)";
+        readonly glassHighlight: "rgba(167, 139, 250, 0.06)";
+        readonly primaryViolet: "#7C3AED";
+        readonly primaryPurple: "#A855F7";
+        readonly primaryLavender: "#C4B5FD";
+        readonly primaryDeep: "#6D28D9";
+        readonly primarySoft: "rgba(124, 58, 237, 0.20)";
+        readonly accentGlow: "rgba(124, 58, 237, 0.40)";
+        readonly grainOpacity: "0.04";
     };
     readonly status: {
         readonly inFlow: {
-            readonly bg: "rgba(99, 102, 241, 0.20)";
-            readonly text: "#c7d2fe";
-            readonly border: "rgba(99, 102, 241, 0.30)";
-            readonly dot: "#818cf8";
+            readonly bg: "rgba(124, 58, 237, 0.20)";
+            readonly text: "#C4B5FD";
+            readonly border: "rgba(124, 58, 237, 0.30)";
+            readonly dot: "#A78BFA";
         };
         readonly deepWork: {
-            readonly bg: "rgba(217, 70, 239, 0.10)";
+            readonly bg: "rgba(217, 70, 239, 0.12)";
             readonly text: "#f0abfc";
-            readonly border: "rgba(217, 70, 239, 0.20)";
+            readonly border: "rgba(217, 70, 239, 0.22)";
         };
         readonly resting: {
             readonly bg: "rgba(245, 158, 11, 0.15)";
@@ -114,9 +142,9 @@ declare const colors: {
             readonly border: "rgba(245, 158, 11, 0.30)";
         };
         readonly disconnected: {
-            readonly bg: "rgba(244, 63, 94, 0.15)";
+            readonly bg: "rgba(239, 68, 68, 0.15)";
             readonly text: "#fecdd3";
-            readonly border: "rgba(244, 63, 94, 0.30)";
+            readonly border: "rgba(239, 68, 68, 0.30)";
         };
     };
 };
@@ -125,38 +153,39 @@ type Colors = typeof colors;
 /**
  * @organify/ui — Typography Tokens
  *
- * Space Grotesk font family — variable weight (300–700).
- * Geometric precision, maximal legibility.
+ * Space Grotesk — primary font, geometric & modern.
+ * Inter kept as secondary/fallback.
+ * Display headings use italic style for landing aesthetic.
  */
 declare const fontFamily: {
-    readonly sans: readonly ["Space Grotesk", "system-ui", "-apple-system", "sans-serif"];
+    readonly sans: readonly ["Space Grotesk", "Inter", "system-ui", "-apple-system", "sans-serif"];
     readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
 };
 declare const fontSize: {
     readonly 'display-xl': readonly ["5rem", {
-        readonly lineHeight: "0.85";
+        readonly lineHeight: "0.90";
         readonly letterSpacing: "-0.04em";
-        readonly fontWeight: "100";
+        readonly fontWeight: "300";
     }];
     readonly 'display-lg': readonly ["4rem", {
-        readonly lineHeight: "0.9";
+        readonly lineHeight: "0.95";
         readonly letterSpacing: "-0.03em";
-        readonly fontWeight: "100";
+        readonly fontWeight: "300";
     }];
     readonly 'heading-xl': readonly ["2.5rem", {
         readonly lineHeight: "1.1";
         readonly letterSpacing: "-0.02em";
-        readonly fontWeight: "300";
+        readonly fontWeight: "400";
     }];
     readonly 'heading-lg': readonly ["1.5rem", {
         readonly lineHeight: "1.2";
         readonly letterSpacing: "-0.01em";
-        readonly fontWeight: "300";
+        readonly fontWeight: "400";
     }];
     readonly 'heading-md': readonly ["1.25rem", {
         readonly lineHeight: "1.3";
         readonly letterSpacing: "-0.01em";
-        readonly fontWeight: "300";
+        readonly fontWeight: "400";
     }];
     readonly 'heading-sm': readonly ["1rem", {
         readonly lineHeight: "1.4";
@@ -180,8 +209,8 @@ declare const fontSize: {
     }];
     readonly label: readonly ["0.625rem", {
         readonly lineHeight: "1.3";
-        readonly letterSpacing: "0.2em";
-        readonly fontWeight: "600";
+        readonly letterSpacing: "0.15em";
+        readonly fontWeight: "500";
     }];
     readonly 'mono-xs': readonly ["0.625rem", {
         readonly lineHeight: "1.4";
@@ -239,35 +268,45 @@ type Spacing = typeof spacing;
 /**
  * @organify/ui — Shadow Tokens
  *
- * Organic Design System — depth & glow layers.
+ * Organic Design System — violet-tinted depth & glow layers.
  */
 declare const shadows: {
-    readonly glass: "0 20px 40px -10px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)";
-    readonly 'glass-sm': "0 8px 32px 0 rgba(0, 0, 0, 0.30)";
-    readonly 'glass-lg': "0 20px 60px -15px rgba(0, 0, 0, 0.50)";
-    readonly 'glass-xl': "20px 20px 60px rgba(0, 0, 0, 0.50)";
-    readonly 'cream-glass': "0 10px 40px -10px rgba(36, 25, 121, 0.04), inset 0 0 20px rgba(255, 255, 255, 0.50)";
-    readonly 'cream-soft': "0 20px 60px -15px rgba(36, 25, 121, 0.05)";
-    readonly 'cream-glow': "0 0 15px rgba(36, 25, 121, 0.10)";
-    readonly 'cream-btn': "0 8px 20px rgba(36, 25, 121, 0.08)";
-    readonly 'cream-btn-primary': "0 4px 12px rgba(36, 25, 121, 0.10)";
-    readonly 'inner-light': "inset 0 2px 4px 0 rgba(255, 255, 255, 0.80)";
-    readonly 'neon-glow': "0 0 15px rgba(124, 106, 248, 0.30), 0 0 30px rgba(124, 106, 248, 0.10)";
-    readonly 'neon-glow-sm': "0 0 8px rgba(124, 106, 248, 0.30)";
-    readonly 'neon-glow-lg': "0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20)";
-    readonly 'soft-glow': "0 0 20px rgba(255, 255, 255, 0.05)";
-    readonly 'glow-primary': "0 0 25px rgba(76, 53, 222, 0.60)";
-    readonly 'glow-soft': "0 0 60px rgba(36, 25, 121, 0.15)";
-    readonly 'glow-indigo': "0 0 15px rgba(36, 25, 121, 0.60)";
+    readonly glass: "0 24px 80px -15px rgba(13, 10, 26, 0.60)";
+    readonly 'glass-sm': "0 8px 32px -8px rgba(13, 10, 26, 0.50)";
+    readonly 'glass-lg': "0 32px 100px -20px rgba(13, 10, 26, 0.70)";
+    readonly 'glass-xl': "0 40px 120px -20px rgba(13, 10, 26, 0.80)";
+    readonly 'cream-glass': "0 10px 40px -10px rgba(124, 58, 237, 0.06), inset 0 0 20px rgba(255, 255, 255, 0.50)";
+    readonly 'cream-soft': "0 20px 60px -15px rgba(124, 58, 237, 0.08)";
+    readonly 'cream-glow': "0 0 15px rgba(124, 58, 237, 0.12)";
+    readonly 'cream-btn': "0 8px 20px rgba(124, 58, 237, 0.10)";
+    readonly 'cream-btn-primary': "0 4px 12px rgba(124, 58, 237, 0.15)";
+    readonly 'inner-light': "inset 0 1px 0 0 rgba(167, 139, 250, 0.08)";
+    readonly 'neon-glow': "0 0 15px rgba(124, 58, 237, 0.35), 0 0 30px rgba(124, 58, 237, 0.15)";
+    readonly 'neon-glow-sm': "0 0 8px rgba(124, 58, 237, 0.30)";
+    readonly 'neon-glow-lg': "0 0 30px rgba(124, 58, 237, 0.45), 0 0 60px rgba(124, 58, 237, 0.20)";
+    readonly 'soft-glow': "0 0 20px rgba(124, 58, 237, 0.08)";
+    readonly 'glow-primary': "0 0 25px rgba(124, 58, 237, 0.50)";
+    readonly 'glow-soft': "0 0 60px rgba(124, 58, 237, 0.18)";
+    readonly 'glow-indigo': "0 0 15px rgba(124, 58, 237, 0.50)";
     readonly 'glow-success': "0 0 20px rgba(16, 185, 129, 0.20)";
     readonly 'glow-warning': "0 0 20px rgba(245, 158, 11, 0.20)";
-    readonly 'glow-error': "0 0 20px rgba(244, 63, 94, 0.20)";
+    readonly 'glow-error': "0 0 20px rgba(239, 68, 68, 0.20)";
     readonly 'glow-info': "0 0 20px rgba(59, 130, 246, 0.20)";
-    readonly 'asymmetric-glow': "0 0 60px -15px rgba(99, 91, 255, 0.30)";
-    readonly sharp: "4px 4px 0px 0px rgba(36, 25, 121, 1)";
+    readonly 'asymmetric-glow': "0 0 60px -15px rgba(124, 58, 237, 0.35)";
+    readonly sharp: "4px 4px 0px 0px rgba(124, 58, 237, 1)";
     readonly 'status-online': "0 0 8px rgba(74, 222, 128, 0.80)";
-    readonly 'status-flow': "0 0 8px rgba(129, 140, 248, 0.80)";
-    readonly 'status-primary': "0 0 15px rgba(79, 57, 246, 0.50)";
+    readonly 'status-flow': "0 0 8px rgba(167, 139, 250, 0.80)";
+    readonly 'status-primary': "0 0 15px rgba(124, 58, 237, 0.50)";
+    readonly 'liquid-glass': "0 8px 32px rgba(13, 10, 26, 0.60), inset 0 1px 0 0 rgba(167, 139, 250, 0.06)";
+    readonly 'liquid-glass-sm': "0 4px 16px rgba(13, 10, 26, 0.40)";
+    readonly 'liquid-glass-lg': "0 16px 48px rgba(13, 10, 26, 0.70), inset 0 1px 0 0 rgba(167, 139, 250, 0.08)";
+    readonly 'liquid-glass-xl': "0 24px 64px rgba(13, 10, 26, 0.80), inset 0 1px 0 0 rgba(167, 139, 250, 0.10)";
+    readonly 'liquid-glow': "0 0 20px rgba(124, 58, 237, 0.30), 0 0 40px rgba(168, 85, 247, 0.15)";
+    readonly 'liquid-glow-sm': "0 0 12px rgba(124, 58, 237, 0.25)";
+    readonly 'liquid-glow-lg': "0 0 40px rgba(124, 58, 237, 0.40), 0 0 80px rgba(168, 85, 247, 0.20)";
+    readonly 'liquid-glow-primary': "0 0 24px rgba(124, 58, 237, 0.35), 0 4px 16px rgba(124, 58, 237, 0.20)";
+    readonly 'liquid-neon': "0 0 15px rgba(124, 58, 237, 0.50), 0 0 30px rgba(168, 85, 247, 0.25)";
+    readonly 'liquid-inner': "inset 0 1px 0 0 rgba(167, 139, 250, 0.08)";
 };
 type Shadows = typeof shadows;
 
@@ -375,6 +414,49 @@ declare const animation: {
                 readonly transform: "translateY(0)";
             };
         };
+        readonly 'liquid-reveal': {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateY(8px) scale(0.98)";
+                readonly filter: "blur(4px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateY(0) scale(1)";
+                readonly filter: "blur(0)";
+            };
+        };
+        readonly 'liquid-fade': {
+            readonly from: {
+                readonly opacity: "0";
+                readonly backdropFilter: "blur(0px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly backdropFilter: "blur(40px)";
+            };
+        };
+        readonly 'liquid-glow-pulse': {
+            readonly '0%, 100%': {
+                readonly opacity: "0.3";
+                readonly boxShadow: "0 0 20px rgba(124, 58, 237, 0.20)";
+            };
+            readonly '50%': {
+                readonly opacity: "0.6";
+                readonly boxShadow: "0 0 40px rgba(124, 58, 237, 0.40)";
+            };
+        };
+        readonly 'grain-drift': {
+            readonly '0%': {
+                readonly transform: "translate(0, 0)";
+            };
+            readonly '50%': {
+                readonly transform: "translate(-2%, -1%)";
+            };
+            readonly '100%': {
+                readonly transform: "translate(0, 0)";
+            };
+        };
     };
     readonly durations: {
         readonly fast: "150ms";

package/dist/tokens/index.js

@@ -1,4 +1,4 @@
-export { animation, borderRadius, colors, fontFamily, fontSize, fontWeight, shadows } from '../chunk-HZXKUGFH.js';
+export { animation, borderRadius, colors, fontFamily, fontSize, fontWeight, shadows } from '../chunk-UGX6D3AO.js';
 
 // src/tokens/spacing.ts
 var spacing = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "organify-ui",
-  "version": "0.2.16",
-  "description": "Organify Design System — Geometric glass-morphism UI components, branded icons, i18n, and theme system for React",
+  "version": "0.3.2",
+  "description": "Organify Design System — Liquid Glass UI components with glassmorphism, branded icons, i18n, and theme system for React",
   "license": "MIT",
   "author": "Organify <dev@organify.studio>",
   "homepage": "https://github.com/organify/organify/tree/main/packages/ui#readme",