vanilla-jui 1.5.35 → 1.5.37

package/src/css/themes/default/tree.css

@@ -0,0 +1,75 @@
+@layer themes {
+  .j-tree {
+    padding: 14px;
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--radius-md);
+    background: var(--ui-surface);
+    color: var(--tone-heading);
+    font-size: var(--font-size-sm);
+    line-height: 1.45;
+  }
+
+  .j-tree-list {
+    gap: 2px;
+  }
+
+  .j-tree-list .j-tree-list {
+    padding-left: 20px;
+  }
+
+  .j-tree-list .j-tree-list::before {
+    top: 0;
+    bottom: 10px;
+    left: 7px;
+    width: 1px;
+    background: var(--ui-border-subtle);
+  }
+
+  .j-tree-list .j-tree-list > .j-tree-item::before {
+    top: 13px;
+    left: -11px;
+    width: 12px;
+    height: 1px;
+    background: var(--ui-border-subtle);
+  }
+
+  .j-tree-list li {
+    margin: 0;
+    padding: 0;
+  }
+
+  .j-tree-node {
+    gap: 7px;
+    min-height: 26px;
+    padding: 0 4px;
+    border-radius: var(--radius-sm);
+    color: var(--tone-caption);
+  }
+
+  .j-tree-node[role='button']:hover,
+  .j-tree-node[role='button']:focus-visible {
+    color: var(--tone-text);
+    background: var(--tone-soft);
+    outline: 0;
+  }
+
+  .j-tree-item.is-directory > .j-tree-node {
+    color: var(--tone-heading);
+    font-weight: 600;
+  }
+
+  .j-tree-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--tone-caption);
+  }
+
+  .j-tree-item.is-directory > .j-tree-node .j-tree-icon {
+    color: var(--tone-text);
+  }
+
+  .j-tree-icon .el-icon {
+    width: 16px;
+    height: 16px;
+  }
+}

package/src/css/tip.css

@@ -4,40 +4,19 @@
     display: grid;
     grid-template-columns: 0 1fr;
     align-items: flex-start;
-    row-gap: var(--tip-gap);
-    width: var(--tip-width);
-    border-width: var(--tip-border-width);
-    border-style: var(--tip-border-style);
-    border-color: var(--tip-border-color);
-    border-radius: var(--tip-border-radius);
-    padding: var(--tip-padding);
-    font-size: var(--tip-font-size);
-    color: var(--tip-fg);
-    background: var(--tip-bg);
-    box-shadow: var(--tip-box-shadow);
   }
 
   .j-tip:has(.tip-icon) {
+    -moz-column-gap: var(--s3);
     column-gap: var(--s3);
     grid-template-columns: var(--s4) 1fr;
   }
 
   .j-font-md .j-tip:has(.tip-icon) {
+    -moz-column-gap: var(--s5);
     column-gap: var(--s5);
   }
 
-  .j-tip .tip-icon,
-  .j-tip .tip-icon svg {
-    width: var(--tip-icon-size);
-    height: var(--tip-icon-size);
-  }
-
-  .j-tip .tip-icon {
-    color: var(--tip-icon-fg);
-    transform: translateY(calc(var(--space, 0.25rem) * 0.5));
-    margin: 0;
-  }
-
   .j-tip .tip-title {
     grid-column-start: 2;
     overflow: hidden;
@@ -45,8 +24,6 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     line-clamp: 1;
-    line-height: var(--tip-title-line-height);
-    font-weight: var(--tip-title-font-weight);
     margin: 0;
   }
 
@@ -54,8 +31,6 @@
     grid-column-start: 2;
     display: grid;
     justify-items: start;
-    gap: var(--tip-content-gap);
-    line-height: var(--tip-content-line-height);
     margin: 0;
   }
 

package/src/css/toast.css

