@mohasinac/appkit 2.4.10 → 2.5.0

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

@@ -1,94 +1,94 @@
-.appkit-text-link {
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
-}
-
-.appkit-text-link--default {
-  color: #509c02;
-}
-
-.appkit-text-link--default:hover {
-  color: #3e7708;
-}
-
-.dark .appkit-text-link--default {
-  color: #f063b9;
-}
-
-.dark .appkit-text-link--default:hover {
-  color: #f9a8d4;
-}
-
-.appkit-text-link--muted {
-  color: #71717a;
-}
-
-.appkit-text-link--muted:hover {
-  color: #3f3f46;
-}
-
-.dark .appkit-text-link--muted {
-  color: #a1a1aa;
-}
-
-.dark .appkit-text-link--muted:hover {
-  color: #e4e4e7;
-}
-
-.appkit-text-link--underline {
-  color: #509c02;
-  text-decoration: underline;
-}
-
-.appkit-text-link--underline:hover {
-  text-decoration: none;
-}
-
-.dark .appkit-text-link--underline {
-  color: #f063b9;
-}
-
-/* nav — secondary text colour; hover to primary; no underline */
-.appkit-text-link--nav {
-  color: #71717a;
-}
-
-.appkit-text-link--nav:hover {
-  color: #509c02;
-}
-
-.dark .appkit-text-link--nav {
-  color: #a1a1aa;
-}
-
-.dark .appkit-text-link--nav:hover {
-  color: #f063b9;
-}
-
-/* danger — red destructive link */
-.appkit-text-link--danger {
-  color: #dc2626;
-  text-underline-offset: 2px;
-}
-
-.appkit-text-link--danger:hover {
-  color: #991b1b;
-  text-decoration: underline;
-}
-
-.dark .appkit-text-link--danger {
-  color: #f87171;
-}
-
-.dark .appkit-text-link--danger:hover {
-  color: #fca5a5;
-}
-
-/* inherit — inherits surrounding text colour; underline on hover only */
-.appkit-text-link--inherit {
-  color: inherit;
-  text-underline-offset: 2px;
-}
-
-.appkit-text-link--inherit:hover {
-  text-decoration: underline;
-}
+.appkit-text-link {
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+}
+
+.appkit-text-link--default {
+  color: var(--appkit-color-secondary-600);
+}
+
+.appkit-text-link--default:hover {
+  color: var(--appkit-color-secondary-700);
+}
+
+.dark .appkit-text-link--default {
+  color: var(--appkit-color-primary-400);
+}
+
+.dark .appkit-text-link--default:hover {
+  color: var(--appkit-color-primary-300);
+}
+
+.appkit-text-link--muted {
+  color: var(--appkit-color-zinc-500);
+}
+
+.appkit-text-link--muted:hover {
+  color: var(--appkit-color-zinc-700);
+}
+
+.dark .appkit-text-link--muted {
+  color: var(--appkit-color-text-faint);
+}
+
+.dark .appkit-text-link--muted:hover {
+  color: var(--appkit-color-border);
+}
+
+.appkit-text-link--underline {
+  color: var(--appkit-color-secondary-600);
+  text-decoration: underline;
+}
+
+.appkit-text-link--underline:hover {
+  text-decoration: none;
+}
+
+.dark .appkit-text-link--underline {
+  color: var(--appkit-color-primary-400);
+}
+
+/* nav — secondary text colour; hover to primary; no underline */
+.appkit-text-link--nav {
+  color: var(--appkit-color-zinc-500);
+}
+
+.appkit-text-link--nav:hover {
+  color: var(--appkit-color-secondary-600);
+}
+
+.dark .appkit-text-link--nav {
+  color: var(--appkit-color-text-faint);
+}
+
+.dark .appkit-text-link--nav:hover {
+  color: var(--appkit-color-primary-400);
+}
+
+/* danger — red destructive link */
+.appkit-text-link--danger {
+  color: var(--appkit-color-error);
+  text-underline-offset: 2px;
+}
+
+.appkit-text-link--danger:hover {
+  color: var(--appkit-color-rose-800);
+  text-decoration: underline;
+}
+
+.dark .appkit-text-link--danger {
+  color: var(--appkit-color-rose-400);
+}
+
+.dark .appkit-text-link--danger:hover {
+  color: var(--appkit-color-error-text);
+}
+
+/* inherit — inherits surrounding text colour; underline on hover only */
+.appkit-text-link--inherit {
+  color: inherit;
+  text-underline-offset: 2px;
+}
+
+.appkit-text-link--inherit:hover {
+  text-decoration: underline;
+}

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

