@mohasinac/appkit 3.1.2 → 3.1.4

package/dist/tokens/themes/default-dark.js

@@ -62,7 +62,7 @@ export const DEFAULT_DARK_THEME = {
         "appkit-font-mono": "ui-monospace, \"SFMono-Regular\", \"Cascadia Mono\", \"Consolas\", monospace",
     },
     gradients: {
-        brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-primary-400))",
+        brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-info))",
         "brand-tri": "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary), var(--appkit-color-info))",
         accent: "linear-gradient(to right, var(--appkit-color-info), var(--appkit-color-primary))",
         "accent-divider": "linear-gradient(to right, transparent, var(--appkit-color-primary), transparent)",
@@ -79,6 +79,7 @@ export const DEFAULT_DARK_THEME = {
         "card-teal": "linear-gradient(to bottom right, rgba(56,189,248,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-amber": "linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-rose": "linear-gradient(to bottom right, var(--appkit-color-error-surface), var(--appkit-color-surface), var(--appkit-color-surface))",
-        logo: "linear-gradient(to right, var(--appkit-color-primary-700) 0%, var(--appkit-color-primary-500) 55%, var(--appkit-color-secondary-400) 100%)",
+        logo: "linear-gradient(to right, var(--appkit-color-primary-300) 0%, var(--appkit-color-primary-400) 55%, var(--appkit-color-info) 100%)",
+        sidebar: "linear-gradient(to bottom, var(--appkit-color-primary), var(--appkit-color-info))",
     },
 };

package/dist/tokens/themes/default-light.js

@@ -86,5 +86,6 @@ export const DEFAULT_LIGHT_THEME = {
         "card-amber": "linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-rose": "linear-gradient(to bottom right, var(--appkit-color-error-surface), var(--appkit-color-surface), var(--appkit-color-surface))",
         logo: "linear-gradient(to right, var(--appkit-color-primary-700) 0%, var(--appkit-color-primary-500) 55%, var(--appkit-color-secondary-400) 100%)",
+        sidebar: "linear-gradient(to bottom, var(--appkit-color-primary-700), var(--appkit-color-secondary-500))",
     },
 };

package/dist/tokens/themes/types.d.ts

@@ -34,4 +34,4 @@ export interface ThemeRecord {
     gradients: Readonly<Record<GradientKey, string>>;
 }
 /** The named gradient slots every theme must declare. */
-export type GradientKey = "brand" | "brand-tri" | "accent" | "accent-divider" | "page-header" | "section-warm" | "section-cool" | "section-mesh" | "accent-banner" | "promotion" | "spotlight" | "whatsapp-card" | "glass" | "card-indigo" | "card-teal" | "card-amber" | "card-rose" | "logo";
+export type GradientKey = "brand" | "brand-tri" | "accent" | "accent-divider" | "page-header" | "section-warm" | "section-cool" | "section-mesh" | "accent-banner" | "promotion" | "spotlight" | "whatsapp-card" | "glass" | "card-indigo" | "card-teal" | "card-amber" | "card-rose" | "logo" | "sidebar";

package/dist/tokens/tokens.css

@@ -303,6 +303,12 @@
   --appkit-gradient-card-amber:       linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface), var(--appkit-color-surface));
   --appkit-gradient-card-rose:        linear-gradient(to bottom right, var(--appkit-color-error-surface), var(--appkit-color-surface), var(--appkit-color-surface));
   --appkit-gradient-logo:             linear-gradient(to right, var(--appkit-color-primary-700) 0%, var(--appkit-color-primary-500) 55%, var(--appkit-color-secondary-400) 100%);
+  --appkit-gradient-sidebar:          linear-gradient(to bottom, var(--appkit-color-primary-700), var(--appkit-color-secondary-500));
+  /* Per-stop variables so SiteLogo SVG can reference each stop individually
+     (SVG linearGradient cannot consume a full CSS gradient value directly). */
+  --appkit-logo-stop-from:            var(--appkit-color-primary-700);
+  --appkit-logo-stop-mid:             var(--appkit-color-primary-500);
+  --appkit-logo-stop-to:              var(--appkit-color-secondary-400);
 }
 
 /* --- Theme — Dark ([data-theme="dark"]) ----------------------------------- */
@@ -362,17 +368,29 @@
   --appkit-shadow-glow-pink:       0 0 0 1px rgba(233,30,140,0.14), 0 4px 20px -4px rgba(233,30,140,0.28);
 
   /* Dark-mode gradient overrides */
-  --appkit-gradient-brand:           linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-primary-400));
+  --appkit-gradient-brand:           linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-info));
   --appkit-gradient-brand-tri:       linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary), var(--appkit-color-info));
   --appkit-gradient-accent:          linear-gradient(to right, var(--appkit-color-info), var(--appkit-color-primary));
   --appkit-gradient-accent-divider:  linear-gradient(to right, transparent, var(--appkit-color-primary), transparent);
   --appkit-gradient-page-header:     linear-gradient(to bottom right, rgba(233,30,140,0.10), transparent 60%, transparent);
