vanilla-jui 1.3.10 → 1.3.11

package/src/css/index.css

@@ -1,7 +1,7 @@
 @layer config, layout, content, icon, font, components, menu, form, 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');

package/src/css/layout.css

@@ -449,7 +449,7 @@
   /* Grid 容器：自动 gap + 响应式列 */
   .grid-container {
     display: grid;
-    gap: var(--grid-container-gap, calc(var(--space) * 2));
+    gap: var(--grid-container-gap, var(--s2));
     width: 100%;
     /* 默认：单列（移动端友好） */
     grid-template-columns: 1fr;

package/src/css/menu.css

@@ -52,7 +52,7 @@
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: calc(var(--space) * 1);
+    gap: var(--space);
     white-space: nowrap;
     cursor: pointer;
     appearance: button;
@@ -106,7 +106,7 @@
     display: none;
     position: absolute;
     transform: translateY(1px);
-    padding: calc(var(--space) * 2) 0;
+    padding: var(--s2) 0;
     background-color: var(--ui-surface-subtle);
     border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
@@ -125,7 +125,7 @@
 
   .j-menu .menu .menu-item.menu-item-has-children:hover .sub-menu {
     display: block;
-    z-index: var(--z-index-submenu);
+    z-index: var(--z-submenu);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item:hover a {
@@ -329,13 +329,13 @@
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
-    gap: calc(var(--space) * 2);
+    gap: var(--s2);
     white-space: normal;
     appearance: button;
     touch-action: manipulation;
     color: currentColor;
-    min-height: var(--el-height-xl);
-    padding: calc(var(--space) * 2) calc(var(--space) * 4);
+    min-height: var(--el-height-2xl);
+    padding: var(--s2) var(--s4);
     line-height: var(--line-height-paragraph);
     position: relative;
     text-decoration: none;
@@ -394,7 +394,7 @@
     opacity: 1;
     transform: translateX(0);
     height: 100%;
-    z-index: var(--z-index-submenu);
+    z-index: var(--z-submenu);
   }
 
   /* bottom menu */
@@ -424,11 +424,11 @@
     gap: 1px;
     border-top: 1px solid var(--ui-border-subtle);
     background: linear-gradient(to bottom,
-        var(--ui-surface-subtle) 20%,
-        var(--ui-bg-muted) 40%,
-        var(--ui-surface-muted) 50%,
-        var(--ui-bg-muted) 60%,
-        var(--ui-surface-subtle) 80%);
+        var(--ui-bg-subtle) 20%,
+        var(--ui-border) 40%,
+        var(--ui-outline) 50%,
+        var(--ui-border) 60%,
+        var(--ui-bg-subtle) 80%);
     font-size: var(--font-size-md);
   }
 
@@ -444,11 +444,11 @@
     width: 100%;
     text-align: center;
     text-decoration: none;
-    height: var(--el-height-xl);
+    height: var(--el-height-2xl);
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: calc(var(--space) * 1);
+    gap: var(--space);
     color: var(--ui-fg);
     padding: calc(var(--space) * 1.5);
   }
@@ -475,9 +475,9 @@
     visibility: hidden;
     background: linear-gradient(to right,
         var(--ui-surface-subtle) 20%,
-        var(--ui-bg-muted) 40%,
-        var(--ui-surface-muted) 50%,
-        var(--ui-bg-muted) 60%,
+        var(--ui-border) 40%,
+        var(--ui-outline) 50%,
+        var(--ui-border) 60%,
         var(--ui-surface-subtle) 80%);
     border: 1px solid var(--ui-border-subtle);
     display: flex;
@@ -485,8 +485,8 @@
     align-items: center;
     justify-content: center;
     gap: 1px;
-    min-width: calc(var(--space) * 30);
-    max-width: calc(var(--space) * 76);
+    min-width: var(--columns-6xs);
+    max-width: var(--columns-2xs);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -507,14 +507,14 @@
   }
 
   .j-bottom-menu .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
