vanilla-jui 1.5.23 → 1.5.25

package/src/css/gradient.css

@@ -1,11 +1,4 @@
 @layer gradient {
-  :root,
-  .light,
-  .dark {
-    --gradient-card-border: var(--ui-border);
-    --gradient-card-shadow: var(--shadow-md);
-  }
-
   .bg-gradient-sunrise,
   .bg-gradient-aurora,
   .bg-gradient-ocean,
@@ -212,88 +205,4 @@
         )
       );
   }
-
-  .gradient-grid {
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  }
-
-  .gradient-card {
-    display: grid;
-    gap: 12px;
-    padding: 16px;
-    border-radius: 22px;
-    border: 1px solid var(--gradient-card-border);
-    background: var(--ui-surface-raised);
-    box-shadow: var(--gradient-card-shadow);
-    overflow: hidden;
-  }
-
-  .gradient-preview {
-    min-height: 150px;
-    display: grid;
-    align-content: space-between;
-    gap: 12px;
-    padding: 16px;
-    border-radius: 18px;
-    border: 1px solid var(--ui-border-subtle);
-    color: var(--ui-fg);
-  }
-
-  .gradient-preview-title {
-    display: inline-flex;
-    width: fit-content;
-    align-items: center;
-    padding: 0.38rem 0.64rem;
-    border-radius: 9999px;
-    background: color-mix(in srgb, var(--ui-surface-raised) 72%, transparent);
-    border: 1px solid color-mix(in srgb, var(--ui-border) 60%, transparent);
-    font-size: 0.76rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
-  .gradient-preview-token {
-    font-size: 0.82rem;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    color: color-mix(in srgb, var(--ui-fg) 78%, transparent);
-  }
-
-  .gradient-card h3 {
-    margin: 0;
-    font-size: 1.02rem;
-  }
-
-  .gradient-card p {
-    margin: 0;
-    line-height: 1.65;
-    color: var(--ui-fg-muted);
-  }
-
-  .gradient-note {
-    padding: 0.82rem 0.9rem;
-    border-radius: 14px;
-    border: 1px solid var(--ui-border-subtle);
-    background: var(--ui-surface-subtle);
-  }
-
-  .gradient-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .gradient-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.34rem 0.6rem;
-    border-radius: 9999px;
-    border: 1px solid var(--ui-border-subtle);
-    background: var(--ui-surface-subtle);
-    color: var(--ui-fg-soft);
-    font-size: 0.76rem;
-    font-weight: 700;
-  }
 }

package/src/css/index.css

@@ -1,13 +1,11 @@
-@layer config, layout, content, icon, font, components, themes, animation, status;
+@layer tokens, gradient, layout, icon, font, components, themes, animation, status;
 
 @import url('./tokens.css');
-/* @import url('./gradient.css'); */
+@import url('./gradient.css');
 @import url('./layout.css');
 @import url('./icon.css');
 @import url('./font.css');
 
-@import url('./content.css');
-
 @import url('./components.css');
 @import url('./themes/index.css');
 

package/src/css/layout.css

@@ -790,6 +790,18 @@
     columns: auto;
   }
 
+  .columns-6xs {
+    columns: var(--columns-6xs);
+  }
+
+  .columns-5xs {
+    columns: var(--columns-5xs);
+  }
+
+  .columns-4xs {
+    columns: var(--columns-4xs);
+  }
+
   .columns-3xs {
     columns: var(--columns-3xs);
   }

package/src/css/pagination.css

@@ -18,12 +18,8 @@
     padding: 0;
   }
 
-  .j-pagination .more span,
-  .j-pagination .is-active {
-    cursor: default;
-  }
-
   .j-pagination ul.pagination li {
     margin: 0;
+    padding: 0;
   }
 }

package/src/css/themes/default/editor.css

