vanilla-jui 1.4.0 → 1.4.1

package/src/css/drop.css

@@ -17,12 +17,12 @@
   }
 
   .drop-container {
-    border-width: var(--drop-border-width, 1px);
-    border-style: var(--drop-border-style, solid);
-    border-color: var(--drop-border-color, var(--ui-border));
-    border-radius: var(--radius-md);
-    background-color: var(--drop-background, var(--ui-bg));
-    color: var(--drop-foreground, var(--ui-fg));
-    box-shadow: var(--drop-box-shadow, var(--shadow-sm));
+    border-width: var(--drop-border-width);
+    border-style: var(--drop-border-style);
+    border-color: var(--drop-border-color);
+    border-radius: var(--drop-border-radius);
+    background: var(--drop-bg);
+    color: var(--drop-fg);
+    box-shadow: var(--drop-box-shadow);
   }
 }

package/src/css/flow.css

@@ -72,7 +72,7 @@
     color: var(--tone-fg);
   }
 
-  .j-flow .flow-body {
+  s .j-flow .flow-body {
     min-width: 0;
   }
 

package/src/css/icon.css

@@ -3,27 +3,6 @@
 		display: block;
 	}
 
-	.j-loader {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background: var(--ui-bg-subtle);
-		width: 100%;
-		height: 100%;
-		position: absolute;
-	}
-
-	/* loader icon */
-	.icon-loader {
-		display: inline-block;
-		width: var(--font-size-xl);
-		height: var(--font-size-xl);
-		border: 1px solid currentcolor;
-		border-right-color: transparent;
-		border-radius: 50%;
-		animation: var(--speed-xl) linear infinite animate-spin;
-	}
-
 	/* close icon */
 	.icon-close {
 		box-sizing: border-box;

package/src/css/index.css

@@ -5,8 +5,11 @@
 @import url('./layout.css');
 @import url('./icon.css');
 @import url('./font.css');
+
 @import url('./components.css');
-@import url('./content.css');
 @import url('./themes/index.css');
+
+@import url('./content.css');
 @import url('./animation.css');
+
 @import url('./status.css');

package/src/css/loading.css

@@ -1,38 +1,54 @@
 @layer components {
+  .j-loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--loader-bg);
+  }
+
+  .j-loader .loader {
+    display: inline-block;
+    width: var(--loader-icon-size);
+    height: var(--loader-icon-size);
+    border-width: var(--loader-icon-width);
+    border-style: var(--loader-icon-style);
+    border-color: var(--loader-icon-fg);
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: var(--loader-icon-speed) linear infinite animate-spin;
+  }
+
   .j-loading {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--loading-background, var(--ui-bg));
-    display: none;
+    display: flex;
     justify-content: center;
     align-items: center;
-    backdrop-filter: var(--loading-backdrop-filter, blur(2px));
-  }
-
-  .j-loading.is-active {
-    display: flex;
-    z-index: var(--loading-index, inherit);
+    background: var(--loading-bg);
+    backdrop-filter: var(--loading-backdrop-filter);
   }
 
