@mohasinac/appkit 2.4.10 → 2.5.0

package/dist/tokens/tokens.css

@@ -82,6 +82,138 @@
   --appkit-color-accent-950:       #222730;
 }
 
+/* --- Colour — Extended Palettes ------------------------------------------ */
+/* Tailwind-aligned palette scales. Pure values — no dark-mode override needed.   */
+/* Used by component CSS to reference specific shades via var(--appkit-color-*).  */
+:root {
+  /* Zinc (neutrals used for borders, muted text, surfaces) */
+  --appkit-color-zinc-50:  #fafafa;
+  --appkit-color-zinc-100: #f4f4f5;
+  --appkit-color-zinc-200: #e4e4e7;
+  --appkit-color-zinc-300: #d4d4d8;
+  --appkit-color-zinc-400: #a1a1aa;
+  --appkit-color-zinc-500: #71717a;
+  --appkit-color-zinc-600: #52525b;
+  --appkit-color-zinc-700: #3f3f46;
+  --appkit-color-zinc-800: #27272a;
+  --appkit-color-zinc-900: #18181b;
+  --appkit-color-zinc-950: #09090b;
+
+  /* Slate (used for dark-mode chrome, dev tools, panel backgrounds) */
+  --appkit-color-slate-50:  #f8fafc;
+  --appkit-color-slate-100: #f1f5f9;
+  --appkit-color-slate-200: #e2e8f0;
+  --appkit-color-slate-300: #cbd5e1;
+  --appkit-color-slate-400: #94a3b8;
+  --appkit-color-slate-500: #64748b;
+  --appkit-color-slate-600: #475569;
+  --appkit-color-slate-700: #334155;
+  --appkit-color-slate-800: #1e293b;
+  --appkit-color-slate-900: #0f172a;
+  --appkit-color-slate-950: #020617;
+
+  /* Emerald (success states, verified badges) */
+  --appkit-color-emerald-50:  #ecfdf5;
+  --appkit-color-emerald-100: #d1fae5;
+  --appkit-color-emerald-200: #a7f3d0;
+  --appkit-color-emerald-300: #6ee7b7;
+  --appkit-color-emerald-400: #34d399;
+  --appkit-color-emerald-500: #10b981;
+  --appkit-color-emerald-600: #059669;
+  --appkit-color-emerald-700: #047857;
+  --appkit-color-emerald-800: #065f46;
+  --appkit-color-emerald-900: #064e3b;
+  --appkit-color-emerald-950: #022c22;
+
+  /* Amber (warning states, pending badges) */
+  --appkit-color-amber-50:  #fffbeb;
+  --appkit-color-amber-100: #fef3c7;
+  --appkit-color-amber-200: #fde68a;
+  --appkit-color-amber-300: #fcd34d;
+  --appkit-color-amber-400: #fbbf24;
+  --appkit-color-amber-500: #f59e0b;
+  --appkit-color-amber-600: #d97706;
+  --appkit-color-amber-700: #b45309;
+  --appkit-color-amber-800: #92400e;
+  --appkit-color-amber-900: #78350f;
+  --appkit-color-amber-950: #451a03;
+
+  /* Rose (danger states, rejected badges) */
+  --appkit-color-rose-50:  #fff1f2;
+  --appkit-color-rose-100: #ffe4e6;
+  --appkit-color-rose-200: #fecdd3;
+  --appkit-color-rose-300: #fda4af;
+  --appkit-color-rose-400: #fb7185;
+  --appkit-color-rose-500: #f43f5e;
+  --appkit-color-rose-600: #e11d48;
+  --appkit-color-rose-700: #be123c;
+  --appkit-color-rose-800: #9f1239;
+  --appkit-color-rose-900: #881337;
+  --appkit-color-rose-950: #4c0519;
+
+  /* Sky (info states, link colors) */
+  --appkit-color-sky-50:  #f0f9ff;
+  --appkit-color-sky-100: #e0f2fe;
+  --appkit-color-sky-200: #bae6fd;
+  --appkit-color-sky-300: #7dd3fc;
+  --appkit-color-sky-400: #38bdf8;
+  --appkit-color-sky-500: #0ea5e9;
+  --appkit-color-sky-600: #0284c7;
+  --appkit-color-sky-700: #0369a1;
+  --appkit-color-sky-800: #075985;
+  --appkit-color-sky-900: #0c4a6e;
+  --appkit-color-sky-950: #082f49;
+
+  /* Purple (admin badges, premium states) */
+  --appkit-color-purple-50:  #faf5ff;
+  --appkit-color-purple-100: #f3e8ff;
+  --appkit-color-purple-200: #e9d5ff;
+  --appkit-color-purple-300: #d8b4fe;
+  --appkit-color-purple-400: #c084fc;
+  --appkit-color-purple-500: #a855f7;
+  --appkit-color-purple-600: #9333ea;
+  --appkit-color-purple-700: #7e22ce;
+  --appkit-color-purple-800: #6b21a8;
+  --appkit-color-purple-900: #581c87;
+  --appkit-color-purple-950: #3b0764;
+
+  /* Teal (seller badges, verified states) */
+  --appkit-color-teal-50:  #f0fdfa;
+  --appkit-color-teal-100: #ccfbf1;
+  --appkit-color-teal-200: #99f6e4;
+  --appkit-color-teal-300: #5eead4;
+  --appkit-color-teal-400: #2dd4bf;
+  --appkit-color-teal-500: #14b8a6;
+  --appkit-color-teal-600: #0d9488;
+  --appkit-color-teal-700: #0f766e;
+  --appkit-color-teal-800: #115e59;
+  --appkit-color-teal-900: #134e4a;
+  --appkit-color-teal-950: #042f2e;
+
+  /* Green (active/live indicators, availability) */
+  --appkit-color-green-50:  #f0fdf4;
+  --appkit-color-green-100: #dcfce7;
+  --appkit-color-green-200: #bbf7d0;
+  --appkit-color-green-300: #86efac;
+  --appkit-color-green-400: #4ade80;
+  --appkit-color-green-500: #22c55e;
+  --appkit-color-green-600: #16a34a;
+  --appkit-color-green-700: #15803d;
+  --appkit-color-green-800: #166534;
+  --appkit-color-green-900: #14532d;
+  --appkit-color-green-950: #052e16;
+}
+
+/* --- Colour — Social Brand Tokens ---------------------------------------- */
+:root {
+  --appkit-color-instagram:  #E1306C;
+  --appkit-color-facebook:   #1877F2;
+  --appkit-color-tiktok:     #010101;
+  --appkit-color-deviantart: #05CC47;
+  --appkit-color-whatsapp:   #25D366;
+  --appkit-color-youtube:    #FF0000;
+}
+
 /* --- Colour — Semantic (light mode defaults) ------------------------------ */
 :root {
   --appkit-color-bg:               #fafafa;    /* zinc-50 */
@@ -99,10 +231,16 @@
   --appkit-color-text-on-dark:     #ffffff;
 
   --appkit-color-success:          #059669;    /* emerald-600 */
+  --appkit-color-success-surface:  #ecfdf5;    /* emerald-50 */
   --appkit-color-warning:          #d97706;    /* amber-600 */
   --appkit-color-warning-surface:  #fffbeb;    /* amber-50 */
   --appkit-color-error:            #dc2626;    /* red-600 */
+  --appkit-color-error-hover:      #ef4444;    /* red-500 — danger button hover */
+  --appkit-color-error-surface:    #fef2f2;    /* red-50 */
+  --appkit-color-error-title:      #7f1d1d;    /* red-900 */
+  --appkit-color-error-text:       #991b1b;    /* red-800 */
   --appkit-color-info:             #0284c7;    /* sky-600 */
+  --appkit-color-info-surface:     #f0f9ff;    /* sky-50 */
 
   --appkit-color-focus-ring:       #3570fc;    /* primary-500 = cobalt blue */
 }
