vanilla-jui 1.4.1 → 1.4.3

package/src/css/themes/default/content.css

@@ -0,0 +1,59 @@
+@layer themes {
+    .j-content {
+        --content-outline: 0;
+        --content-font-size: var(--font-size-lg);
+        --content-line-height: 1.75;
+        --content-letter-space: 0.01em;
+        --content-word-space: 0.02em;
+        --content-paragraph-space: 1.25em;
+        --content-heading-space: 1.5em;
+        --content-block-space: 1.5em;
+        --content-list-space: 0.5em;
+
+        --content-heading-fg: var(--tone-heading);
+        --content-caption-fg: var(--tone-caption);
+        --content-ring: var(--tone-ring);
+        --content-border-tone: var(--tone-border);
+        --content-border-subtle: var(--ui-border-subtle);
+        --content-blockquote-bg: var(--tone-wash);
+        --content-blockquote-fg: var(--tone-subtitle);
+        --content-link: var(--tone-link);
+        --content-link-hover: var(--tone-link-hover);
+        --content-link-visited: var(--tone-link-visited);
+        --content-link-active: var(--tone-link-active);
+        --content-border: var(--ui-border);
+        --content-code-bg: var(--tone-code-bg);
+        --content-code-fg: var(--tone-code-fg);
+        --content-bg-subtle: var(--ui-bg-subtle);
+    }
+
+    .j-content.is-sm {
+        --content-font-size: var(--font-size-md);
+        --content-line-height: 1.65;
+        --content-paragraph-space: 1em;
+        --content-heading-space: 1.25em;
+        --content-block-space: 1.25em;
+    }
+
+    .j-content.is-lg {
+        --content-font-size: var(--font-size-xl);
+        --content-line-height: 1.8;
+        --content-paragraph-space: 1.5em;
+        --content-heading-space: 1.75em;
+        --content-block-space: 1.75em;
+    }
+
+    .j-content.is-xl {
+        --content-font-size: var(--font-size-2xl);
+        --content-line-height: 1.85;
+        --content-paragraph-space: 1.75em;
+        --content-heading-space: 2em;
+        --content-block-space: 2em;
+    }
+
+    .j-radius-round .j-content {
+        --radius-sm: .75rem;
+        --radius-md: 1rem;
+        --radius-lg: 1.5rem;
+    }
+}

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

@@ -0,0 +1,10 @@
+@layer themes {
+    #j-editor {
+        --editor-max-width: 880px;
+        --editor-min-height: calc(100vh - 51px);
+        --editor-padding: 1.5rem 1.5rem 4rem;
+        --editor-border-width: 1px;
+        --editor-border-style: solid;
+        --editor-border-color: var(--ui-border);
+    }
+}

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

@@ -1,3 +1,6 @@
+@import url('./content.css');
+@import url('./toolbar.css');
+@import url('./editor.css');
 @import url('./button.css');
 @import url('./avatar.css');
 @import url('./badge.css');
@@ -13,4 +16,8 @@
 @import url('./tooltip.css');
 @import url('./swiper.css');
 @import url('./breadcrumb.css');
-@import url('./loading.css');
+@import url('./loading.css');
+@import url('./theme-palette.css');
+@import url('./table.css');
+@import url('./pagination.css');
+@import url('./menu.css');

package/src/css/themes/default/loading.css