-  .loading-spinner {
-    width: var(--loading-spinner-size, 3rem);
-    height: var(--loading-spinner-size, 3rem);
-    /* border: var(--loading-spinner-width, 4px) solid var(--loading-spinner-background, var(--tone-fg)); */
-    border: var(--loading-spinner-width, 4px) solid var(--loading-spinner-background, var(--tone-soft));
-    border-top: var(--loading-spinner-width, 4px) solid var(--loading-spinner-color, var(--tone-solid));
+  .j-loading .loader {
+    width: var(--loading-loader-size);
+    height: var(--loading-loader-size);
+    border-width: var(--loading-loader-border-width);
+    border-style: var(--loading-loader-border-style);
+    border-color: var(--loading-loader-border-color);
+    border-top-color: var(--loading-loader-border-top-color);
     border-radius: 50%;
-    animation: animate-spin 1s linear infinite;
+    animation: 1s linear infinite animate-spin;
   }
 
-  .j-loading.is-bold .loading-spinner {
+  .j-loading.is-bold .loader {
     border: none;
     aspect-ratio: 1;
-    background:
-      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/8px 8px no-repeat,
-      conic-gradient(#0000 30%, var(--tone-solid));
-    mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+    background: var(--loading-loader-bg);
+    mask: var(--loading-loader-mask);
   }
 }

package/src/css/modal.css

@@ -1,27 +1,15 @@
 @layer components {
   .j-modal {
-    --modal-border: var(--modal-border-width, 1px) var(--modal-border-style, solid) var(--modal-border-color, transparent);
-
-    --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: var(--s4);
-    --modal-body-line-height: var(--line-height-paragraph);
-
-    --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));
-    border-radius: var(--modal-border-radius, var(--radius-md));
-    box-shadow: var(--modal-box-shadow, var(--shadow-md));
-    min-width: var(--modal-min-width, 300px);
-    max-width: var(--modal-max-width, 500px);
-    max-height: var(--modal-max-height, 90vh);
+    color: var(--modal-fg);
+    background: var(--modal-bg);
+    border-width: var(--modal-border-width);
+    border-style: var(--modal-border-style);
+    border-color: var(--modal-border-color);
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--modal-box-shadow);
+    min-width: var(--modal-min-width);
+    max-width: var(--modal-max-width);
+    max-height: var(--modal-max-height);
     overflow: hidden;
     animation: animate-fade-in 0.35s ease-in-out;
     display: flex;
@@ -38,22 +26,21 @@
     height: 100%;
     max-width: none;
     max-height: none;
-    /* --modal-border-color: var(--ui-border-subtle); */
   }
 
   .j-modal .modal-header {
-    padding: var(--modal-header-padding);
-    border-bottom: var(--modal-border);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: var(--modal-header-gap);
+    padding: var(--modal-header-padding);
+    border-bottom: var(--modal-header-bottom-border);
   }
 
   .j-modal .modal-header .modal-title {
     margin: 0;
     font-size: var(--modal-title-font-size);
-    font-weight: 500;
+    font-weight: var(--modal-title-font-weight);
   }
 
   .j-modal .modal-body {
@@ -68,27 +55,11 @@
     line-height: var(--modal-body-line-height);
   }
 
-  .j-modal.is-fullscreen .modal-header {
-    --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 {
-    --modal-body-padding: 0;
-  }
-
-  .j-modal.is-fullscreen .modal-footer {
-    --modal-footer-padding: var(--s4);
-  }
-
   .j-modal .modal-footer {
-    padding: var(--modal-footer-padding);
-    border-top: var(--modal-footer-border, var(--modal-border));
     display: flex;
     justify-content: flex-end;
     gap: var(--modal-footer-gap);
+    padding: var(--modal-footer-padding);
+    border-top: var(--modal-footer-top-border);
   }
 }

package/src/css/offcanvas.css

@@ -5,11 +5,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--offcanvas-overlay-background,
-        var(--ui-overlay-muted));
-    z-index: var(--z-overlay);
     opacity: 0;
     transition: opacity 0.3s ease;
+    background: var(--offcanvas-overlay-bg);
+    z-index: var(--z-overlay);
   }
 
   .j-offcanvas-overlay.is-active {
@@ -19,25 +18,23 @@
   .j-offcanvas {
     position: fixed;
     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);
+    background: var(--offcanvas-bg);
+    box-shadow: var(--offcanvas-box-shadow);
   }
 
-  .j-offcanvas.is-slide,
-  .j-offcanvas.is-push {
+  .j-offcanvas.is-slide {
     transition: transform 0.3s ease;
   }
 
-  .j-offcanvas:not(.is-slide):not(.is-push) {
+  .j-offcanvas:not(.is-slide) {
     transition: none;
   }
 
   .j-offcanvas.is-left {
     top: 0;
     left: 0;
-    width: 300px;
-    height: 100%;
+    width: var(--offcanvas-block-width);
+    height: 100vh;
     transform: translateX(-100%);
     border-right: var(--offcanvas-border);
   }
@@ -45,8 +42,8 @@
   .j-offcanvas.is-right {
     top: 0;
     right: 0;
-    width: 300px;
-    height: 100%;
+    width: var(--offcanvas-block-width);
+    height: 100vh;
     transform: translateX(100%);
     border-left: var(--offcanvas-border);
   }
@@ -55,7 +52,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 200px;
+    height: var(--offcanvas-inline-height);
     transform: translateY(-100%);
     border-bottom: var(--offcanvas-border);
   }
@@ -64,41 +61,18 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 200px;
+    height: var(--offcanvas-inline-height);
     transform: translateY(100%);
     border-top: var(--offcanvas-border);
   }
 