@@ -152,10 +290,15 @@
   --appkit-color-text-faint:       #71717a;    /* zinc-500 */
 
   --appkit-color-success:          #34d399;    /* emerald-400 */
+  --appkit-color-success-surface:  rgba(6, 78, 59, 0.25);
   --appkit-color-warning:          #fbbf24;    /* amber-400 */
   --appkit-color-warning-surface:  #1c1508;    /* dark amber tint */
   --appkit-color-error:            #f87171;    /* red-400 */
+  --appkit-color-error-surface:    rgba(127, 29, 29, 0.25);
+  --appkit-color-error-title:      #fecaca;    /* red-200 */
+  --appkit-color-error-text:       #fca5a5;    /* red-300 */
   --appkit-color-info:             #38bdf8;    /* sky-400 */
+  --appkit-color-info-surface:     rgba(12, 74, 110, 0.25);
 
   --appkit-color-focus-ring:       #f063b9;    /* primary-400 in dark = hot pink */
   /* Dark-mode glow: use hot pink instead of cobalt */
@@ -237,21 +380,48 @@
 
 /* --- Z-index -------------------------------------------------------------- */
 :root {
-  --appkit-z-dropdown: 30;
+  --appkit-z-below:          -1;
+  --appkit-z-base:            0;
+  --appkit-z-raised:         10;
+  --appkit-z-dropdown:       30;
   --appkit-z-search-backdrop: 35;
-  --appkit-z-navbar:   40;
-  --appkit-z-bottom-nav: 40;
-  --appkit-z-sidebar:  50;
-  --appkit-z-title-bar: 50;
-  --appkit-z-overlay:  45;
-  --appkit-z-modal:    60;
-  --appkit-z-toast:    70;
+  --appkit-z-overlay:        45;
+  --appkit-z-navbar:         40;
+  --appkit-z-bottom-nav:     40;
+  --appkit-z-sidebar:        50;
+  --appkit-z-title-bar:      50;
+  --appkit-z-modal:          60;
+  --appkit-z-toast:          70;
+  --appkit-z-tooltip:        80;
 
   /* Layout dimensions */
-  --appkit-navbar-height:    2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */
-  --appkit-sidebar-width:    20rem;   /* w-80 = 320px */
-  --appkit-bottom-nav-height: 3.5rem; /* h-14 = 56px */
-  --appkit-title-bar-height: 3rem;    /* h-12 = 48px */
+  --appkit-navbar-height:     2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */
+  --appkit-sidebar-width:     20rem;   /* w-80 = 320px */
+  --appkit-bottom-nav-height: 3.5rem;  /* h-14 = 56px */
+  --appkit-title-bar-height:  3rem;    /* h-12 = 48px */
+}
+
+/* --- Component Sizes ------------------------------------------------------- */
+:root {
+  /* Input heights */
+  --appkit-size-input-sm: 2rem;     /*  32px */
+  --appkit-size-input-md: 2.5rem;   /*  40px */
+  --appkit-size-input-lg: 2.75rem;  /*  44px */
+
+  /* Avatar sizes */
+  --appkit-size-avatar-xs: 1.5rem;  /*  24px */
+  --appkit-size-avatar-sm: 2rem;    /*  32px */
+  --appkit-size-avatar-md: 2.5rem;  /*  40px */
+  --appkit-size-avatar-lg: 3rem;    /*  48px */
+}
+
+/* --- Grid ------------------------------------------------------------------ */
+:root {
+  /* Minimum column widths for auto-fill grid layouts (used in minmax()) */
+  --appkit-grid-min-card-xs: 130px;
+  --appkit-grid-min-card-sm: 160px;
+  --appkit-grid-min-card:    220px;
+  --appkit-grid-min-card-lg: 300px;
 }
 
 /* --- Transition ----------------------------------------------------------- */