@@ -1,23 +1,23 @@
 @layer themes {
     .j-loader {
-        --loader-bg: inherit;
-        --loader-icon-size: var(--font-size-xl);
-        --loader-icon-width: 1px;
-        --loader-icon-style: solid;
-        --loader-icon-fg: currentcolor;
-        --loader-icon-speed: var(--speed-xl);
+        --loader-position: absolute;
+        --loader-size: var(--font-size-md);
+        --loader-width: 1.5px;
+        --loader-style: solid;
+        --loader-fg: currentcolor;
+        --loader-speed: var(--speed-xl);
     }
 
-    .j-loading {
-        --loading-bg: inherit;
-        --loading-backdrop-filter: blur(4px);
-        --loading-loader-size: 3rem;
-        --loading-loader-border-width: 4px;
-        --loading-loader-border-style: solid;
-        --loading-loader-border-color: var(--tone-soft);
-        --loading-loader-border-top-color: var(--tone-solid);
-        --loading-loader-bg: radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/8px 8px no-repeat,
+    .j-loader .tone-loader {
+        --loader-width: 2px;
+        --loader-fg: var(--tone-soft);
+        --loader-top-fg: var(--tone-solid);
+    }
+
+    .j-loader .flow-loader {
+        --loader-width: 2px;
+        --loader-bg: radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/var(--loader-width) var(--loader-width) no-repeat,
             conic-gradient(#0000 30%, var(--tone-solid));
-        --loading-loader-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+        --loader-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loader-width)), #000 0);
     }
 }

package/src/css/themes/default/menu.css

@@ -0,0 +1,15 @@
+@layer themes {
+    .j-menu {
+        --menu-font-size: var(--font-size-md);
+        --menu-font-weight: var(--font-normal);
+
+        --menu-item-padding: 0.5rem 1rem;
+        --menu-item-height: var(--el-height-md);
+        --menu-item-line-height: var(--line-height);
+
+        --menu-link-font-weight: var(--font-medium);
+        --menu-link-gap: var(--space);
+
+        --menu-item-icon-size: var(--font-size-lg);
+    }
+}

package/src/css/themes/default/pagination.css

@@ -0,0 +1,8 @@
+@layer themes {
+    .j-pagination {
+        --pagination-font-size: var(--font-size-md);
+        --pagination-link-fg: var(--ui-fg);
+        --pagination-link-decoration: none;
+        --pagination-gap: var(--space);
+    }
+}

package/src/css/themes/default/table.css

@@ -0,0 +1,18 @@
+@layer themes {
+    .j-table-container {
+        --table-container-max-width: 100%;
+    }
+
+    .j-table {
+        --table-selected-bg: var(--tone-soft);
+        --table-border-width: 0 0 1px;
+        --table-border-style: solid;
+        --table-border-color: var(--ui-border);
+        --table-cell-padding: 0.5em 0.75em;
+        --table-cell-text-align: left;
+        --table-link-fg: var(--tone-solid);
+        --table-striped-bg: var(--tone-soft);
+        --table-hover-bg: var(--tone-soft);
+        --table-bordered-width: 1px;
+    }
+}

package/src/css/themes/default/tabs.css

@@ -26,12 +26,12 @@
         border-left: var(--tab-wrap-border);
     }
 
