@mohasinac/appkit 2.7.16 → 2.7.18

package/dist/ui/components/Breadcrumb.style.css

@@ -25,7 +25,7 @@
 }
 
 .dark .appkit-breadcrumb__separator {
-  color: var(--appkit-color-zinc-600);
+  color: var(--appkit-color-zinc-500);
 }
 
 .appkit-breadcrumb__text {

package/dist/ui/components/ListingLayout.style.css

@@ -49,7 +49,7 @@
   padding-inline: 1rem;
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(161, 161, 170, 0.35); /* zinc-400/35 */
+  border-bottom: 1px solid rgba(161, 161, 170, 0.5); /* zinc-400/50 */
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   padding-block: 0.625rem;
 }

package/dist/ui/components/Select.style.css

@@ -130,7 +130,7 @@
 }
 
 .appkit-select__option--disabled {
-  opacity: 0.4;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 

package/dist/ui/components/SideDrawer.style.css

@@ -25,41 +25,84 @@
   background: var(--appkit-color-surface);
 }
 
-/* Full-viewport width on all breakpoints — navbars (z-50) render over this */
+/* Full-viewport width on mobile; 80% on desktop */
 .appkit-side-drawer--left { left: 0; width: 100%; }
 .appkit-side-drawer--right { right: 0; width: 100%; }
 
+@media (min-width: 1024px) {
+  .appkit-side-drawer--left  { width: 80%; }
+  .appkit-side-drawer--right { width: 80%; }
+}
+
 /* Header */
 .appkit-side-drawer__header {
-  padding: 1.5rem;
+  padding: 1.25rem 1.5rem;
   border-bottom-width: 1px;
+  position: relative;
+}
+
+/* 3-px brand-gradient rule at the very top of the drawer */
+.appkit-side-drawer__header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(
+    to right,
+    var(--appkit-color-primary-700, #1343de) 0%,
+    var(--appkit-color-cobalt, #3570fc)      55%,
+    var(--appkit-color-secondary-400, #84e122) 100%
+  );
+  pointer-events: none;
 }
 
 .appkit-side-drawer__header--view {
-  background-color: var(--appkit-color-bg);
+  background: var(--appkit-color-surface);
   border-color: var(--appkit-color-border);
 }
 :is(.dark) .appkit-side-drawer__header--view {
-  background-color: rgba(15, 23, 42, 0.8);
+  background: rgba(15, 23, 42, 0.9);
   border-color: var(--appkit-color-border);
 }
 
+/* create — soft blue-to-lime wash, echoes the wordmark gradient */
 .appkit-side-drawer__header--create {
-  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05), transparent, rgba(20, 184, 166, 0.03));
-  border-color: var(--appkit-color-border);
+  background: linear-gradient(
+    135deg,
+    rgba(19, 67, 222, 0.07) 0%,
+    rgba(53, 112, 252, 0.05) 55%,
+    rgba(132, 225, 34, 0.04) 100%
+  );
+  border-color: rgba(53, 112, 252, 0.2);
 }
 :is(.dark) .appkit-side-drawer__header--create {
-  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent, rgba(20, 184, 166, 0.025));
-  border-color: var(--appkit-color-border);
+  background: linear-gradient(
+    135deg,
+    rgba(19, 67, 222, 0.18) 0%,
+    rgba(53, 112, 252, 0.12) 55%,
+    rgba(132, 225, 34, 0.06) 100%
+  );
+  border-color: rgba(53, 112, 252, 0.25);
 }
 
+/* edit — warmer blue wash */
 .appkit-side-drawer__header--edit {
-  background: linear-gradient(to right, rgba(251, 191, 36, 0.04), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05));
-  border-color: var(--appkit-color-border);
+  background: linear-gradient(
+    135deg,
+    rgba(53, 112, 252, 0.06) 0%,
+    rgba(132, 225, 34, 0.04) 100%
+  );
+  border-color: rgba(53, 112, 252, 0.15);
 }
 :is(.dark) .appkit-side-drawer__header--edit {
-  background: linear-gradient(to right, rgba(120, 53, 15, 0.15), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));
-  border-color: var(--appkit-color-border);
+  background: linear-gradient(
+    135deg,
+    rgba(53, 112, 252, 0.14) 0%,
+    rgba(132, 225, 34, 0.06) 100%
+  );
+  border-color: rgba(53, 112, 252, 0.2);
 }
 
 .appkit-side-drawer__header--delete {

package/dist/ui/components/Typography.style.css

@@ -162,7 +162,7 @@
 }
 
 .appkit-caption--inverse {
-  color: rgba(101, 196, 8, 0.4);
+  color: var(--appkit-color-secondary-600);     /* dark green — readable on white */
 }
 
 .dark .appkit-caption--default {
@@ -174,5 +174,5 @@
 }
 
 .dark .appkit-caption--inverse {
-  color: rgba(240, 99, 185, 0.5);
+  color: var(--appkit-color-primary-300);       /* #f79dd2 — light pink, readable on dark */
 }

package/dist/ui/rich-text/RichText.style.css

@@ -130,7 +130,7 @@
 .appkit-rich-text a {
   color: #1a55f2;                               /* primary-600 cobalt */
   text-decoration: underline;
-  text-decoration-color: rgba(26, 85, 242, 0.4);
+  text-decoration-color: rgba(26, 85, 242, 0.6);
   text-underline-offset: 2px;
   transition: color 150ms, text-decoration-color 150ms;
 }
@@ -142,7 +142,7 @@
 
 .dark .appkit-rich-text a {
   color: #84e122;                               /* lime green — high contrast on dark bg */
-  text-decoration-color: rgba(132, 225, 34, 0.4);
+  text-decoration-color: rgba(132, 225, 34, 0.6);
 }
 
 .dark .appkit-rich-text a:hover {
@@ -216,7 +216,7 @@
 }
 
 .dark .appkit-rich-text figcaption {
-  color: var(--appkit-color-zinc-500);
+  color: var(--appkit-color-zinc-400);
 }
 
 /* --- Images --------------------------------------------------------------- */
@@ -284,9 +284,8 @@
 .appkit-rich-text del {
   text-decoration: line-through;
   color: var(--appkit-color-zinc-500);
-  opacity: 0.75;
 }
 
 .dark .appkit-rich-text del {
-  color: var(--appkit-color-zinc-600);
+  color: var(--appkit-color-zinc-400);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.16",
+  "version": "2.7.18",
   "license": "MIT",
   "publishConfig": {
     "access": "public"