@mohasinac/appkit 2.4.11 → 2.5.1

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

@@ -1,71 +1,71 @@
-/* Avatar — circular image or initials display with size variants */
-
-.appkit-avatar {
-  border-radius: 9999px;
-  object-fit: cover;
-  background: #f4f4f5;
-}
-
-.appkit-avatar--fallback {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: #e4e4e7;
-  font-weight: 500;
-  color: #3f3f46;
-}
-
-/* Sizes */
-.appkit-avatar--xs {
-  height: 1.5rem;
-  width: 1.5rem;
-  font-size: 10px;
-}
-.appkit-avatar--sm {
-  height: 2rem;
-  width: 2rem;
-  font-size: 0.75rem;
-}
-.appkit-avatar--md {
-  height: 2.5rem;
-  width: 2.5rem;
-  font-size: 0.875rem;
-}
-.appkit-avatar--lg {
-  height: 3rem;
-  width: 3rem;
-  font-size: 1rem;
-}
-
-/* Group */
-.appkit-avatar-group {
-  display: flex;
-}
-.appkit-avatar-group > * + * {
-  margin-left: -0.5rem;
-}
-.appkit-avatar-group__overflow {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  ring: 2px solid white;
-  background: #d4d4d8;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #3f3f46;
-}
-
-/* Dark mode */
-.dark .appkit-avatar {
-  background: #1e293b;
-}
-.dark .appkit-avatar--fallback {
-  background: #334155;
-  color: #e2e8f0;
-}
-.dark .appkit-avatar-group__overflow {
-  background: #475569;
-  color: #e2e8f0;
-}
+/* Avatar — circular image or initials display with size variants */
+
+.appkit-avatar {
+  border-radius: 9999px;
+  object-fit: cover;
+  background: var(--appkit-color-zinc-100);
+}
+
+.appkit-avatar--fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--appkit-color-zinc-200);
+  font-weight: 500;
+  color: var(--appkit-color-zinc-700);
+}
+
+/* Sizes */
+.appkit-avatar--xs {
+  height: 1.5rem;
+  width: 1.5rem;
+  font-size: var(--appkit-text-2xs);
+}
+.appkit-avatar--sm {
+  height: 2rem;
+  width: 2rem;
+  font-size: 0.75rem;
+}
+.appkit-avatar--md {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 0.875rem;
+}
+.appkit-avatar--lg {
+  height: 3rem;
+  width: 3rem;
+  font-size: 1rem;
+}
+
+/* Group */
+.appkit-avatar-group {
+  display: flex;
+}
+.appkit-avatar-group > * + * {
+  margin-left: -0.5rem;
+}
+.appkit-avatar-group__overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  ring: 2px solid white;
+  background: var(--appkit-color-zinc-300);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--appkit-color-zinc-700);
+}
+
+/* Dark mode */
+.dark .appkit-avatar {
+  background: var(--appkit-color-slate-800);
+}
+.dark .appkit-avatar--fallback {
+  background: var(--appkit-color-slate-700);
+  color: var(--appkit-color-text);
+}
+.dark .appkit-avatar-group__overflow {
+  background: var(--appkit-color-slate-600);
+  color: var(--appkit-color-text);
+}

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