-    .j-tabs .tab-list .tab-item.is-active {
+    .j-tabs .tab-list .tab-item[aria-selected="true"] {
         --tab-fg: var(--tone-solid);
         --tab-font-weight: var(--font-medium);
     }
 
-    .j-tabs .tab-list .tab-item.is-disabled {
+    .j-tabs .tab-list .tab-item[aria-disabled="true"] {
         --tab-fg: var(--ui-border-strong);
     }
 }

package/src/css/themes/default/theme-palette.css

@@ -0,0 +1,12 @@
+@layer themes {
+    .j-theme-palette {
+        --palette-padding: 1rem 1rem 2rem;
+        --palette-container-gap: var(--s4);
+        --palette-item-gap: var(--s2);
+        --palette-item-title-font-size: var(--font-size-md);
+        --palette-item-title-font-weight: var(--font-bold);
+        --palette-items-columns: repeat(3, 1fr);
+        --palette-items-gap: var(--space);
+        --palette-items-icon-size: var(--font-size-sm);
+    }
+}

package/src/css/themes/default/toolbar.css

@@ -0,0 +1,34 @@
+@layer themes {
+    .j-toolbar-container {
+        --toolbar-container-position: sticky;
+        --toolbar-container-bg: var(--ui-bg);
+        --toolbar-container-border: 1px solid var(--ui-border);
+    }
+
+    .j-toolbar {
+        --toolbar-gap: 0;
+        --toolbar-padding: var(--s2);
+        --toolbar-box-shadow: var(--shadow-sm);
+        --toolbar-divider-width: 1px;
+        --toolbar-divider-height: 16px;
+        --toolbar-divider-bg: var(--ui-fg);
+        --toolbar-drop-font-size: var(--font-size-md);
+        --toolbar-drop-bg: var(--ui-bg-subtle);
+        --toolbar-drop-padding: var(--space);
+        --toolbar-drop-border: 1px solid var(--ui-border);
+        --toolbar-drop-radius: var(--radius-sm);
+        --toolbar-drop-box-shadow: var(--shadow-md);
+    }
+
+    .j-toolbar button svg {
+        --toolbar-icon-size: var(--font-size-xl);
+    }
+
+    .j-toolbar button.is-sm svg {
+        --toolbar-icon-size: var(--font-size-lg);
+    }
+
+    .j-toolbar button.is-lg svg {
+        --toolbar-icon-size: var(--font-size-2xl);
+    }
+}

package/src/css/toast.css

@@ -21,35 +21,28 @@
     box-shadow: var(--toast-box-shadow);
     font-size: var(--toast-font-size);
     font-weight: var(--toast-font-weight);
-    opacity: 0;
     color: var(--toast-fg);
     background: var(--toast-bg);
     border-width: var(--toast-border-width);
     border-style: var(--toast-border-style);
     border-color: var(--toast-border-color);
     border-radius: var(--toast-border-radius);
-
-    transform: translateY(-100%);
-
-    transition: all 0.3s ease-in-out;
-    cursor: pointer;
     min-width: var(--toast-min-width);
     max-width: var(--toast-max-width);
     word-break: break-all;
-
+    cursor: pointer;
     pointer-events: auto;
+
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: all 0.3s ease-in-out;
   }
 