@@ -1,5 +1,5 @@
 @layer themes {
-  #j-editor {
+  #j-editor-container {
     --editor-max-width: 880px;
     --editor-min-height: calc(100vh - 51px);
     --editor-padding: 1.5rem 1.5rem 4rem;
@@ -7,4 +7,62 @@
     --editor-border-style: solid;
     --editor-border-color: var(--ui-border);
   }
+
+  .j-editor {
+    --editor-outline: 0;
+    --editor-font-size: var(--font-size-lg);
+    --editor-line-height: 1.75;
+    --editor-letter-space: 0.01em;
+    --editor-word-space: 0.02em;
+    --editor-paragraph-space: 1.25em;
+    --editor-heading-space: 1.5em;
+    --editor-block-space: 1.5em;
+    --editor-list-space: 0.5em;
+
+    --editor-heading-fg: var(--tone-heading);
+    --editor-caption-fg: var(--tone-caption);
+    --editor-ring: var(--tone-ring);
+    --editor-border-tone: var(--tone-border);
+    --editor-border-subtle: var(--ui-border-subtle);
+    --editor-blockquote-bg: var(--tone-wash);
+    --editor-blockquote-fg: var(--tone-subtitle);
+    --editor-link: var(--tone-link);
+    --editor-link-hover: var(--tone-link-hover);
+    --editor-link-visited: var(--tone-link-visited);
+    --editor-link-active: var(--tone-link-active);
+    --editor-border: var(--ui-border);
+    --editor-code-bg: var(--tone-code-bg);
+    --editor-code-fg: var(--tone-code-fg);
+    --editor-bg-subtle: var(--ui-bg-subtle);
+  }
+
+  .j-editor.is-sm {
+    --editor-font-size: var(--font-size-md);
+    --editor-line-height: 1.65;
+    --editor-paragraph-space: 1em;
+    --editor-heading-space: 1.25em;
+    --editor-block-space: 1.25em;
+  }
+
+  .j-editor.is-lg {
+    --editor-font-size: var(--font-size-xl);
+    --editor-line-height: 1.8;
+    --editor-paragraph-space: 1.5em;
+    --editor-heading-space: 1.75em;
+    --editor-block-space: 1.75em;
+  }
+
+  .j-editor.is-xl {
+    --editor-font-size: var(--font-size-2xl);
+    --editor-line-height: 1.85;
+    --editor-paragraph-space: 1.75em;
+    --editor-heading-space: 2em;
+    --editor-block-space: 2em;
+  }
+
+  .j-radius-round .j-editor {
+    --radius-sm: 0.75rem;
+    --radius-md: 1rem;
+    --radius-lg: 1.5rem;
+  }
 }

package/src/css/themes/default/index.css

@@ -1,4 +1,3 @@
-@import url('./content.css');
 @import url('./toolbar.css');
 @import url('./editor.css');
 @import url('./button.css');

package/src/css/toc.css

@@ -6,7 +6,6 @@
   .j-toc .toc-list {
     display: flex;
     flex-direction: column;
-    gap: 0;
   }
 
   .j-toc .toc-link {
@@ -15,9 +14,6 @@
     color: var(--tone-caption);
     font-size: var(--font-size-sm);
     text-decoration: none;
-    transition:
-      color 0.15s,
-      border-color 0.15s;
   }
 
   .j-toc .toc-link:hover,

package/src/css/tokens.css

@@ -3,7 +3,7 @@
    vanilla-jui v2
    ============================================ */
 