@@ -23,17 +23,17 @@
 .appkit-avatar-display__initials {
   user-select: none;
   font-weight: 600;
-  color: white;
+  color: var(--appkit-color-text-on-primary);
 }
 
 /* Image variant */
 .appkit-avatar-display--image {
   position: relative;
-  background-color: #f4f4f5;
+  background-color: var(--appkit-color-zinc-100);
 }
 
 :is(.dark) .appkit-avatar-display--image {
-  background-color: #1e293b;
+  background-color: var(--appkit-color-slate-800);
 }
 
 .appkit-avatar-display__image {

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

@@ -1,114 +1,114 @@
-.appkit-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.125rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border: 1px solid transparent;
-}
-
-.appkit-badge--active,
-.appkit-badge--approved,
-.appkit-badge--success {
-  background: #ecfdf5;
-  color: #047857;
-  border-color: rgba(16, 185, 129, 0.25);
-}
-
-.appkit-badge--inactive,
-.appkit-badge--default,
-.appkit-badge--user {
-  background: #f4f4f5;
-  color: #52525b;
-  border-color: rgba(113, 113, 122, 0.2);
-}
-
-.appkit-badge--pending,
-.appkit-badge--warning {
-  background: #fffbeb;
-  color: #b45309;
-  border-color: rgba(245, 158, 11, 0.25);
-}
-
-.appkit-badge--danger,
-.appkit-badge--rejected {
-  background: #fff1f2;
-  color: #be123c;
-  border-color: rgba(244, 63, 94, 0.25);
-}
-
-.appkit-badge--info,
-.appkit-badge--moderator {
-  background: #f0f9ff;
-  color: #0369a1;
-  border-color: rgba(14, 165, 233, 0.25);
-}
-
-.appkit-badge--admin {
-  background: #faf5ff;
-  color: #7e22ce;
-  border-color: rgba(168, 85, 247, 0.25);
-}
-
-.appkit-badge--seller {
-  background: #f0fdfa;
-  color: #0f766e;
-  border-color: rgba(20, 184, 166, 0.25);
-}
-
-.appkit-badge--primary,
-.appkit-badge--secondary {
-  background: #f3ffe3;
-  color: #3e7708;
-  border-color: rgba(101, 196, 8, 0.25);
-}
-
-.dark .appkit-badge--active,
-.dark .appkit-badge--approved,
-.dark .appkit-badge--success {
-  background: rgba(6, 78, 59, 0.35);
-  color: #6ee7b7;
-}
-
-.dark .appkit-badge--inactive,
-.dark .appkit-badge--default,
-.dark .appkit-badge--user {
-  background: #1e293b;
-  color: #cbd5e1;
-}
-
-.dark .appkit-badge--pending,
-.dark .appkit-badge--warning {
-  background: rgba(120, 53, 15, 0.35);
-  color: #fcd34d;
-}
-
-.dark .appkit-badge--danger,
-.dark .appkit-badge--rejected {
-  background: rgba(136, 19, 55, 0.35);
-  color: #fda4af;
-}
-
-.dark .appkit-badge--info,
-.dark .appkit-badge--moderator {
-  background: rgba(12, 74, 110, 0.35);
-  color: #7dd3fc;
-}
-
-.dark .appkit-badge--admin {
-  background: rgba(88, 28, 135, 0.35);
-  color: #d8b4fe;
-}
-
-.dark .appkit-badge--seller {
-  background: rgba(19, 78, 74, 0.35);
-  color: #99f6e4;
-}
-
-.dark .appkit-badge--primary,
-.dark .appkit-badge--secondary {
-  background: rgba(112, 26, 117, 0.3);
-  color: #f9a8d4;
-}
+.appkit-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.appkit-badge--active,
+.appkit-badge--approved,
+.appkit-badge--success {
+  background: var(--appkit-color-emerald-50);
+  color: var(--appkit-color-emerald-700);
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.appkit-badge--inactive,
+.appkit-badge--default,
+.appkit-badge--user {
+  background: var(--appkit-color-zinc-100);
+  color: var(--appkit-color-zinc-600);
+  border-color: rgba(113, 113, 122, 0.2);
+}
+
+.appkit-badge--pending,
+.appkit-badge--warning {
+  background: var(--appkit-color-amber-50);
+  color: var(--appkit-color-amber-700);
+  border-color: rgba(245, 158, 11, 0.25);
+}
+
+.appkit-badge--danger,
+.appkit-badge--rejected {
+  background: var(--appkit-color-rose-50);
+  color: var(--appkit-color-rose-700);
+  border-color: rgba(244, 63, 94, 0.25);
+}
+
+.appkit-badge--info,
+.appkit-badge--moderator {
+  background: var(--appkit-color-sky-50);
+  color: var(--appkit-color-sky-700);
+  border-color: rgba(14, 165, 233, 0.25);
+}
+
+.appkit-badge--admin {
+  background: var(--appkit-color-purple-50);
+  color: var(--appkit-color-purple-700);
+  border-color: rgba(168, 85, 247, 0.25);
+}
+
+.appkit-badge--seller {
+  background: var(--appkit-color-teal-50);
+  color: var(--appkit-color-teal-700);
+  border-color: rgba(20, 184, 166, 0.25);
+}
+
+.appkit-badge--primary,
+.appkit-badge--secondary {
+  background: var(--appkit-color-secondary-50);
+  color: var(--appkit-color-secondary-700);
+  border-color: rgba(101, 196, 8, 0.25);
+}
+
+.dark .appkit-badge--active,
+.dark .appkit-badge--approved,
+.dark .appkit-badge--success {
+  background: rgba(6, 78, 59, 0.35);
+  color: var(--appkit-color-emerald-300);
+}
+
+.dark .appkit-badge--inactive,
+.dark .appkit-badge--default,
+.dark .appkit-badge--user {
+  background: var(--appkit-color-slate-800);
+  color: var(--appkit-color-slate-300);
+}
+
+.dark .appkit-badge--pending,
+.dark .appkit-badge--warning {
+  background: rgba(120, 53, 15, 0.35);
+  color: var(--appkit-color-amber-300);
+}
+
+.dark .appkit-badge--danger,
+.dark .appkit-badge--rejected {
+  background: rgba(136, 19, 55, 0.35);
+  color: var(--appkit-color-rose-300);
+}
+
+.dark .appkit-badge--info,
+.dark .appkit-badge--moderator {
+  background: rgba(12, 74, 110, 0.35);
+  color: var(--appkit-color-sky-300);
+}
+
+.dark .appkit-badge--admin {
+  background: rgba(88, 28, 135, 0.35);
+  color: var(--appkit-color-purple-300);
+}
+
+.dark .appkit-badge--seller {
+  background: rgba(19, 78, 74, 0.35);
+  color: var(--appkit-color-teal-200);
+}
+
+.dark .appkit-badge--primary,
+.dark .appkit-badge--secondary {
+  background: rgba(112, 26, 117, 0.3);
+  color: var(--appkit-color-primary-300);
+}

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

@@ -1,86 +1,86 @@
-/* BaseListingCard — compound card for product/event/auction listings */
-
-.appkit-listing-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0;
-  border-radius: 0.75rem;
-  border: 1px solid #e5e7eb;
-  overflow: hidden;
-  transition: box-shadow 0.2s ease;
-  background-color: #ffffff;
-}
-
-:is(.dark) .appkit-listing-card {
-  background-color: #0f172a;  /* slate-900 — matches --appkit-color-surface dark */
-  border-color: #334155;       /* slate-700 — matches --appkit-color-border dark */
-  color: #f1f5f9;
-}
-
-.appkit-listing-card--selected {
-  ring: 2px;
-  outline: 2px solid var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-.appkit-listing-card--disabled {
-  opacity: 0.6;
-}
-
-.appkit-listing-card--clickable {
-  cursor: pointer;
-}
-.appkit-listing-card--clickable:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-}
-
-/* Hero (image area) */
-.appkit-listing-card__hero {
-  position: relative;
-  overflow: hidden;
-  background-color: #f3f4f6;
-  flex-shrink: 0;
-}
-
-:is(.dark) .appkit-listing-card__hero {
-  background-color: #1f2937;
-}
-
-.appkit-listing-card__hero--square { aspect-ratio: 1 / 1; }
-.appkit-listing-card__hero--landscape { aspect-ratio: 4 / 3; }
-
-/* Info (text area) */
-.appkit-listing-card__info {
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 0.375rem;
-}
-
-/* Checkbox overlay */
-.appkit-listing-card__checkbox {
-  position: absolute;
-  z-index: 10;
-  height: 1.25rem;
-  width: 1.25rem;
-  border-radius: 0.25rem;
-  border: 2px solid #d1d5db;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.9);
-}
-
-.appkit-listing-card__checkbox--selected {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-.appkit-listing-card__checkbox-icon {
-  color: white;
-  font-size: 0.75rem;
-  line-height: 1;
-}
+/* BaseListingCard — compound card for product/event/auction listings */
+
+.appkit-listing-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  border-radius: 0.75rem;
+  border: 1px solid var(--appkit-color-border);
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
+  background-color: var(--appkit-color-surface);
+}
+
+:is(.dark) .appkit-listing-card {
+  background-color: var(--appkit-color-surface);
+  border-color: var(--appkit-color-border);
+  color: var(--appkit-color-slate-100);
+}
+
+.appkit-listing-card--selected {
+  ring: 2px;
+  outline: 2px solid var(--appkit-color-secondary);
+  border-color: var(--appkit-color-secondary);
+}
+
+.appkit-listing-card--disabled {
+  opacity: 0.6;
+}
+
+.appkit-listing-card--clickable {
+  cursor: pointer;
+}
+.appkit-listing-card--clickable:hover {
+  box-shadow: var(--appkit-shadow-md);
+}
+
+/* Hero (image area) */
+.appkit-listing-card__hero {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--appkit-color-zinc-100);
+  flex-shrink: 0;
+}
+
+:is(.dark) .appkit-listing-card__hero {
+  background-color: var(--appkit-color-slate-800);
+}
+
+.appkit-listing-card__hero--square { aspect-ratio: 1 / 1; }
+.appkit-listing-card__hero--landscape { aspect-ratio: 4 / 3; }
+
+/* Info (text area) */
+.appkit-listing-card__info {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0.375rem;
+}
+
+/* Checkbox overlay */
+.appkit-listing-card__checkbox {
+  position: absolute;
+  z-index: var(--appkit-z-raised);
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 0.25rem;
+  border: 2px solid var(--appkit-color-zinc-300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.appkit-listing-card__checkbox--selected {
+  background-color: var(--appkit-color-secondary);
+  border-color: var(--appkit-color-secondary);
+}
+
+.appkit-listing-card__checkbox-icon {
+  color: var(--appkit-color-text-on-primary);
+  font-size: 0.75rem;
+  line-height: 1;
+}

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

@@ -4,11 +4,11 @@
   align-items: center;
   gap: 0.25rem;
   font-size: 0.875rem;
-  color: #71717a;
+  color: var(--appkit-color-zinc-500);
 }
 
 .dark .appkit-breadcrumb__list {
-  color: #a1a1aa;
+  color: var(--appkit-color-text-faint);
 }
 
 .appkit-breadcrumb__item {
@@ -21,28 +21,28 @@
   width: 0.875rem;
   height: 0.875rem;
   flex-shrink: 0;
-  color: #a1a1aa;
+  color: var(--appkit-color-text-faint);
 }
 
 .dark .appkit-breadcrumb__separator {
-  color: #52525b;
+  color: var(--appkit-color-zinc-600);
 }
 
 .appkit-breadcrumb__text {
-  color: #71717a;
+  color: var(--appkit-color-zinc-500);
 }
 
 .dark .appkit-breadcrumb__text {
-  color: #a1a1aa;
+  color: var(--appkit-color-text-faint);
 }
 
 .appkit-breadcrumb__current {
   font-weight: 500;
-  color: #18181b;
+  color: var(--appkit-color-text);
 }
 
 .dark .appkit-breadcrumb__current {
-  color: #fafafa;
+  color: var(--appkit-color-text);
 }
 
 .appkit-breadcrumb__link {
@@ -52,9 +52,9 @@
 }
 
 .appkit-breadcrumb__link:hover {
-  color: #509c02;
+  color: var(--appkit-color-secondary-600);
 }
 
 .dark .appkit-breadcrumb__link:hover {
-  color: #f063b9;
+  color: var(--appkit-color-primary-400);
 }