+  --appkit-gradient-section-warm:    linear-gradient(to bottom right, var(--appkit-color-warning-surface), transparent);
   --appkit-gradient-section-cool:    linear-gradient(to bottom right, rgba(56,189,248,0.10), transparent);
   --appkit-gradient-section-mesh:    radial-gradient(ellipse at top, rgba(233,30,140,0.10), var(--appkit-color-surface), rgba(56,189,248,0.08));
   --appkit-gradient-accent-banner:   linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-info));
+  --appkit-gradient-promotion:       linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning));
   --appkit-gradient-spotlight:       linear-gradient(to bottom right, rgba(56,189,248,0.10), var(--appkit-color-bg), rgba(56,189,248,0.10));
+  --appkit-gradient-whatsapp-card:   linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success));
+  --appkit-gradient-glass:           linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent));
   --appkit-gradient-card-indigo:     linear-gradient(to bottom right, rgba(233,30,140,0.10), var(--appkit-color-surface), var(--appkit-color-surface));
   --appkit-gradient-card-teal:       linear-gradient(to bottom right, rgba(56,189,248,0.10), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-card-amber:      linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-card-rose:       linear-gradient(to bottom right, var(--appkit-color-error-surface), var(--appkit-color-surface), var(--appkit-color-surface));
+  --appkit-gradient-logo:            linear-gradient(to right, var(--appkit-color-primary-300) 0%, var(--appkit-color-primary-400) 55%, var(--appkit-color-info) 100%);
+  --appkit-gradient-sidebar:         linear-gradient(to bottom, var(--appkit-color-primary), var(--appkit-color-info));
+  /* Logo stop overrides — lighter shades visible on dark (#020617) background */
+  --appkit-logo-stop-from:           var(--appkit-color-primary-300);
+  --appkit-logo-stop-mid:            var(--appkit-color-primary-400);
+  --appkit-logo-stop-to:             var(--appkit-color-info);
 }
 
 /* --- Theme — Cobalt Night ([data-theme="cobalt-night"]) ------------------- */
@@ -408,6 +426,10 @@
   --appkit-color-focus-ring:       #8eb9ff;
   --appkit-shadow-glow:            0 0 0 1px rgba(89,146,255,0.18), 0 4px 16px -4px rgba(89,146,255,0.30);
   --appkit-shadow-glow-pink:       0 0 0 1px rgba(89,146,255,0.18), 0 4px 20px -4px rgba(89,146,255,0.30);
+  /* Logo stops — lighter cobalt blues visible on #111e58 background */
+  --appkit-logo-stop-from:         var(--appkit-color-primary-300);
+  --appkit-logo-stop-mid:          var(--appkit-color-primary-400);
+  --appkit-logo-stop-to:           var(--appkit-color-secondary);
 }
 
 /* --- Theme — Sunset ([data-theme="sunset"]) ------------------------------- */

package/dist/ui/components/SiteLogo.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * LetItRip site logo — SVG wordmark "LetItRip" + small ".in" superscript.
@@ -9,8 +10,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Sizes are responsive presets — the variant catalogue forbids consumer-side
  * className overrides on primitive components.
  */
+import { useId } from "react";
 import { MediaImage } from "../../features/media/MediaImage";
-const GRADIENT_ID = "appkit-logo-gradient";
+// Gradient ID prefix — made unique per instance via useId() to prevent
+// cross-SVG id conflicts when multiple SiteLogo components share the page.
+const GRADIENT_ID_PREFIX = "appkit-logo-gradient";
 const SIZE_HEIGHTS = {
     sm: "h-5",
     md: "h-7 md:h-9 lg:h-10",
@@ -18,7 +22,7 @@ const SIZE_HEIGHTS = {
     xl: "h-12 md:h-16 lg:h-20",
     hero: "h-24 xl:h-32 2xl:h-40",
 };
-function resolveFill(tone) {
+function resolveFill(tone, gradientId) {
     switch (tone) {
         case "mono":
             return "currentColor";
@@ -28,19 +32,21 @@ function resolveFill(tone) {
             return "var(--appkit-color-text)";
         case "brand":
         default:
-            return `url(#${GRADIENT_ID})`;
+            return `url(#${gradientId})`;
     }
 }
 export function SiteLogo({ size = "md", tone = "brand", title = "LetItRip.in", src, }) {
+    const uid = useId();
+    const gradientId = `${GRADIENT_ID_PREFIX}-${uid.replace(/:/g, "")}`;
     const heightCls = SIZE_HEIGHTS[size];
     if (src) {
         return (_jsx(MediaImage, { src: src, alt: title, size: "thumbnail", objectFit: "contain", 
             // backed by the catalogued `size` enum; no consumer-provided overrides.
             className: `block w-auto ${heightCls}` }));
     }
-    const fill = resolveFill(tone);
+    const fill = resolveFill(tone, gradientId);
     const isGradient = tone === "brand";
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", 
         // backed by the catalogued `size` enum; no consumer-provided overrides.
-        className: `block w-auto ${heightCls}`, children: [_jsx("title", { children: title }), isGradient && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-primary-500)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+        className: `block w-auto ${heightCls}`, children: [_jsx("title", { children: title }), isGradient && (_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-logo-stop-from)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-logo-stop-mid)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-logo-stop-to)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -240,3 +240,4 @@
     "vitest": "^4.1.7"
   }
 }
+