@@ -1,30 +1,30 @@
-.appkit-textarea {
-  width: 100%;
-  border: 1px solid #e4e4e7;
-  border-radius: 0.375rem;
-  background: #ffffff;
-  color: #18181b;
-  padding: 0.5rem 0.625rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  min-height: 5rem;
-  resize: vertical;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.appkit-textarea:focus-visible {
-  outline: none;
-  border-color: #65c408;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
-}
-
-.dark .appkit-textarea {
-  border-color: #334155;
-  background: rgba(30, 41, 59, 0.6);
-  color: #f8fafc;
-}
-
-.dark .appkit-textarea:focus-visible {
-  border-color: #e91e8c;
-  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
-}
+.appkit-textarea {
+  width: 100%;
+  border: 1px solid var(--appkit-color-border);
+  border-radius: 0.375rem;
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-text);
+  padding: 0.5rem 0.625rem;
+  font-size: 0.875rem;
+  line-height: var(--appkit-leading-normal);
+  min-height: 5rem;
+  resize: vertical;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.appkit-textarea:focus-visible {
+  outline: none;
+  border-color: var(--appkit-color-secondary);
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+}
+
+.dark .appkit-textarea {
+  border-color: var(--appkit-color-border);
+  background: rgba(30, 41, 59, 0.6);
+  color: var(--appkit-color-text);
+}
+
+.dark .appkit-textarea:focus-visible {
+  border-color: var(--appkit-color-primary);
+  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
+}

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

@@ -1,112 +1,112 @@
-/* Toast — notification popup with variant colors and position */
-
-.appkit-toast-container {
-  pointer-events: none;
-  position: fixed;
-  inset-inline: 0;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  padding-top: 0.75rem;
-}
-@media (min-width: 768px) {
-  .appkit-toast-container {
-    inset-inline: auto;
-    padding: 0;
-    padding-top: 0;
-  }
-}
-
-/* Positions (md+) */
-.appkit-toast-container--top-right { }
-@media (min-width: 768px) {
-  .appkit-toast-container--top-right { top: 1rem; right: 1rem; }
-  .appkit-toast-container--top-left { top: 1rem; left: 1rem; }
-  .appkit-toast-container--bottom-right { bottom: 1rem; right: 1rem; top: auto; }
-  .appkit-toast-container--bottom-left { bottom: 1rem; left: 1rem; top: auto; }
-  .appkit-toast-container--top-center { top: 1rem; left: 50%; transform: translateX(-50%); }
-  .appkit-toast-container--bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); top: auto; }
-}
-
-/* Toast row */
-.appkit-toast {
-  pointer-events: auto;
-  display: flex;
-  width: 100%;
-  align-items: flex-start;
-  gap: 0.75rem;
-  border-radius: 0.75rem;
-  border: 1px solid;
-  padding: 0.75rem 1rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-@media (min-width: 768px) {
-  .appkit-toast {
-    min-width: 320px;
-    max-width: 28rem;
-  }
-}
-
-/* Variants */
-.appkit-toast--success {
-  border-color: #bbf7d0;
-  background: #f0fdf4;
-  color: #14532d;
-}
-.appkit-toast--error {
-  border-color: #fecaca;
-  background: #fef2f2;
-  color: #7f1d1d;
-}
-.appkit-toast--warning {
-  border-color: #fde68a;
-  background: #fffbeb;
-  color: #78350f;
-}
-.appkit-toast--info {
-  border-color: #bae6fd;
-  background: #f0f9ff;
-  color: #0c4a6e;
-}
-
-/* Icon bubble */
-.appkit-toast__icon {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  background: rgba(0, 0, 0, 0.05);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-/* Dark mode */
-.dark .appkit-toast--success {
-  border-color: rgba(20, 83, 45, 0.6);
-  background: rgba(20, 83, 45, 0.7);
-  color: #dcfce7;
-}
-.dark .appkit-toast--error {
-  border-color: rgba(127, 29, 29, 0.6);
-  background: rgba(127, 29, 29, 0.7);
-  color: #fecdd3;
-}
-.dark .appkit-toast--warning {
-  border-color: rgba(120, 53, 15, 0.6);
-  background: rgba(120, 53, 15, 0.7);
-  color: #fef3c7;
-}
-.dark .appkit-toast--info {
-  border-color: rgba(12, 74, 110, 0.6);
-  background: rgba(12, 74, 110, 0.7);
-  color: #e0f2fe;
-}
-.dark .appkit-toast__icon {
-  background: rgba(255, 255, 255, 0.1);
-}
+/* Toast — notification popup with variant colors and position */
+
+.appkit-toast-container {
+  pointer-events: none;
+  position: fixed;
+  inset-inline: 0;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  padding-top: 0.75rem;
+}
+@media (min-width: 768px) {
+  .appkit-toast-container {
+    inset-inline: auto;
+    padding: 0;
+    padding-top: 0;
+  }
+}
+
+/* Positions (md+) */
+.appkit-toast-container--top-right { }
+@media (min-width: 768px) {
+  .appkit-toast-container--top-right { top: 1rem; right: 1rem; }
+  .appkit-toast-container--top-left { top: 1rem; left: 1rem; }
+  .appkit-toast-container--bottom-right { bottom: 1rem; right: 1rem; top: auto; }
+  .appkit-toast-container--bottom-left { bottom: 1rem; left: 1rem; top: auto; }
+  .appkit-toast-container--top-center { top: 1rem; left: 50%; transform: translateX(-50%); }
+  .appkit-toast-container--bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); top: auto; }
+}
+
+/* Toast row */
+.appkit-toast {
+  pointer-events: auto;
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px solid;
+  padding: 0.75rem 1rem;
+  box-shadow: var(--appkit-shadow-lg);
+}
+@media (min-width: 768px) {
+  .appkit-toast {
+    min-width: 320px;
+    max-width: 28rem;
+  }
+}
+
+/* Variants */
+.appkit-toast--success {
+  border-color: var(--appkit-color-emerald-200);
+  background: var(--appkit-color-emerald-50);
+  color: var(--appkit-color-emerald-900);
+}
+.appkit-toast--error {
+  border-color: var(--appkit-color-rose-200);
+  background: var(--appkit-color-error-surface);
+  color: var(--appkit-color-error-title);
+}
+.appkit-toast--warning {
+  border-color: var(--appkit-color-amber-200);
+  background: var(--appkit-color-amber-50);
+  color: var(--appkit-color-amber-900);
+}
+.appkit-toast--info {
+  border-color: var(--appkit-color-sky-200);
+  background: var(--appkit-color-info-surface);
+  color: var(--appkit-color-sky-900);
+}
+
+/* Icon bubble */
+.appkit-toast__icon {
+  display: flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.05);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+/* Dark mode */
+.dark .appkit-toast--success {
+  border-color: rgba(20, 83, 45, 0.6);
+  background: rgba(20, 83, 45, 0.7);
+  color: var(--appkit-color-emerald-100);
+}
+.dark .appkit-toast--error {
+  border-color: rgba(127, 29, 29, 0.6);
+  background: rgba(127, 29, 29, 0.7);
+  color: var(--appkit-color-rose-200);
+}
+.dark .appkit-toast--warning {
+  border-color: rgba(120, 53, 15, 0.6);
+  background: rgba(120, 53, 15, 0.7);
+  color: var(--appkit-color-amber-100);
+}
+.dark .appkit-toast--info {
+  border-color: rgba(12, 74, 110, 0.6);
+  background: rgba(12, 74, 110, 0.7);
+  color: var(--appkit-color-sky-100);
+}
+.dark .appkit-toast__icon {
+  background: rgba(255, 255, 255, 0.1);
+}

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

