@dimaan/ui 0.0.28 → 0.0.30

package/dist/preset.css

@@ -105,7 +105,7 @@
   --color-popover-foreground: oklch(0.16 0.018 264);
 
   /* Brand */
-  --color-primary: oklch(0.55 0.22 264);
+  --color-primary: oklch(0.55 0.1 195);
   --color-primary-foreground: oklch(0.985 0.002 264);
 
   /* Accent (hover / subtle highlight) */
@@ -124,10 +124,44 @@
   --color-warning: oklch(0.78 0.16 80);
   --color-warning-foreground: oklch(0.205 0 0);
 
+  /* Soft-badge text — dark, AA-readable on a translucent /15 tint of each status color */
+  --color-primary-soft-foreground: oklch(0.42 0.08 195);
+  --color-success-soft-foreground: oklch(0.43 0.13 145);
+  --color-warning-soft-foreground: oklch(0.47 0.09 70);
+  --color-destructive-soft-foreground: oklch(0.47 0.19 27);
+
+  /* ── Bold gradient + glow — signature moments only ───────────── */
+  --gradient-primary: linear-gradient(
+    135deg,
+    oklch(0.64 0.24 295),
+    oklch(0.55 0.25 270) 55%,
+    oklch(0.62 0.2 230)
+  );
+  --color-primary-glow: oklch(0.55 0.1 195 / 0.4);
+
+  /* Primary button "tactile" depth — colored bloom follows --color-primary-glow */
+  --shadow-btn: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0.2 0.03 264 / 0.25), 0 5px 14px -4px var(--color-primary-glow);
+  --shadow-btn-hover: inset 0 1px 0 oklch(1 0 0 / 0.28), 0 2px 5px oklch(0.2 0.03 264 / 0.25), 0 10px 24px -5px var(--color-primary-glow);
+  --shadow-btn-active: inset 0 1px 2px oklch(0.2 0.03 264 / 0.4);
+
+  /* Semantic solid buttons (destructive/success/warning) — same tactile material as
+     primary but a neutral bloom, so primary stays the brand-glow hero. */
+  --shadow-solid: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 1px 2px oklch(0.2 0.03 264 / 0.22), 0 4px 12px -4px oklch(0.2 0.03 264 / 0.22);
+  --shadow-solid-hover: inset 0 1px 0 oklch(1 0 0 / 0.24), 0 2px 5px oklch(0.2 0.03 264 / 0.22), 0 9px 22px -5px oklch(0.2 0.03 264 / 0.28);
+  --shadow-solid-active: inset 0 1px 2px oklch(0.2 0.03 264 / 0.38);
+
+  /* Elevated surface — premium cards and the data-table container */
+  --shadow-card: 0 1px 2px oklch(0.2 0.03 264 / 0.05), 0 12px 28px -14px oklch(0.2 0.03 264 / 0.16);
+
+  /* ── Glass surfaces — sidebar, header, overlays ──────────────── */
+  --glass-bg: oklch(1 0 0 / 0.55);
+  --glass-border: oklch(1 0 0 / 0.6);
+  --glass-blur: 20px;
+
   /* Borders & inputs */
   --color-border: oklch(0.92 0.006 264);
   --color-input: oklch(0.92 0.006 264);
-  --color-ring: oklch(0.55 0.22 264);
+  --color-ring: oklch(0.55 0.1 195);
 
   /* Sidebar surface (slightly tinted off the main background) */
   --color-sidebar: oklch(0.985 0.004 264);
@@ -214,9 +248,22 @@
   --color-popover-foreground: oklch(0.96 0.004 264);
 
   /* Brand — a touch brighter so it pops against dark surfaces */
-  --color-primary: oklch(0.62 0.2 264);
+  --color-primary: oklch(0.6 0.1 195);
   --color-primary-foreground: oklch(0.985 0.004 264);
 
+  /* Bold gradient + glow — brighter to pop on dark surfaces */
+  --gradient-primary: linear-gradient(
+    135deg,
+    oklch(0.7 0.22 295),
+    oklch(0.62 0.22 270) 55%,
+    oklch(0.66 0.18 230)
+  );
+  --color-primary-glow: oklch(0.6 0.1 195 / 0.5);
+
+  /* Glass — dark frosted surfaces */
+  --glass-bg: oklch(0.28 0.02 264 / 0.5);
+  --glass-border: oklch(1 0 0 / 0.12);
+
   /* Accent */
   --color-accent: oklch(0.27 0.022 264);
   --color-accent-foreground: oklch(0.96 0.004 264);
@@ -233,10 +280,19 @@
   --color-warning: oklch(0.8 0.15 80);
   --color-warning-foreground: oklch(0.2 0.01 80);
 
+  /* Soft-badge text — light, AA-readable on a translucent /15 tint in dark mode */
+  --color-primary-soft-foreground: oklch(0.8 0.09 195);
+  --color-success-soft-foreground: oklch(0.8 0.14 145);
+  --color-warning-soft-foreground: oklch(0.84 0.13 85);
+  --color-destructive-soft-foreground: oklch(0.78 0.15 27);
+
+  /* Elevated surface — stronger in dark so the lift reads on dark backgrounds */
+  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.4), 0 14px 30px -14px oklch(0 0 0 / 0.6);
+
   /* Borders & inputs */
   --color-border: oklch(0.27 0.016 264);
   --color-input: oklch(0.3 0.016 264);
-  --color-ring: oklch(0.62 0.2 264);
+  --color-ring: oklch(0.6 0.1 195);
 
   /* Sidebar surface */
   --color-sidebar: oklch(0.205 0.014 264);
@@ -330,11 +386,22 @@
 @utility zoom-out-95 {
   --tw-exit-scale: 0.95;
 }
+@utility bg-gradient-primary {
+  background-image: var(--gradient-primary);
+}
+
+@utility glass {
+  background-color: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
+  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
+  border: 1px solid var(--glass-border);
+}
+
 
-/* Respect users who ask for less motion. */
+/* Respect users who prefer reduced motion: neutralize our entrance animations. */
 @media (prefers-reduced-motion: reduce) {
   .animate-in,
   .animate-out {
-    animation: none;
+    animation: none !important;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimaan/ui",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Shared React UI component library for Diman company projects.",
   "license": "UNLICENSED",
   "private": false,