vanilla-jui 1.7.6 → 1.7.8

package/src/css/themes/default/toast.css

@@ -23,6 +23,7 @@
     border-radius: var(--radius-md);
     min-width: 200px;
     max-width: 310px;
+    backdrop-filter: blur(4px);
   }
 
   .j-toast .el-icon {
@@ -31,25 +32,25 @@
 
   .j-toast.is-success {
     --toast-fg: var(--state-success);
-    --toast-bg: var(--state-success-weak);
+    --toast-bg: var(--state-success-soft);
     --toast-border-color: var(--state-success-border);
   }
 
   .j-toast.is-error {
     --toast-fg: var(--state-danger);
-    --toast-bg: var(--state-danger-weak);
+    --toast-bg: var(--state-danger-soft);
     --toast-border-color: var(--state-danger-border);
   }
 
   .j-toast.is-warning {
     --toast-fg: var(--state-warning);
-    --toast-bg: var(--state-warning-weak);
+    --toast-bg: var(--state-warning-soft);
     --toast-border-color: var(--state-warning-border);
   }
 
   .j-toast.is-primary {
     --toast-fg: var(--tone-solid);
-    --toast-bg: var(--tone-weak);
+    --toast-bg: var(--tone-soft);
     --toast-border-color: var(--tone-border);
   }
 

package/src/css/themes/default/toc.css

@@ -1,25 +1,28 @@
 @layer themes {
+  .j-toc .toc-title {
+    color: var(--tone-caption);
+    margin-bottom: 4px;
+  }
+
   .j-toc .toc-link {
-    padding: 0.375rem 0 0.375rem 0.75rem;
-    border-left: 2px solid transparent;
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem;
     color: var(--tone-caption);
     font-size: var(--font-size-sm);
     text-decoration: none;
+    display: block;
   }
 
   .j-toc .toc-link:hover,
-  .j-toc .toc-link.is-active {
+  .j-toc .toc-link[aria-current] {
     color: var(--tone-heading);
   }
 
-  .j-toc .toc-link.is-active {
-    border-left-color: var(--tone-solid);
-  }
-
-  .j-toc .toc-link.is-level-3,
-  .j-toc .toc-link.is-level-4,
-  .j-toc .toc-link.is-level-5,
-  .j-toc .toc-link.is-level-6 {
-    padding-left: 1.5rem;
+  .j-toc:has(.toc-link),
+  .j-toc .toc-link[data-toc-level='3'],
+  .j-toc .toc-link[data-toc-level='4'],
+  .j-toc .toc-link[data-toc-level='5'],
+  .j-toc .toc-link[data-toc-level='6'] {
+    padding-left: 0.75rem;
   }
 }

package/src/locales/index.ts

@@ -6,6 +6,7 @@ export default {
     md: 'Medium',
     lg: 'Large',
     wn: 'Your browser is outdated and may pose security risks. Please upgrade your browser to access this site.',
+    toc: 'On this page',
   },
   zh: {
     b: '返回',
@@ -52,5 +53,6 @@ export default {
     'Go to next page': '访问下一页',
     Next: '下一步',
     Finish: '完成',
+    toc: '页面导航',
   },
 };

package/src/primitives/toast.ts

@@ -57,7 +57,7 @@ export interface ToastOptions extends ToastThemeOptions {
   onCancel?: () => void | Promise<void>;
 }
 
-export interface ToastConfirmProps extends ToastThemeOptions {
+export interface ToastConfirmProps extends ToastClassNameOptions {
   once?: boolean;
   text?: {
     close?: string;
@@ -453,16 +453,14 @@ function confirm(message = '', props: ToastConfirmProps = {}): HTMLElement {
   validateParam('message', message, 'string', 'Toast.confirm');
   const closeText = props.text?.close || translate('Close');
   const confirmText = props.text?.confirm || translate('Confirm');
-  const theme = props.theme || 'info';
   validateParam('once', once, 'boolean', 'Toast.confirm');
-  validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.confirm');
   const names = mergeShallowConfig(
     classNames,
     props.className ?? {}
   ) as ToastClassNames;
   const id = randomId();
   const element = jsx('div', {
-    className: joinClasses(names.confirm, names[theme]),
+    className: names.confirm,
     'data-toast': id,
     'data-toast-confirm': '',
     children: [

package/src/utilities/browser.ts

@@ -128,7 +128,6 @@ export function isModernBrowser(): SupportES2022 {
 export function checkModernBrowser(): SupportES2022 {
   if (!isModernBrowser()) {
     Toast.confirm(translate('wn'), {
-      theme: 'error',
       onConfirm: () => {
         window.open('https://www.google.cn/chrome/fallback/', '_blank');
       },

package/src/css/toc.css

@@ -1,10 +0,0 @@
-@layer components {
-  .j-toc {
-    width: 100%;
-  }
-
-  .j-toc .toc-list {
-    display: flex;
-    flex-direction: column;
-  }
-}