vanilla-jui 1.7.16 → 1.7.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.16",
+  "version": "1.7.18",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/css/themes/default/avatar.css

@@ -62,12 +62,9 @@
     --avatar-bg: var(--tone-subtle);
     --avatar-fg: var(--tone-solid);
     --avatar-font-weight: var(--font-medium);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
   }
 
+  .j-avatar.is-text,
   .j-avatar-group {
     display: flex;
     justify-content: center;
@@ -80,7 +77,7 @@
   }
 
   .j-avatar-group .j-avatar:not(:first-child) {
-    margin-inline-start: calc(var(--space) * -3);
+    margin-inline-start: calc(var(--s3) * -1);
   }
 
   .j-avatar-group .j-avatar:last-child {

package/src/css/themes/default/badge.css

@@ -4,12 +4,9 @@
     --badge-min-width: 1.25rem;
     --badge-height: 1.25rem;
     --badge-font-size: var(--font-size-sm);
-    --badge-font-weight: var(--font-medium);
-    --badge-radius: 500px;
     --badge-border-color: var(--ui-border);
     --badge-fg: var(--ui-fg);
     --badge-bg: var(--ui-bg);
-    --badge-box-shadow: none;
     --badge-gap: 4px;
 
     gap: var(--badge-gap);
@@ -17,12 +14,12 @@
     min-width: var(--badge-min-width);
     height: var(--badge-height);
     font-size: var(--badge-font-size);
-    font-weight: var(--badge-font-weight);
-    border-radius: var(--badge-radius);
+    font-weight: var(--font-medium);
+    border-radius: 48px;
     border: 1px solid var(--badge-border-color);
     color: var(--badge-fg);
     background-color: var(--badge-bg);
-    box-shadow: var(--badge-box-shadow);
+    box-shadow: none;
 
     display: inline-flex;
     justify-content: center;

package/src/css/themes/default/breadcrumb.css

@@ -1,14 +1,11 @@
 @layer components {
   .j-breadcrumb {
     --breadcrumb-font-size: var(--font-size-md);
-    --breadcrumb-fg: var(--ui-fg-muted);
     --breadcrumb-icon-size: var(--font-size-md);
-    --breadcrumb-divider-fg: var(--ui-fg-soft);
     --breadcrumb-link-fg: var(--tone-text);
-    --breadcrumb-item-padding: 0 var(--s2);
 
     font-size: var(--breadcrumb-font-size);
-    color: var(--breadcrumb-fg);
+    color: var(--ui-fg-muted);
 
     white-space: nowrap;
     user-select: none;
@@ -65,7 +62,7 @@
   .j-breadcrumb a {
     gap: var(--space);
     color: var(--breadcrumb-link-fg);
-    padding: var(--breadcrumb-item-padding);
+    padding: 0 var(--s2);
 
     display: flex;
     align-items: center;
@@ -84,7 +81,7 @@
   }
 
   .j-breadcrumb li + li::before {
-    color: var(--breadcrumb-divider-fg);
+    color: var(--ui-fg-soft);
   }
 
   .j-breadcrumb li.is-active a {

package/src/css/themes/default/drop.css

@@ -1,8 +1,6 @@
 @layer components {
   .drop-container {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-sm);
     background: var(--ui-bg);
     color: var(--ui-fg);

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

@@ -1,20 +1,13 @@
 @layer components {
   #j-editor-container {
-    --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);
-
-    max-width: var(--editor-max-width);
-    border-width: var(--editor-border-width);
-    border-style: var(--editor-border-style);
-    border-color: var(--editor-border-color);
+    max-width: 880px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ui-border);
     border-top: none;
     border-bottom: none;
-    min-height: var(--editor-min-height);
-    padding: var(--editor-padding);
+    min-height: calc(100vh - 51px);
+    padding: 1.5rem 1.5rem 4rem;
   }
 
   .ProseMirror {
@@ -28,32 +21,17 @@
   .j-editor {
     --editor-font-size: var(--font-size-lg);
     --editor-line-height: 1.75;
-    --editor-word-space: 0.02em;
-    --editor-letter-space: 0.01em;
     --editor-block-space: 1.25rem;
-    --editor-list-space: 1rem;
-    --editor-space: 0.25rem;
 
     --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-subtle);
-    --editor-code-bg: var(--tone-code-bg);
-    --editor-code-fg: var(--tone-code-fg);
     --editor-bg-subtle: var(--ui-bg-subtle);
 
     font-size: var(--editor-font-size);
     line-height: 1.5;
-    letter-spacing: var(--editor-letter-space);
-    word-spacing: var(--editor-word-space);
+    letter-spacing: 0.01em;
+    word-spacing: 0.02em;
     word-break: break-word;
     outline: 0;
     position: relative;
@@ -166,7 +144,7 @@
     text-decoration: underline;
     text-decoration-thickness: 4px;
 
-    text-decoration-color: var(--editor-ring);
+    text-decoration-color: var(--tone-ring);
     text-underline-offset: 0.2em;
   }
 
@@ -223,7 +201,7 @@
     Links - 链接
   ============================================ */
   .j-editor a {
-    color: var(--editor-link);
+    color: var(--tone-link);
     text-decoration: none;
 
     text-decoration-color: transparent;
@@ -234,17 +212,17 @@
   }
 
   .j-editor a:hover {
-    color: var(--editor-link-hover);
+    color: var(--tone-link-hover);
     text-decoration: underline;
-    text-decoration-color: var(--editor-link-hover);
+    text-decoration-color: var(--tone-link-hover);
   }
 
   .j-editor a:visited {
-    color: var(--editor-link-visited);
+    color: var(--tone-link-visited);
   }
 
   .j-editor a:active {
-    color: var(--editor-link-active);
+    color: var(--tone-link-active);
   }
 
   /* ============================================
@@ -252,14 +230,14 @@
   ============================================ */
   .j-editor ul,
   .j-editor ol {
-    margin: 0 0 var(--editor-list-space);
-    padding-left: 1.5em;
+    margin: 0 0 1rem;
+    padding-left: 18px;
   }
 
   .j-editor ul li,
   .j-editor ol li {
-    margin-bottom: 0.375em;
-    padding-left: 0.25em;
+    margin-bottom: 10px;
+    padding-left: 2px;
   }
 
   .j-editor ul li:last-child,
@@ -279,8 +257,7 @@
   .j-editor ol ol,
   .j-editor ol ul,
   .j-editor ul ol {
-    margin-top: var(--editor-space);
-    margin-bottom: 0;
+    margin: 10px 0 0;
   }
 
   .j-editor ul ul {
@@ -311,8 +288,7 @@
 
   .j-editor dt {
     font-weight: 600;
-    margin-top: 0.75rem;
-    margin-bottom: var(--editor-space);
+    margin: 1rem 0 10px;
     color: var(--editor-heading-fg);
   }
 
@@ -322,7 +298,7 @@
 
   .j-editor dd {
     margin: 0 0 0.75rem;
-    padding-left: var(--editor-list-space);
+    padding-left: 18px;
     color: var(--tone-body);
   }
 
@@ -403,10 +379,10 @@
   .j-editor blockquote {
     margin: var(--editor-block-space) 0;
     padding: 0.75rem 1.25rem;
-    border-left: 3px solid var(--editor-border-tone);
+    border-left: 3px solid var(--tone-border);
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
-    background-color: var(--editor-blockquote-bg);
-    color: var(--editor-blockquote-fg);
+    background-color: var(--tone-wash);
+    color: var(--tone-subtitle);
   }
 
   .j-editor blockquote > * {
@@ -443,8 +419,8 @@
     border: 1px solid var(--editor-border-subtle);
     border-radius: var(--radius-sm);
     word-break: break-word;
-    background: var(--editor-code-bg);
-    color: var(--editor-code-fg);
+    background: var(--tone-code-bg);
+    color: var(--tone-code-fg);
   }
 
   .j-editor code:not([class*='language-']) {
@@ -452,7 +428,7 @@
   }
 
   .j-editor kbd {
-    border-color: var(--editor-border);
+    border-color: var(--editor-border-subtle);
     border-bottom-width: 2px;
     padding: 2px 6px;
     color: var(--tone-body);
@@ -706,7 +682,7 @@
     margin: var(--editor-block-space) 0;
     border: 0;
     height: 1px;
-    background: var(--editor-border);
+    background: var(--editor-border-subtle);
   }
 
   /* ============================================

package/src/css/themes/default/form.css

@@ -71,9 +71,7 @@
     --input-height: var(--el-height-md);
     --input-line-height: var(--line-height);
 
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
     padding: var(--input-padding);
     height: var(--input-height);
@@ -193,9 +191,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: 50%;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     background-color: var(--ui-bg);
     cursor: pointer;
     position: relative;
@@ -354,9 +350,7 @@
     width: 1rem;
     height: 1rem;
     aspect-ratio: 1/1;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
     cursor: pointer;
     position: relative;
@@ -484,9 +478,7 @@
     --input-font-size: var(--font-size-md);
 
     padding: var(--input-padding);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
     height: var(--input-height);
     line-height: var(--input-line-height, var(--line-height));
@@ -510,9 +502,7 @@
   /* textarea */
   textarea.j-textarea {
     min-height: var(--textarea-min-height, calc(var(--space) * 18));
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
     background-color: var(--input-background-color, var(--ui-bg));
     color: var(--input-color, var(--ui-input-color));
@@ -562,11 +552,8 @@
     background-color: var(--ui-bg-muted);
     padding: var(--s2);
     height: var(--el-height-md);
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
-
-    border-width: 1px;
-    border-style: solid;
   }
 
   .input-group .el-addon .icon-close,

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

@@ -1,3 +1,7 @@
+@import url('./theme-palette.css');
+@import url('./toolbar.css');
+@import url('./editor.css');
+
 @import url('./modal.css');
 @import url('./offcanvas.css');
 
@@ -20,9 +24,5 @@
 @import url('./menu.css');
 @import url('./toc.css');
 
-@import url('./theme-palette.css');
-@import url('./toolbar.css');
-@import url('./editor.css');
-
 @import url('./tooltip.css');
 @import url('./loading.css');

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

@@ -2,7 +2,6 @@
   .j-menu {
     --menu-border-radius: var(--radius-md);
     --menu-item-icon-size: var(--font-size-lg);
-    --menu-item-padding: 0.5rem 0.75rem;
     --menu-item-height: var(--el-height-md);
     --menu-item-line-height: var(--line-height);
 
@@ -74,7 +73,7 @@
   .j-menu .menu .menu-item a {
     gap: var(--s2);
     color: currentColor;
-    padding: var(--menu-item-padding);
+    padding: 0.5rem 0.75rem;
     height: var(--menu-item-height);
     line-height: var(--menu-item-line-height);
     border-radius: var(--menu-border-radius);
@@ -127,7 +126,7 @@
     @supports (color: color-mix(in srgb, red 50%, blue)) {
       background-color: color-mix(
         in srgb,
-        var(--ui-bg-subtle) 50%,
+        var(--ui-bg-subtle) 75%,
         transparent
       );
     }
@@ -198,13 +197,13 @@
   }
 
   /* list card menu */
-  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover > .sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
     width: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .j-menu .menu-item.list-card-menu > .sub-menu > .menu-item > a {
+  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -212,156 +211,17 @@
     line-clamp: 1;
   }
 
-  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover > .sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
     min-width: 240px;
     max-width: 360px;
     transform: translateX(-20%) translateY(1px);
   }
 
-  .j-menu .menu-item.list-card-menu > .sub-menu > .menu-item > a {
+  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
     padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
     line-height: 1.75;
   }
 
-  /* advanced card menu */
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: repeat(6, 1fr);
-    grid-column-gap: var(--space);
-    grid-row-gap: var(--space);
-    min-width: 400px;
-    max-width: 600px;
-    padding-right: var(--s2);
-    transform: translateX(-33.33%) translateY(1px);
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    img {
-    margin: 0;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(1) {
-    grid-area: 1 / 1 / 2 / 3;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(2) {
-    grid-area: 1 / 3 / 4 / 5;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(3) {
-    grid-area: 1 / 5 / 4 / 7;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(4) {
-    grid-area: 2 / 1 / 3 / 3;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(5) {
-    grid-area: 3 / 1 / 4 / 3;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(6) {
-    grid-area: 4 / 1 / 5 / 3;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(7) {
-    grid-area: 4 / 3 / 7 / 5;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(8) {
-    grid-area: 4 / 5 / 7 / 7;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(9) {
-    grid-area: 5 / 1 / 6 / 3;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(10) {
-    grid-area: 6 / 1 / 7 / 3;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(2)
-    a,
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(3)
-    a,
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(7)
-    a,
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(8)
-    a {
-    padding: 0;
-  }
-
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(2)
-    a:hover,
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(3)
-    a:hover,
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(7)
-    a:hover,
-  .j-menu
-    .menu-item.menu-item-has-children.advanced-card-menu:hover
-    > .sub-menu
-    > .menu-item:nth-child(8)
-    a:hover {
-    background-color: transparent;
-    outline-color: transparent;
-  }
-
   /**
    * 侧边栏菜单
    */
@@ -390,7 +250,7 @@
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item:not(:has(a)) {
-    padding: var(--menu-item-padding);
+    padding: 0.5rem 1rem;
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item a {
@@ -399,6 +259,7 @@
     white-space: normal;
     position: relative;
 
+    padding: 0.5rem 1rem;
     gap: var(--s2);
     min-height: var(--el-height-2xl);
     line-height: var(--line-height-paragraph);

package/src/css/themes/default/modal.css

@@ -6,9 +6,7 @@
 
     color: var(--ui-fg);
     background: var(--ui-bg);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border);
+    border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
     min-width: 300px;

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

@@ -1,7 +1,6 @@
 @layer components {
   .j-theme-palette {
-    padding-inline: var(--s4);
-    padding-block: var(--s4) var(--s8);
+    padding: var(--s4) var(--s4) var(--s8);
   }
 
   .j-theme-palette .palette-container,

package/src/css/themes/default/tip.css

@@ -5,9 +5,7 @@
 
     row-gap: var(--s2);
     width: 100%;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--tip-border-color);
+    border: 1px solid var(--tip-border-color);
     border-radius: var(--radius-md);
     padding: var(--s3) var(--s4);
     font-size: var(--font-size-md);

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

@@ -26,9 +26,7 @@
     font-weight: var(--font-medium);
     color: var(--toast-fg);
     background: var(--toast-bg);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--toast-border-color);
+    border: 1px solid var(--toast-border-color);
     border-radius: var(--radius-md);
     min-width: 200px;
     max-width: 310px;

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

@@ -5,8 +5,8 @@
   }
 
   .j-toc .toc-link {
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
+    padding-top: 6px;
+    padding-bottom: 6px;
     color: var(--tone-caption);
     font-size: var(--font-size-sm);
     text-decoration: none;
@@ -23,6 +23,6 @@
   .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;
+    padding-left: 12px;
   }
 }

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

@@ -17,13 +17,15 @@
   }
 
   .j-toolbar {
+    --toolbar-justify: center;
+
     gap: 0;
     padding: var(--s2);
     box-shadow: var(--shadow-sm);
 
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: var(--toolbar-justify);
     align-items: center;
   }
 
@@ -72,7 +74,7 @@
 
   @media screen and (max-width: 992px) {
     .j-toolbar {
-      justify-content: flex-start;
+      --toolbar-justify: flex-start;
     }
   }
 }

package/src/css/themes/default/tooltip.css

@@ -6,9 +6,7 @@
 
     background: var(--tooltip-bg);
     color: var(--tooltip-fg);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--tooltip-border-color);
+    border: 1px solid var(--tooltip-border-color);
     border-radius: var(--radius-md);
     max-width: 260px;
     padding: 2px 4px;