-  .j-toast.is-shown {
+  .j-toast[aria-live] {
     opacity: 1;
     transform: translateY(0);
   }
 
-  .j-toast.is-hidden {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
   .j-toast .toast-icon {
     margin-right: var(--s2);
     width: var(--toast-icon-size);
@@ -65,23 +58,20 @@
     position: fixed;
     top: 45%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    transition: opacity var(--speed-sm) ease-in-out;
-    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
     z-index: var(--z-toast);
+    width: fit-content;
+    max-width: 240px;
     text-align: center;
     user-select: none;
     pointer-events: none;
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
   }
 
-  .j-toast-lite.is-shown {
+  .j-toast-lite[aria-live] {
     opacity: 1;
-    transform: scale(1);
-  }
-
-  .j-toast-lite.is-hidden {
-    opacity: 0;
-    transform: scale(0.9);
+    transform: translate(-50%, -50%) scale(1);
   }
 
   .j-toast.is-action {

package/src/css/toolbar.css

@@ -1,6 +1,6 @@
 @layer components {
   .j-toolbar-container {
-    position: var(--toolbar-container-position, sticky);
+    position: var(--toolbar-container-position);
     top: 0;
     width: 100%;
     z-index: var(--z-toolbar);
@@ -11,19 +11,18 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     scroll-behavior: smooth;
-    background: var(--toolbar-container-background, var(--ui-bg));
-    border-bottom: var(--toolbar-container-border, 1px solid var(--ui-border));
+    background: var(--toolbar-container-bg);
+    border-bottom: var(--toolbar-container-border);
   }
 
   .j-toolbar {
     position: relative;
-    /* width: 100%; */
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--toolbar-gap, 0);
-    padding: var(--toolbar-padding, var(--s2));
-    box-shadow: var(--toolbar-box-shadow, var(--shadow-sm));
+    gap: var(--toolbar-gap);
+    padding: var(--toolbar-padding);
+    box-shadow: var(--toolbar-box-shadow);
   }
 
   @media screen and (max-width: 992px) {
@@ -33,61 +32,43 @@
   }
 
   .j-toolbar button svg {
-    width: var(--toolbar-icon-size, var(--font-size-xl));
-    height: var(--toolbar-icon-size, var(--font-size-xl));
-  }
-
-  .j-toolbar button.is-sm svg {
-    --toolbar-icon-size: var(--font-size-lg);
-  }
-
-  .j-toolbar button.is-lg svg {
-    --toolbar-icon-size: var(--font-size-2xl);
+    width: var(--toolbar-icon-size);
+    height: var(--toolbar-icon-size);
   }
 
   .j-toolbar .divider {
-    width: 1px;
-    height: 16px;
-    background-color: var(--ui-fg);
-  }
-
-  /* 编辑器区域 */
-  #editor {
-    max-width: 880px;
-    border-left: 1px solid var(--ui-border);
-    border-right: 1px solid var(--ui-border);
-    min-height: calc(100vh - 51px);
-    padding: 1.5rem 1.5rem 4rem;
-  }
-
-  .ProseMirror {
-    outline: 0;
+    width: var(--toolbar-divider-width);
+    height: var(--toolbar-divider-height);
+    background: var(--toolbar-divider-bg);
+    align-self: center;
   }
 
   .heading-drop-menu,
   .editor-size-menu,
-  .color-drop-menu {
-    background: var(--ui-bg-subtle);
-    padding: var(--space);
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--ui-border);
-    border-radius: var(--radius-md);
-    font-size: var(--font-size-md)
+  .color-drop-menu,
+
+  .editor-drop-heading,
+  .editor-drop-size,
+  .editor-drop-color {
+    background: var(--toolbar-drop-bg);
+    box-shadow: var(--toolbar-drop-box-shadow);
+    border: var(--toolbar-drop-border);
+    border-radius: var(--toolbar-drop-radius);
+    font-size: var(--toolbar-drop-font-size);
   }
 
-  .heading-drop-menu a,
-  .editor-size-menu a {
-    padding-block: var(--space);
+  .editor-drop-color {
+    padding: var(--toolbar-drop-padding);
   }
 
-  .color-drop-menu .color-panel {
+  .editor-drop-color .color-panel {
     padding: .5rem;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: .5rem;
   }
 
-  .color-drop-menu .color-panel button.color-btn {
+  .editor-drop-color .color-panel button.color-btn {
     padding: 0;
     margin: 0;
     outline: none;
@@ -98,17 +79,17 @@
     cursor: pointer;
   }
 
-  .color-drop-menu .color-panel button.color-btn.color-btn-clear::after {
+  .editor-drop-color .color-panel button.color-btn.color-btn-clear::after {
     content: '🚫';
     display: flex;
     justify-content: center;
     align-items: center;
     height: 30px;
-    background-color: var(--ui-bg-subtle);
+    background: var(--ui-bg-subtle);
     border-radius: var(--radius-sm);
   }
 
-  .color-drop-menu .color-panel .color-btn:last-of-type {
+  .editor-drop-color .color-panel .color-btn:last-of-type {
     grid-column: span 5;
     width: auto;
   }

package/src/locales/index.ts

@@ -2,7 +2,6 @@ export default {
   en: {
     b: 'Back',
     t: 'Customize',
-    d: 'Customize your UI experience.',
     sm: 'Small',
     md: 'Medium',
     lg: 'Large',
@@ -10,8 +9,7 @@ export default {
   zh: {
     b: '返回',
     t: '自定义主题',
-    d: '自定义您的UI体验。',
-    Theme: '主题',
+    Primary: '主色',
     Radius: '圆角',
     Shadow: '阴影',
     Font: '字号',
@@ -40,5 +38,7 @@ export default {
     Light: '浅色',
     Dark: '深色',
     Auto: '自动',
+    Close: '关闭',
+    Confirm: '确认',
   },
 };