-    padding: calc(var(--space) * 1.5) calc(var(--space) * 3);
+    padding: calc(var(--space) * 1.5) var(--s3);
   }
 
   /* drop menu  */
   .drop-menu {
     min-width: 100px;
     max-width: 200px;
-    padding: calc(var(--space) * 2);
+    padding: var(--s2);
     font-size: var(--font-size-md);
     background-color: var(--ui-surface-subtle);
     border-radius: var(--radius-sm);
@@ -532,9 +532,9 @@
   .drop-menu .menu-item a {
     display: flex;
     align-items: center;
-    gap: var(--drop-menu-item-gap, calc(var(--space) * 2));
+    gap: var(--drop-menu-item-gap, var(--s2));
     width: 100%;
-    padding: calc(var(--space) * 1) calc(var(--space) * 2);
+    padding: var(--space) var(--s2);
     text-decoration: none;
     color: var(--ui-fg-muted);
     border-radius: var(--radius-md);
@@ -552,12 +552,12 @@
 
   .drop-menu .el-icon,
   .drop-menu svg {
-    width: var(--drop-menu-icon-size, calc(var(--space) * 4));
-    height: var(--drop-menu-icon-size, calc(var(--space) * 4));
+    width: var(--drop-menu-icon-size, var(--s4));
+    height: var(--drop-menu-icon-size, var(--s4));
   }
 
   .drop-menu .menu-item.menu-heading {
-    padding: var(--menu-item-heading, calc(var(--space) * 1) calc(var(--space) * 2));
+    padding: var(--menu-item-heading, var(--space) var(--s2));
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }

package/src/css/modal.css

@@ -2,18 +2,18 @@
   .j-modal {
     --modal-border: var(--modal-border-width, 1px) var(--modal-border-style, solid) var(--modal-border-color, transparent);
 
-    --modal-header-padding: calc(var(--space) * 4) calc(var(--space) * 4) 0;
+    --modal-header-padding: var(--s4) var(--s4) 0;
     --modal-header-gap: var(--space);
     --modal-title-font-size: var(--font-size-md);
     --modal-close-icon-size: var(--el-height-3xs);
     --modal-close-font-size: var(--font-size-lg);
     --modal-close-color: var(--ui-fg-muted);
 
-    --modal-body-padding: calc(var(--space) * 4);
+    --modal-body-padding: var(--s4);
     --modal-body-line-height: var(--line-height-paragraph);
 
-    --modal-footer-padding: 0 calc(var(--space) * 4) calc(var(--space) * 4);
-    --modal-footer-gap: calc(var(--space) * 2);
+    --modal-footer-padding: 0 var(--s4) var(--s4);
+    --modal-footer-gap: var(--s2);
 
     background: var(--modal-background, var(--ui-bg));
     border: var(--modal-border, 1px solid var(--ui-border));
@@ -56,27 +56,6 @@
     font-weight: 500;
   }
 
-  .j-modal .modal-header .modal-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--modal-close-icon-size);
-    height: var(--modal-close-icon-size);
-    font-size: var(--modal-close-font-size);
-    color: var(--modal-close-color);
-    text-align: center;
-  }
-
-  .j-modal .modal-header .modal-close:focus-within {
-    outline: 2px solid var(--tone-solid);
-    color: var(--tone-solid);
-  }
-
-  .j-modal .modal-header .modal-close:hover {
-    color: var(--tone-solid);
-    background-color: var(--tone-subtle);
-  }
-
   .j-modal .modal-body {
     padding: var(--modal-body-padding);
     overflow-y: auto;
@@ -90,7 +69,11 @@
   }
 
   .j-modal.is-fullscreen .modal-header {
-    --modal-header-padding: calc(var(--space) * 4);
+    --modal-header-padding: var(--s4);
+  }
+
+  .j-modal:not(.is-fullscreen) .modal-header:has(.modal-close) {
+    --modal-header-padding: var(--s3) var(--s4) 0;
   }
 
   .j-modal.is-fullscreen .modal-body {
@@ -98,7 +81,7 @@
   }
 
   .j-modal.is-fullscreen .modal-footer {
-    --modal-footer-padding: calc(var(--space) * 4);
+    --modal-footer-padding: var(--s4);
   }
 
   .j-modal .modal-footer {

package/src/css/offcanvas.css

@@ -7,7 +7,7 @@
     height: 100%;
     background-color: var(--offcanvas-overlay-background,
         var(--ui-overlay-muted));
-    z-index: var(--z-index-overlay);
+    z-index: var(--z-overlay);
     opacity: 0;
     transition: opacity 0.3s ease;
   }
