vanilla-jui 1.7.26 → 1.7.28

package/src/css/tokens.css

@@ -94,6 +94,7 @@
     --ui-fg-muted: #6b7280;
     --ui-fg-soft: #9ca3af;
     --ui-fg-subtle: #d1d5db;
+    --ui-reverse: #000;
     --ui-border-subtle: rgba(0, 0, 0, 0.06);
     --ui-border: rgba(0, 0, 0, 0.1);
     --ui-border-strong: rgba(0, 0, 0, 0.2);
@@ -206,17 +207,17 @@
     --tone-code-fg: #374151;
 
     /* States */
-    --state-danger: #ef4444;
-    --state-danger-hover: #dc2626;
-    --state-danger-active: #b91c1c;
-    --state-danger-fg: #ffffff;
-    --state-danger-text: #dc2626;
-    --state-danger-subtle: rgba(239, 68, 68, 0.08);
-    --state-danger-soft: rgba(239, 68, 68, 0.12);
-    --state-danger-muted: rgba(239, 68, 68, 0.16);
-    --state-danger-weak: #fce1e1;
-    --state-danger-border: rgba(239, 68, 68, 0.25);
-    --state-danger-ring: rgba(239, 68, 68, 0.3);
+    --state-error: #ef4444;
+    --state-error-hover: #dc2626;
+    --state-error-active: #b91c1c;
+    --state-error-fg: #ffffff;
+    --state-error-text: #dc2626;
+    --state-error-subtle: rgba(239, 68, 68, 0.08);
+    --state-error-soft: rgba(239, 68, 68, 0.12);
+    --state-error-muted: rgba(239, 68, 68, 0.16);
+    --state-error-weak: #fce1e1;
+    --state-error-border: rgba(239, 68, 68, 0.25);
+    --state-error-ring: rgba(239, 68, 68, 0.3);
 
     --state-success: #22c55e;
     --state-success-hover: #16a34a;
@@ -254,8 +255,8 @@
     --state-info-ring: rgba(59, 130, 246, 0.3);
 
     /* Component Aliases */
-    --state-danger-solid: var(--state-danger);
-    --state-danger-surface: var(--state-danger-subtle);
+    --state-error-solid: var(--state-error);
+    --state-error-surface: var(--state-error-subtle);
     --state-success-solid: var(--state-success);
     --state-success-surface: var(--state-success-subtle);
     --state-warning-solid: var(--state-warning);
@@ -284,6 +285,7 @@
     --ui-fg-muted: #cbd5e1;
     --ui-fg-soft: #94a3b8;
     --ui-fg-subtle: #64748b;
+    --ui-reverse: #fff;
     --ui-border-subtle: rgba(148, 163, 184, 0.12);
     --ui-border: rgba(148, 163, 184, 0.18);
     --ui-border-strong: rgba(148, 163, 184, 0.28);
@@ -396,17 +398,17 @@
     --tone-code-fg: #e5e7eb;
 
     /* States */
-    --state-danger: #f87171;
-    --state-danger-hover: #fca5a5;
-    --state-danger-active: #fecaca;
-    --state-danger-fg: #030712;
-    --state-danger-text: #fca5a5;
-    --state-danger-subtle: rgba(248, 113, 113, 0.1);
-    --state-danger-soft: rgba(248, 113, 113, 0.15);
-    --state-danger-muted: rgba(248, 113, 113, 0.2);
-    --state-danger-weak: #291111;
-    --state-danger-border: rgba(248, 113, 113, 0.25);
-    --state-danger-ring: rgba(248, 113, 113, 0.4);
+    --state-error: #f87171;
+    --state-error-hover: #fca5a5;
+    --state-error-active: #fecaca;
+    --state-error-fg: #030712;
+    --state-error-text: #fca5a5;
+    --state-error-subtle: rgba(248, 113, 113, 0.1);
+    --state-error-soft: rgba(248, 113, 113, 0.15);
+    --state-error-muted: rgba(248, 113, 113, 0.2);
+    --state-error-weak: #291111;
+    --state-error-border: rgba(248, 113, 113, 0.25);
+    --state-error-ring: rgba(248, 113, 113, 0.4);
 
     --state-success: #4ade80;
     --state-success-hover: #86efac;
@@ -1290,4 +1292,4 @@
     --el-height-2xl: 3.5rem;
     --el-height-3xl: 3.75rem;
   }
-}
+}

package/src/primitives/toast.ts

@@ -16,7 +16,7 @@ import { mergeShallowConfig } from '../utilities/merge.ts';
 import { timer } from '../utilities/timer.ts';
 import { validateParam } from '../utilities/types.ts';
 