-  .j-offcanvas.is-slide.is-active,
-  .j-offcanvas.is-active:not(.is-push) {
+  .j-offcanvas.is-active {
     transform: translate(0, 0);
   }
 
-  .offcanvas-push-body {
-    transition: transform 0.3s ease;
-    overflow: hidden;
-  }
-
-  .offcanvas-push-left {
-    transform: translateX(300px);
-  }
-
-  .offcanvas-push-right {
-    transform: translateX(-300px);
-  }
-
-  .offcanvas-push-top {
-    transform: translateY(200px);
-  }
-
-  .offcanvas-push-bottom {
-    transform: translateY(-200px);
-  }
-
   .j-offcanvas .offcanvas-content {
     height: 100%;
     overflow-y: auto;
-    box-sizing: border-box;
     position: relative;
   }
-}
+}

package/src/css/popup.css

@@ -1,14 +1,14 @@
 @layer components {
   .j-popup-layout {
+    display: flex;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--popup-background, var(--ui-popup-background));
-    backdrop-filter: var(--popup-backdrop-filter, blur(4px));
-    display: flex;
-    padding: var(--popup-layout-padding, var(--s4));
+    background: var(--popup-bg);
+    backdrop-filter: var(--popup-backdrop-filter);
+    padding: var(--popup-layout-padding);
     z-index: var(--z-popup);
   }
 

package/src/css/status.css

@@ -14,8 +14,6 @@
     filter: grayscale(100%);
   }
 