@@ -18,7 +18,7 @@
 
   .j-offcanvas {
     position: fixed;
-    z-index: var(--z-index-offcanvas);
+    z-index: var(--z-offcanvas);
     background: var(--offcanvas-background, var(--ui-bg));
     box-shadow: var(--offcanvas-box-shadow, var(--shadow-md));
     --offcanvas-border: 1px solid var(--ui-border-subtle);

package/src/css/pagination.css

@@ -13,7 +13,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--pagination-gap, calc(var(--space) * 1));
+    gap: var(--pagination-gap, var(--space));
     margin: 0;
     padding: 0;
   }

package/src/css/popup.css

@@ -8,8 +8,8 @@
     background-color: var(--popup-background, var(--ui-popup-background));
     backdrop-filter: var(--popup-backdrop-filter, blur(4px));
     display: flex;
-    padding: var(--popup-layout-padding, calc(var(--space) * 4));
-    z-index: var(--z-index-popup);
+    padding: var(--popup-layout-padding, var(--s4));
+    z-index: var(--z-popup);
   }
 
   .j-popup-layout,

package/src/css/swiper.css

@@ -37,12 +37,12 @@
 
   .j-swiper .swiper-slide-title {
     position: absolute;
-    right: var(--swiper-title-inset, calc(var(--space) * 3));
-    bottom: var(--swiper-title-inset, calc(var(--space) * 3));
-    left: var(--swiper-title-inset, calc(var(--space) * 3));
+    right: var(--swiper-title-inset, var(--s3));
+    bottom: var(--swiper-title-inset, var(--s3));
+    left: var(--swiper-title-inset, var(--s3));
     z-index: 1;
     display: block;
-    padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
+    padding: calc(var(--space) * 1.5) var(--s2);
     overflow: hidden;
     color: var(--swiper-title-color, #fff);
     font-size: var(--swiper-title-font-size, var(--font-size-lg));
@@ -64,9 +64,9 @@
   }
 
   .j-swiper .swiper-pagination.is-horizontal {
-    right: calc(var(--space) * 3);
-    bottom: calc(var(--space) * 2);
-    left: calc(var(--space) * 3);
+    right: var(--s3);
+    bottom: var(--s2);
+    left: var(--s3);
   }
 
   .j-swiper .swiper-pagination-indicator {
@@ -125,11 +125,11 @@
   }
 
   .j-swiper .swiper-navigation.is-prev {
-    left: calc(var(--space) * 2);
+    left: var(--s2);
   }
 
   .j-swiper .swiper-navigation.is-next {
-    right: calc(var(--space) * 2);
+    right: var(--s2);
   }
 
   .j-swiper .swiper-navigation svg {
@@ -146,9 +146,9 @@
 
   @media (max-width: 640px) {
     .j-swiper .swiper-slide-title {
-      right: calc(var(--space) * 2);
-      bottom: calc(var(--space) * 2);
-      left: calc(var(--space) * 2);
+      right: var(--s2);
+      bottom: var(--s2);
+      left: var(--s2);
       font-size: var(--font-size-md);
     }
 

package/src/css/tabs.css

@@ -40,7 +40,7 @@
 
   .j-tabs .tab-list .tab-item {
     flex-shrink: 0;
-    padding: var(--tab-list-item-padding, calc(var(--space) * 2) calc(var(--space) * 3));
+    padding: var(--tab-list-item-padding, var(--s2) var(--s3));
     margin: var(--tab-list-item-margin, 0);
     cursor: pointer;
   }
@@ -75,7 +75,7 @@
   }
 
   .j-tabs .tab-panel {
-    padding: var(--tab-panel-padding, calc(var(--space) * 2) calc(var(--space) * 3));
+    padding: var(--tab-panel-padding, var(--s2) var(--s3));
     margin: var(--tab-panel-margin, 0);
   }
 

package/src/css/tag.css

@@ -5,20 +5,19 @@
     align-items: center;
     gap: var(--tag-gap, var(--space));
     padding: 0 var(--tag-padding, calc(var(--space) * 1.5));
-    height: var(--tag-height, calc(var(--space) * 6));
+    height: var(--tag-height, var(--el-height-xs));
     line-height: var(--tag-line-height, var(--line-height-self));
     font-size: var(--tag-font-size, var(--font-size-sm));
     font-weight: var(--font-normal);
     border-radius: var(--tag-radius, var(--radius-md));
     border: 1px solid var(--tag-border-color, var(--ui-border));
     color: var(--tag-foreground, var(--ui-fg));
-    background-color: var(--tag-background, var(--ui-bg));
+    background: var(--tag-background, var(--ui-bg));
     box-shadow: var(--tag-box-shadow, var(--shadow-sm));
   }
 
   .j-font-md .j-tag {
-    --tag-padding: calc(var(--space) * 2);
-    --tag-height: calc(var(--space) * 8);
+    --tag-padding: var(--s2);
   }
 
   .j-tag.is-contrast {

package/src/css/theme-palette.css

@@ -1,22 +1,22 @@
 @layer components {
   .j-theme-palette {
-    padding: var(--palette-padding, calc(var(--space) * 4));
+    padding: var(--palette-padding, var(--s4));
   }
 
   .j-theme-palette>h3 {
-    margin: var(--palette-title-margin, calc(var(--space) * 2) 0);
+    margin: var(--palette-title-margin, var(--s2) 0);
   }
 
   .j-theme-palette .palette-container {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-container-gap, calc(var(--space) * 4));
+    gap: var(--palette-container-gap, var(--s4));
   }
 
   .j-theme-palette .palette-container .palette-item {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-item-gap, calc(var(--space) * 2));
+    gap: var(--palette-item-gap, var(--s2));
   }
 
   .j-theme-palette .palette-container .palette-item .item-title {
@@ -33,8 +33,8 @@
   }
 
   .j-theme-palette .palette-container .palette-item .items>button {
-    padding-left: calc(var(--space) * 2);
-    padding-right: calc(var(--space) * 2);
+    padding-left: var(--s2);
+    padding-right: var(--s2);
     min-width: 0;
     overflow: hidden;
   }

package/src/css/tip.css

@@ -20,7 +20,7 @@
 
   .j-tip:has(.tip-icon) {
     column-gap: calc(var(--space, 0.25rem) * 3);
-    grid-template-columns: calc(var(--space) * 4) 1fr;
+    grid-template-columns: var(--s4) 1fr;
   }
 
   .j-font-md .j-tip:has(.tip-icon) {

package/src/css/toast.css

@@ -1,12 +1,12 @@
 @layer components {
   .j-toast-container {
     position: fixed;
-    top: var(--toast-container-offset, calc(var(--space) * 2));
-    right: var(--toast-container-offset, calc(var(--space) * 2));
-    z-index: var(--z-index-toast);
+    top: var(--toast-container-offset, var(--s2));
+    right: var(--toast-container-offset, var(--s2));
+    z-index: var(--z-toast);
     display: flex;
     flex-direction: column;
-    gap: var(--toast-container-gap, calc(var(--space) * 2));
+    gap: var(--toast-container-gap, var(--s2));
     align-items: center;
     left: 50%;
     transform: translateX(-50%);
@@ -16,7 +16,7 @@
   .j-toast {
     display: flex;
     align-items: center;
-    padding: var(--toast-padding, calc(var(--space) * 3) calc(var(--space) * 4));
+    padding: var(--toast-padding, var(--s3) var(--s4));
     border-radius: var(--toast-border-radius, var(--radius-md));
     box-shadow: var(--toast-box-shadow, var(--shadow-md));
     font-size: var(--toast-font-size, var(--font-size-md));
@@ -45,7 +45,7 @@
   }
 
   .j-toast .toast-icon {
-    margin-right: calc(var(--space) * 2);
+    margin-right: var(--s2);
     width: var(--toast-icon-size, var(--font-size-lg));
   }
 
@@ -112,13 +112,13 @@
     transform: translate(-50%, -50%);
     transition: opacity var(--speed-sm) ease-in-out;
     opacity: 0;
-    z-index: var(--z-index-toast);
+    z-index: var(--z-toast);
     font-size: var(--toast-lite-font-size, var(--font-size-md));
     text-align: center;
     color: var(--toast-lite-color, var(--ui-bg));
     background: var(--toast-lite-background, var(--ui-fg));
     border-radius: var(--toast-lite-border-radius, var(--radius-md));
-    padding: var(--toast-lite-padding, calc(var(--space) * 2) calc(var(--space) * 3));
+    padding: var(--toast-lite-padding, var(--s2) var(--s3));
     max-width: var(--toast-lite-max-width, calc(var(--screen-sm) / 2));
     user-select: none;
     pointer-events: none;