package/dist/ui/DataTable.style.css

@@ -1,190 +1,192 @@
-/* DataTable — sortable, paginated, multi-view data table */
-
-.appkit-data-table {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-data-table__wrapper {
-  border-radius: 1rem;
-  border: 1px solid #e4e4e7;
-  overflow: hidden;
-}
-
-:is(.dark) .appkit-data-table__wrapper {
-  border-color: #334155;
-}
-
-.appkit-data-table__scroll {
-  overflow-x: auto;
-}
-
-.appkit-data-table__scroll--sticky {
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-.appkit-data-table__table {
-  min-width: 100%;
-}
-
-.appkit-data-table__thead {
-  background: #fafafa;
-}
-
-:is(.dark) .appkit-data-table__thead {
-  background: #1e293b;
-}
-
-.appkit-data-table__thead--sticky {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.appkit-data-table__th {
-  padding: 0.75rem 1.5rem;
-  text-align: left;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #71717a;
-}
-
-:is(.dark) .appkit-data-table__th {
-  color: #a1a1aa;
-}
-
-.appkit-data-table__th--sortable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.appkit-data-table__th--sortable:hover {
-  background: #f4f4f5;
-}
-
-:is(.dark) .appkit-data-table__th--sortable:hover {
-  background: #334155;
-}
-
-.appkit-data-table__tbody {
-  background: white;
-}
-
-:is(.dark) .appkit-data-table__tbody {
-  background: #0f172a;
-}
-
-.appkit-data-table__row {
-  transition: background-color 0.15s ease;
-}
-
-.appkit-data-table__row--striped {
-  background: #fafafa;
-}
-
-:is(.dark) .appkit-data-table__row--striped {
-  background: #1e293b;
-}
-
-.appkit-data-table__row--clickable {
-  cursor: pointer;
-}
-
-.appkit-data-table__row--clickable:hover {
-  background: #fafafa;
-}
-
-:is(.dark) .appkit-data-table__row--clickable:hover {
-  background: rgba(30, 41, 59, 0.6);
-}
-
-.appkit-data-table__td {
-  padding: 1rem 1.5rem;
-  white-space: nowrap;
-  font-size: 0.875rem;
-  color: #18181b;
-}
-
-:is(.dark) .appkit-data-table__td {
-  color: #f4f4f5;
-}
-
-.appkit-data-table__td--actions {
-  text-align: right;
-  font-weight: 500;
-}
-
-.appkit-data-table__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 16rem;
-}
-
-.appkit-data-table__loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 16rem;
-}
-
-.appkit-data-table__pagination {
-  display: flex;
-  justify-content: center;
-}
-
-.appkit-data-table__view-toggle {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.25rem;
-}
-
-.appkit-data-table__view-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  box-shadow: inset 0 0 0 1px #e4e4e7;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  color: #71717a;
-}
-
-:is(.dark) .appkit-data-table__view-btn {
-  color: #a1a1aa;
-  box-shadow: inset 0 0 0 1px #334155;
-}
-
-.appkit-data-table__view-btn:hover {
-  background: #f4f4f5;
-}
-
-:is(.dark) .appkit-data-table__view-btn:hover {
-  background: #1e293b;
-}
-
-.appkit-data-table__view-btn--active {
-  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.05);
-  color: var(--color-primary, #6366f1);
-  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb, 99, 102, 241), 0.3);
-}
-
-:is(.dark) .appkit-data-table__view-btn--active {
-  background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
-}
-
-.appkit-data-table__mobile-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-data-table__mobile-cards {
-    display: none;
-  }
-}
+/* DataTable — sortable, paginated, multi-view data table */
+
+.appkit-data-table {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.appkit-data-table__wrapper {
+  border-radius: 1rem;
+  border: 1px solid var(--appkit-color-border);
+  overflow: hidden;
+}
+
+:is(.dark) .appkit-data-table__wrapper {
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-data-table__scroll {
+  overflow-x: auto;
+}
+
+.appkit-data-table__scroll--sticky {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.appkit-data-table__table {
+  min-width: 100%;
+}
+
+.appkit-data-table__thead {
+  background: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-data-table__thead {
+  background: var(--appkit-color-slate-800);
+}
+
+.appkit-data-table__thead--sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--appkit-z-raised);
+}
+
+.appkit-data-table__th {
+  padding: 0.75rem 1.5rem;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: var(--appkit-tracking-wider);
+  color: var(--appkit-color-zinc-500);
+}
+
+:is(.dark) .appkit-data-table__th {
+  color: var(--appkit-color-text-faint);
+}
+
+.appkit-data-table__th--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.appkit-data-table__th--sortable:hover {
+  background: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-data-table__th--sortable:hover {
+  background: var(--appkit-color-border);
+}
+
+.appkit-data-table__tbody {
+  background: var(--appkit-color-surface);
+}
+
+:is(.dark) .appkit-data-table__tbody {
+  background: var(--appkit-color-surface);
+}
+
+.appkit-data-table__row {
+  transition: background-color 0.15s ease;
+}
+
+.appkit-data-table__row--striped {
+  background: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-data-table__row--striped {
+  background: var(--appkit-color-slate-800);
+}
+
+.appkit-data-table__row--clickable {
+  cursor: pointer;
+}
+
+.appkit-data-table__row--clickable:hover {
+  background: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-data-table__row--clickable:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+.appkit-data-table__td {
+  padding: 1rem 1.5rem;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  color: var(--appkit-color-text);
+}
+
+:is(.dark) .appkit-data-table__td {
+  color: var(--appkit-color-zinc-100);
+}
+
+.appkit-data-table__td--actions {
+  text-align: right;
+  font-weight: 500;
+}
+
+.appkit-data-table__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16rem;
+}
+
+.appkit-data-table__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16rem;
+}
+
+.appkit-data-table__pagination {
+  display: flex;
+  justify-content: center;
+}
+
+.appkit-data-table__view-toggle {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.appkit-data-table__view-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 1px var(--appkit-color-border);
+  transition: background-color 0.15s ease, color 0.15s ease;
+  color: var(--appkit-color-zinc-500);
+}
+
+:is(.dark) .appkit-data-table__view-btn {
+  color: var(--appkit-color-text-faint);
+  box-shadow: inset 0 0 0 1px var(--appkit-color-border);
+}
+
+.appkit-data-table__view-btn:hover {
+  background: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-data-table__view-btn:hover {
+  background: var(--appkit-color-slate-800);
+}
+
+.appkit-data-table__view-btn--active {
+  background: rgba(80, 156, 2, 0.05);
+  color: var(--appkit-color-secondary-600);
+  box-shadow: inset 0 0 0 1px rgba(80, 156, 2, 0.3);
+}
+
+:is(.dark) .appkit-data-table__view-btn--active {
+  background: rgba(233, 30, 140, 0.1);
+  color: var(--appkit-color-primary);
+  box-shadow: inset 0 0 0 1px rgba(233, 30, 140, 0.3);
+}
+
+.appkit-data-table__mobile-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-data-table__mobile-cards {
+    display: none;
+  }
+}