-
-
   /* readonly */
   [readonly] {
     opacity: var(--opacity-readonly);

package/src/css/swiper.css

@@ -18,7 +18,7 @@
   .j-swiper .swiper-slide {
     position: relative;
     display: block;
-    width: var(--swiper-slide-width, 100%);
+    width: 100%;
     min-width: 100%;
     overflow: hidden;
     color: inherit;
@@ -30,52 +30,52 @@
     display: block;
     width: 100%;
     height: 100%;
-    min-height: var(--swiper-min-height, 180px);
+    min-height: var(--swiper-min-height);
     object-fit: cover;
     pointer-events: none;
   }
 
   .j-swiper .swiper-slide-title {
-    position: absolute;
-    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) var(--s2);
-    overflow: hidden;
-    color: var(--swiper-title-color, #fff);
-    font-size: var(--swiper-title-font-size, var(--font-size-lg));
-    font-weight: var(--font-weight-bold, 700);
-    line-height: 1.35;
+    position: absolute;
+    right: var(--swiper-title-inset);
+    bottom: var(--swiper-title-inset);
+    left: var(--swiper-title-inset);
+    padding: var(--swiper-title-padding);
+    color: var(--swiper-title-color);
+    font-size: var(--swiper-title-font-size);
+    font-weight: var(--swiper-title-font-weight);
+    background: var(--swiper-title-bg);
+    border-radius: var(--swiper-title-border-radius);
+    line-height: var(--swiper-title-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
-    background: var(--swiper-title-background, rgb(0 0 0 / 35%));
-    border-radius: var(--radius-sm);
+    z-index: 1;
+    overflow: hidden;
   }
 
   .j-swiper .swiper-pagination {
     position: absolute;
-    z-index: 2;
     display: flex;
-    gap: var(--swiper-pagination-gap, 7px);
+    gap: var(--swiper-pagination-gap);
     align-items: center;
     justify-content: center;
+    z-index: 2;
   }
 
   .j-swiper .swiper-pagination.is-horizontal {
-    right: var(--s3);
-    bottom: var(--s2);
-    left: var(--s3);
+    right: var(--swiper-pagination-inline);
+    bottom: var(--swiper-pagination-block);
+    left: var(--swiper-pagination-inline);
   }
 
   .j-swiper .swiper-pagination-indicator {
     display: inline-block;
-    width: var(--swiper-indicator-size, 8px);
-    height: var(--swiper-indicator-size, 8px);
+    width: var(--swiper-indicator-size);
+    height: var(--swiper-indicator-size);
     padding: 0;
     cursor: pointer;
-    background: var(--swiper-indicator-background, rgb(255 255 255 / 62%));
+    background: var(--swiper-indicator-bg);
     border: 0;
     border-radius: 999px;
     outline: none;
@@ -87,14 +87,13 @@
 
   .j-swiper .swiper-pagination-indicator:hover,
   .j-swiper .swiper-pagination-indicator:focus-visible {
-    background: var(--swiper-indicator-hover-background,
-        rgb(255 255 255 / 86%));
+    background: var(--swiper-indicator-hover-bg);
   }
 
   .j-swiper .swiper-pagination-indicator.is-active,
   .j-swiper .swiper-pagination-indicator.active {
-    width: var(--swiper-indicator-active-width, 22px);
-    background: var(--swiper-indicator-active-background, #fff);
+    width: var(--swiper-indicator-active-width);
+    background: var(--swiper-indicator-active-bg);
   }
 
   .j-swiper .swiper-navigation {
@@ -104,12 +103,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--swiper-navigation-size, 36px);
-    height: var(--swiper-navigation-size, 36px);
+    width: var(--swiper-navigation-size);
+    height: var(--swiper-navigation-size);
     padding: 0;
-    color: var(--swiper-navigation-color, #fff);
+    color: var(--swiper-navigation-fg);
     cursor: pointer;
-    background: var(--swiper-navigation-background, rgb(0 0 0 / 35%));
+    background: var(--swiper-navigation-bg);
     border: 0;
     border-radius: 999px;
     transform: translateY(-50%);
@@ -120,21 +119,21 @@
 
   .j-swiper .swiper-navigation:hover,
   .j-swiper .swiper-navigation:focus-visible {
-    background: var(--swiper-navigation-hover-background, rgb(0 0 0 / 65%));
+    background: var(--swiper-navigation-hover-bg);
     outline: none;
   }
 
   .j-swiper .swiper-navigation.is-prev {
-    left: var(--s2);
+    left: var(--swiper-navigation-offset);
   }
 
   .j-swiper .swiper-navigation.is-next {
-    right: var(--s2);
+    right: var(--swiper-navigation-offset);
   }
 
   .j-swiper .swiper-navigation svg {
-    width: var(--swiper-navigation-icon-size, 18px);
-    height: var(--swiper-navigation-icon-size, 18px);
+    width: var(--swiper-navigation-icon-size);
+    height: var(--swiper-navigation-icon-size);
     pointer-events: none;
   }
 
@@ -143,18 +142,4 @@
     cursor: default;
     opacity: 0.36;
   }
-
-  @media (max-width: 640px) {
-    .j-swiper .swiper-slide-title {
-      right: var(--s2);
-      bottom: var(--s2);
-      left: var(--s2);
-      font-size: var(--font-size-md);
-    }
-
-    .j-swiper .swiper-navigation {
-      width: 32px;
-      height: 32px;
-    }
-  }
 }

package/src/css/tabs.css

@@ -39,51 +39,28 @@
   }
 
   .j-tabs .tab-list .tab-item {
+    padding: var(--tab-list-item-padding);
+    margin: var(--tab-list-item-margin);
+    color: var(--tab-fg);
+    font-weight: var(--tab-font-weight);
     flex-shrink: 0;
-    padding: var(--tab-list-item-padding, var(--s2) var(--s3));
-    margin: var(--tab-list-item-margin, 0);
     cursor: pointer;
   }
 
-  .j-tabs.is-top .tab-wrap {
-    border-bottom: var(--tab-wrap-bottom-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs.is-bottom .tab-wrap {
-    border-top: var(--tab-wrap-top-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs.is-left .tab-wrap {
-    border-right: var(--tab-wrap-right-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs.is-right .tab-wrap {
-    border-left: var(--tab-wrap-left-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs .tab-list .tab-item.is-active {
-    color: var(--tone-solid);
-    font-weight: var(--font-medium);
-    /* text-decoration: underline;
-    text-decoration-color: var(--tone-solid);
-    text-underline-offset: var(--space); */
-  }
-
   .j-tabs .tab-list .tab-item.is-disabled {
-    color: var(--ui-border-strong);
     cursor: not-allowed;
   }
 
   .j-tabs .tab-panel {
-    padding: var(--tab-panel-padding, var(--s2) var(--s3));
-    margin: var(--tab-panel-margin, 0);
+    padding: var(--tab-panel-padding);
+    margin: var(--tab-panel-margin);
   }
 
   .j-tabs .tab-panel .panel-item {
     display: none;
-    margin: var(--tab-panel-item-margin, 0);
+    margin: var(--tab-panel-item-margin);
     position: relative;
-    min-height: 1.25em;
+    min-height: var(--tab-panel-item-min-height);
   }
 
   .j-tabs .tab-panel .panel-item.is-active {
@@ -91,6 +68,6 @@
   }
 
   .j-tabs .tab-panel .panel-item>* {
-    margin: 0;
+    margin: var(--tab-panel-item-content-margin);
   }
 }