@@ -1,105 +1,105 @@
-/* Toggle — switch control with size variants */
-
-.appkit-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.appkit-toggle__track {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  border-radius: 9999px;
-  padding: 0;
-  transition: background-color 0.2s ease;
-  cursor: pointer;
-  border: none;
-  background: none;
-}
-
-.appkit-toggle__track:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.3), 0 0 0 4px white;
-}
-
-.appkit-toggle__track--off {
-  background-color: #d4d4d8;
-}
-.appkit-toggle__track--on {
-  background-color: #65a30d;
-}
-
-.appkit-toggle__track--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.appkit-toggle__thumb {
-  display: inline-block;
-  border-radius: 9999px;
-  background: white;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  transition: transform 0.2s ease;
-}
-
-/* Sizes */
-.appkit-toggle--sm .appkit-toggle__track {
-  height: 18px;
-  width: 2rem;
-}
-.appkit-toggle--sm .appkit-toggle__thumb {
-  height: 0.875rem;
-  width: 0.875rem;
-}
-.appkit-toggle--sm .appkit-toggle__thumb--off {
-  transform: translateX(2px);
-}
-.appkit-toggle--sm .appkit-toggle__thumb--on {
-  transform: translateX(14px);
-}
-
-.appkit-toggle--md .appkit-toggle__track {
-  height: 1.5rem;
-  width: 2.75rem;
-}
-.appkit-toggle--md .appkit-toggle__thumb {
-  height: 1.25rem;
-  width: 1.25rem;
-}
-.appkit-toggle--md .appkit-toggle__thumb--off {
-  transform: translateX(2px);
-}
-.appkit-toggle--md .appkit-toggle__thumb--on {
-  transform: translateX(1.25rem);
-}
-
-.appkit-toggle--lg .appkit-toggle__track {
-  height: 1.75rem;
-  width: 3.5rem;
-}
-.appkit-toggle--lg .appkit-toggle__thumb {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.appkit-toggle--lg .appkit-toggle__thumb--off {
-  transform: translateX(2px);
-}
-.appkit-toggle--lg .appkit-toggle__thumb--on {
-  transform: translateX(1.75rem);
-}
-
-/* Dark mode */
-.dark .appkit-toggle__track:focus-visible {
-  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
-}
-.dark .appkit-toggle__track--off {
-  background-color: #334155;
-}
-.dark .appkit-toggle__track--on {
-  background-color: #ec4899;
-}
-.dark .appkit-toggle__thumb {
-  background: #020617;
-}
+/* Toggle — switch control with size variants */
+
+.appkit-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.appkit-toggle__track {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+.appkit-toggle__track:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.3), 0 0 0 4px var(--appkit-color-surface);
+}
+
+.appkit-toggle__track--off {
+  background-color: var(--appkit-color-zinc-300);
+}
+.appkit-toggle__track--on {
+  background-color: var(--appkit-color-secondary);
+}
+
+.appkit-toggle__track--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.appkit-toggle__thumb {
+  display: inline-block;
+  border-radius: 9999px;
+  background: var(--appkit-color-surface);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+}
+
+/* Sizes */
+.appkit-toggle--sm .appkit-toggle__track {
+  height: 18px;
+  width: 2rem;
+}
+.appkit-toggle--sm .appkit-toggle__thumb {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+.appkit-toggle--sm .appkit-toggle__thumb--off {
+  transform: translateX(2px);
+}
+.appkit-toggle--sm .appkit-toggle__thumb--on {
+  transform: translateX(14px);
+}
+
+.appkit-toggle--md .appkit-toggle__track {
+  height: 1.5rem;
+  width: 2.75rem;
+}
+.appkit-toggle--md .appkit-toggle__thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.appkit-toggle--md .appkit-toggle__thumb--off {
+  transform: translateX(2px);
+}
+.appkit-toggle--md .appkit-toggle__thumb--on {
+  transform: translateX(1.25rem);
+}
+
+.appkit-toggle--lg .appkit-toggle__track {
+  height: 1.75rem;
+  width: 3.5rem;
+}
+.appkit-toggle--lg .appkit-toggle__thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.appkit-toggle--lg .appkit-toggle__thumb--off {
+  transform: translateX(2px);
+}
+.appkit-toggle--lg .appkit-toggle__thumb--on {
+  transform: translateX(1.75rem);
+}
+
+/* Dark mode */
+.dark .appkit-toggle__track:focus-visible {
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px var(--appkit-color-bg);
+}
+.dark .appkit-toggle__track--off {
+  background-color: var(--appkit-color-slate-700);
+}
+.dark .appkit-toggle__track--on {
+  background-color: var(--appkit-color-primary);
+}
+.dark .appkit-toggle__thumb {
+  background: var(--appkit-color-bg);
+}