@@ -1,12 +1,9 @@
 @layer components {
   .j-toast-container {
     position: fixed;
-    top: var(--toast-container-offset);
-    right: var(--toast-container-offset);
     z-index: var(--z-toast);
     display: flex;
     flex-direction: column;
-    gap: var(--toast-container-gap);
     align-items: center;
     left: 50%;
     transform: translateX(-50%);
@@ -16,27 +13,12 @@
   .j-toast {
     display: flex;
     align-items: center;
-    gap: var(--toast-gap);
-    padding: var(--toast-padding);
-    box-shadow: var(--toast-box-shadow);
-    font-size: var(--toast-font-size);
-    font-weight: var(--toast-font-weight);
-    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);
-    min-width: var(--toast-min-width);
-    max-width: var(--toast-max-width);
     word-break: break-all;
     cursor: pointer;
     pointer-events: auto;
   }
 
   .j-toast .el-icon {
-    margin-right: var(--s2);
-    width: var(--toast-icon-size);
     position: relative;
     color: inherit;
   }
@@ -51,9 +33,13 @@
     top: 45%;
     left: 50%;
     z-index: var(--z-toast);
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
     width: fit-content;
-    max-width: 240px;
     text-align: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     pointer-events: none;
     transform: translate(-50%, -50%);
@@ -66,10 +52,8 @@
   }
 
   .j-toast.is-confirm .toast-buttons {
-    width: 100%;
     display: flex;
     justify-content: flex-end;
-    gap: var(--space);
     position: relative;
   }
 }

package/src/css/toc.css

@@ -7,28 +7,4 @@
     display: flex;
     flex-direction: column;
   }
-
-  .j-toc .toc-link {
-    padding: 0.375rem 0 0.375rem 0.75rem;
-    border-left: 2px solid transparent;
-    color: var(--tone-caption);
-    font-size: var(--font-size-sm);
-    text-decoration: none;
-  }
-
-  .j-toc .toc-link:hover,
-  .j-toc .toc-link.is-active {
-    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;
-  }
 }

package/src/css/tokens.css

@@ -1,12 +1,7 @@
-/* ============================================
-   Design Tokens - Unified Token System
-   vanilla-jui v2
-   ============================================ */
-
 @layer tokens {
   /* ============================================
-     1. Layout Tokens
-     ============================================ */
+    1. Layout Tokens
+  ============================================ */
 
   :root {
     /* --- Z-Index --- */
@@ -100,8 +95,8 @@
   }
 
   /* ============================================
-     2. Color Tokens - Light Mode
-     ============================================ */
+    2. Color Tokens - Light Mode
+  ============================================ */
 
   :root,
   .light {
@@ -223,6 +218,7 @@
     /* Card */
     --tone-card: rgba(255, 255, 255, 0.8);
     --tone-card-hover: rgba(255, 255, 255, 0.9);
+    --tone-card-active: rgba(0, 0, 0, 0.2);
     --tone-card-border: rgba(0, 0, 0, 0.08);
     --tone-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 
@@ -412,6 +408,7 @@
     /* Card */
     --tone-card: rgba(17, 24, 39, 0.82);
     --tone-card-hover: rgba(17, 24, 39, 0.92);
+    --tone-card-active: rgba(255, 255, 255, 0.15);
     --tone-card-border: rgba(148, 163, 184, 0.12);
     --tone-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
 
@@ -1163,13 +1160,13 @@
   }
 
   .j-radius-round {
-    --radius-2xs: 0.375rem;
-    --radius-xs: 0.5rem;
-    --radius-sm: 0.75rem;
-    --radius-md: 1rem;
-    --radius-lg: 999px;
-    --radius-xl: 999px;
-    --radius-2xl: 999px;
+    --radius-2xs: 0.75rem;
+    --radius-xs: 1rem;
+    --radius-sm: 1.25rem;
+    --radius-md: 1.5rem;
+    --radius-lg: 2rem;
+    --radius-xl: 2.5rem;
+    --radius-2xl: 3rem;
   }
 
   /* ============================================
@@ -1246,7 +1243,6 @@
     --font-size-xl: 1.125rem;
     --font-size-2xl: 1.25rem;
 
-    /* --- Element Heights --- */
     --el-height-3xs: 1rem;
     --el-height-2xs: 1.25rem;
     --el-height-xs: 1.5rem;
@@ -1276,4 +1272,43 @@
     --el-height-2xl: 3rem;
     --el-height-3xl: 3.25rem;
   }