-@layer config {
+@layer tokens {
   /* ============================================
      1. Layout Tokens
      ============================================ */
@@ -88,6 +88,7 @@
     --columns-4xl: 56rem;
     --columns-5xl: 64rem;
     --columns-6xl: 72rem;
+    --columns-7xl: 80rem;
 
     /* --- Border Radius --- */
     --radius-full: 9999px;

package/src/index.ts

@@ -7,14 +7,15 @@ export * from './utilities/id.ts';
 export * from './utilities/dom.ts';
 export * from './utilities/events.ts';
 export * from './utilities/http.ts';
-export * from './core/motion.ts';
+export * from './utilities/locale.ts';
 export * from './utilities/object.ts';
 export * from './utilities/timer.ts';
 export * from './utilities/types.ts';
-export * from './core/scheduler.ts';
 export * from './utilities/state.ts';
 export * from './utilities/refs.ts';
+export * from './core/scheduler.ts';
 export * from './core/view.ts';
+export * from './core/motion.ts';
 export * from './core/presence.ts';
 
 // UI primitives

package/src/locales/index.ts

@@ -46,5 +46,7 @@ export default {
     Submit: '提交',
     Reset: '重置',
     'Loading...': '加载中...',
+    'Go to previous page': '访问上一页',
+    'Go to next page': '访问下一页',
   },
 };

package/src/primitives/theme.ts

@@ -7,9 +7,7 @@ import {
   flushSync,
   jsx,
 } from 'vanilla-signal';
-import { t } from 'vanilla-signal-i18n';
-
-import locales from '../locales/index.ts';
+import { translate } from '../utilities/locale.ts';
 import { all, joinClasses } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { isPlainObject } from '../utilities/object.ts';
@@ -228,7 +226,6 @@ export function createTheme(options: ThemeOptions = {}): ThemeInstance {
   const storage = createThemeStorage();
   const bindings = new Set<() => void>();
   const events = createEventManager();
-  const translate = (key: string): string => t(key, locales);
   const scheme = (): string =>
     window.matchMedia?.('(prefers-color-scheme: dark)').matches
       ? 'dark'

package/src/primitives/toast.ts

@@ -6,9 +6,7 @@ import {
   insert,
   jsx,
 } from 'vanilla-signal';
-import { t } from 'vanilla-signal-i18n';
-
-import locales from '../locales/index.ts';
+import { translate } from '../utilities/locale.ts';
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { joinClasses, q } from '../utilities/dom.ts';
@@ -17,8 +15,6 @@ import { randomId } from '../utilities/id.ts';
 import { timer } from '../utilities/timer.ts';
 import { validateParam } from '../utilities/types.ts';
 
-const s = (k: string) => t(k, locales);
-
 export type ToastTheme = 'info' | 'success' | 'warning' | 'error' | 'primary';
 
 export interface ToastClassNames {
@@ -174,7 +170,7 @@ function toastIconContent(
 
 function toastMessage(message: string, options: ToastOptions): string {
   return isToastLoading(options)
-    ? options.text?.loading || s('Loading...')
+    ? options.text?.loading || translate('Loading...')
     : message;
 }
 
@@ -456,8 +452,8 @@ function confirm(message = '', props: ToastConfirmProps = {}): HTMLElement {
     if (toast) return toast;
   }
   validateParam('message', message, 'string', 'Toast.confirm');
-  const closeText = props.text?.close || s('Close');
-  const confirmText = props.text?.confirm || s('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');

package/src/utilities/browser.ts

@@ -1,6 +1,5 @@
-import { t } from 'vanilla-signal-i18n';
 import { Toast } from '../primitives/toast';
-import locales from '../locales';
+import { translate } from '../utilities/locale.ts';
 
 declare global {
   interface Navigator {
@@ -128,7 +127,7 @@ export function isModernBrowser(): SupportES2022 {
 }
 export function checkModernBrowser(): SupportES2022 {
   if (!isModernBrowser()) {
-    Toast.confirm(t('wn', locales), {
+    Toast.confirm(translate('wn'), {
       theme: 'error',
       onConfirm: () => {
         window.open('https://www.google.cn/chrome/fallback/', '_blank');

package/src/utilities/locale.ts

@@ -0,0 +1,6 @@
+import { t } from 'vanilla-signal-i18n';
+import locales from '../locales/index.ts';
+
+export function translate(key: string) {
+  return t(key, locales);
+}