-export type ToastTheme = 'info' | 'success' | 'warning' | 'error' | 'primary';
+export type ToastTheme = '' | 'info' | 'success' | 'warning' | 'error';
 
 export interface ToastClassNames {
   container: string;
@@ -33,7 +33,6 @@ export interface ToastClassNames {
   success: string;
   warning: string;
   error: string;
-  primary: string;
 }
 
 export type ToastClassNameConfig = Partial<ToastClassNames>;
@@ -77,9 +76,8 @@ const DEFAULT_CLASS_NAMES: ToastClassNames = {
   buttons: 'toast-buttons',
   button: 'j-button is-sm',
   closeBtn: 'is-ghost',
-  confirmBtn: 'is-outline',
+  confirmBtn: 'is-reverse',
   info: 'is-info',
-  primary: 'is-primary',
   success: 'is-success',
   warning: 'is-warning',
   error: 'is-error',
@@ -87,7 +85,7 @@ const DEFAULT_CLASS_NAMES: ToastClassNames = {
 
 const TOAST_THEME_RULE = {
   type: 'string',
-  enum: ['info', 'success', 'warning', 'error', 'primary'],
+  enum: ['', 'info', 'success', 'warning', 'error'],
 };
 const TOAST_DURATION_RULE = { type: 'number', min: 0 };
 const LITE_DURATION_RULE = { type: 'number', greaterThan: 0 };
@@ -135,10 +133,6 @@ function isToastLoading(options: ToastOptions): boolean {
   return !!access(options.loading ?? false);
 }
 
-function toastIconName(theme: ToastTheme): ToastTheme {
-  return theme === 'primary' ? 'info' : theme;
-}
-
 function toastIconStyle(options: ToastOptions): Record<string, string> {
   return isToastLoading(options)
     ? {
@@ -156,9 +150,9 @@ function toastIconStyle(options: ToastOptions): Record<string, string> {
 function toastIconContent(
   theme: ToastTheme,
   options: ToastOptions
-): HTMLElement | SVGElement {
+): HTMLElement | SVGElement | null {
   if (isToastLoading(options)) return createLoading();
-  return icon(toastIconName(theme));
+  return theme ? icon(theme) : null;
 }
 
 function toastMessage(message: string, options: ToastOptions): string {
@@ -188,6 +182,11 @@ function bindToastStatus(
 ): void {
   const id = element.dataset.toast || randomId();
   const dispose = createRoot((dispose) => {
+    insert(
+      element,
+      () => (theme || isToastLoading(options) ? iconElement : null),
+      messageElement
+    );
     insert(iconElement, () => toastIconContent(theme, options));
     insert(messageElement, () => toastMessage(message, options));
     createEffect(() => {
@@ -366,7 +365,7 @@ function show(message = '', options: ToastOptions = {}): HTMLElement {
   }
   validateParam('message', message, 'string', 'Toast.show');
   const duration = options.duration ?? 3000;
-  const theme = options.theme || 'info';
+  const theme = options.theme ?? '';
   validateParam('once', once, 'boolean', 'Toast.show');
   validateParam('duration', duration, TOAST_DURATION_RULE, 'Toast.show');
   validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.show');
@@ -386,11 +385,11 @@ function show(message = '', options: ToastOptions = {}): HTMLElement {
     'data-toast-message': id,
   }) as HTMLElement;
   const toast = jsx('div', {
-    className: joinClasses(names.toast, names[theme]),
+    className: joinClasses(names.toast, theme ? names[theme] : ''),
     'data-toast': id,
     role: 'alert',
     'aria-atomic': 'true',
-    children: [iconElement, messageElement],
+    children: messageElement,
   }) as HTMLElement;
   bindToastStatus(
     toast,
@@ -533,12 +532,10 @@ export const Toast = {
     return { className: classNames };
   },
   show,
-  success: (message = '', options: ToastOptions = {}) =>
-    show(message, { ...options, theme: 'success' }),
   info: (message = '', options: ToastOptions = {}) =>
     show(message, { ...options, theme: 'info' }),
-  primary: (message = '', options: ToastOptions = {}) =>
-    show(message, { ...options, theme: 'primary' }),
+  success: (message = '', options: ToastOptions = {}) =>
+    show(message, { ...options, theme: 'success' }),
   warning: (message = '', options: ToastOptions = {}) =>
     show(message, { ...options, theme: 'warning' }),
   error: (message = '', options: ToastOptions = {}) =>