+
+  .mobile,
+  .mobile.j-font-sm {
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-md: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+
+    --el-height-3xs: 1.75rem;
+    --el-height-2xs: 2rem;
+    --el-height-xs: 2.25rem;
+    --el-height-sm: 2.5rem;
+    --el-height-md: 2.75rem;
+    --el-height-lg: 3rem;
+    --el-height-xl: 3.25rem;
+    --el-height-2xl: 3.5rem;
+    --el-height-3xl: 3.75rem;
+  }
+
+  .mobile.j-font-md {
+    --font-size-xs: 0.875rem;
+    --font-size-sm: 1rem;
+    --font-size-md: 1.125rem;
+    --font-size-lg: 1.25rem;
+    --font-size-xl: 1.5rem;
+    --font-size-2xl: 1.75rem;
+
+    --el-height-3xs: 2rem;
+    --el-height-2xs: 2.25rem;
+    --el-height-xs: 2.5rem;
+    --el-height-sm: 2.75rem;
+    --el-height-md: 3rem;
+    --el-height-lg: 3.25rem;
+    --el-height-xl: 3.5rem;
+    --el-height-2xl: 3.75rem;
+    --el-height-3xl: 4rem;
+  }
 }

package/src/css/toolbar.css

@@ -1,6 +1,7 @@
 @layer components {
   .j-toolbar-container {
-    position: var(--toolbar-container-position);
+    position: -webkit-sticky;
+    position: sticky;
     top: 0;
     width: 100%;
     z-index: var(--z-toolbar);
@@ -11,8 +12,6 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     scroll-behavior: smooth;
-    background: var(--toolbar-container-bg);
-    border-bottom: var(--toolbar-container-border);
   }
 
   .j-toolbar {
@@ -20,9 +19,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--toolbar-gap);
-    padding: var(--toolbar-padding);
-    box-shadow: var(--toolbar-box-shadow);
   }
 
   @media screen and (max-width: 992px) {
@@ -31,61 +27,19 @@
     }
   }
 
-  .j-toolbar button svg {
-    width: var(--toolbar-icon-size);
-    height: var(--toolbar-icon-size);
-  }
-
-  .j-toolbar .divider {
-    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,
-  .editor-drop-heading,
-  .editor-drop-size,
-  .editor-drop-color {
-    background: var(--toolbar-drop-bg, var(--ui-bg-subtle));
-    box-shadow: var(--toolbar-drop-box-shadow, var(--shadow-md));
-    border: var(--toolbar-drop-border, 1px solid var(--ui-border));
-    border-radius: var(--toolbar-drop-radius, var(--radius-sm));
-    font-size: var(--toolbar-drop-font-size, var(--font-size-md));
-  }
-
-  .editor-drop-color {
-    padding: var(--toolbar-drop-padding, var(--space));
-  }
-
   .editor-drop-color .color-panel {
-    padding: 0.5rem;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: 0.5rem;
   }
 
   .editor-drop-color .color-panel button.color-btn {
-    padding: 0;
-    margin: 0;
-    outline: none;
-    width: 32px;
-    height: 32px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--ui-border);
     cursor: pointer;
   }
 
   .editor-drop-color .color-panel button.color-btn.color-btn-clear::after {
-    content: '🚫';
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 30px;
-    background: var(--ui-bg-subtle);
-    border-radius: var(--radius-sm);
   }
 
   .editor-drop-color .color-panel .color-btn:last-of-type {

package/src/css/tooltip.css

@@ -1,21 +1,13 @@
 @layer comopnents {
   .j-tooltip {
     position: relative;
-    background: var(--tooltip-bg);
-    color: var(--tooltip-fg);
-    border-width: var(--tooltip-border-width);
-    border-style: var(--tooltip-border-style);
-    border-color: var(--tooltip-border-color);
-    border-radius: var(--tooltip-border-radius);
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
     width: fit-content;
-    max-width: var(--tooltip-max-width);
   }
 
   .j-tooltip .el-text {
     word-wrap: break-word;
-    padding: var(--tooltip-padding);
-    font-size: var(--tooltip-font-size);
-    line-height: var(--tooltip-line-height);
     position: relative;
   }
 }

package/src/css/tree.css

@@ -0,0 +1,49 @@
+.j-tree-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.j-tree-list[hidden] {
+  display: none;
+}
+
+.j-tree-list .j-tree-list {
+  position: relative;
+}
+
+.j-tree-list .j-tree-list::before {
+  position: absolute;
+  content: '';
+}
+
+.j-tree-item {
+  position: relative;
+}
+
+.j-tree-list .j-tree-list > .j-tree-item::before {
+  position: absolute;
+  content: '';
+}
+
+.j-tree-node {
+  display: flex;
+  align-items: center;
+}
+
+.j-tree-node[role='button'] {
+  cursor: pointer;
+}
+
+.j-tree-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.j-tree-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}