vanilla-jui 1.4.0 → 1.4.1

package/src/css/tag.css

@@ -3,49 +3,19 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    gap: var(--tag-gap, var(--space));
-    padding: 0 var(--tag-padding, calc(var(--space) * 1.5));
-    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: var(--tag-background, var(--ui-bg));
-    box-shadow: var(--tag-box-shadow, var(--shadow-sm));
-  }
-
-  .j-font-md .j-tag {
-    --tag-padding: var(--s2);
-  }
-
-  .j-tag.is-contrast {
-    --tag-background: var(--ui-fg);
-    --tag-foreground: var(--ui-bg);
-  }
-
-  .j-tag.is-primary {
-    --tag-background: var(--tone-solid);
-    --tag-foreground: var(--tone-fg);
-    --tag-border-color: var(--tone-solid);
-  }
-
-  .j-tag.is-secondary {
-    --tag-background: var(--tone-soft);
-    --tag-foreground: var(--tone-text);
-    --tag-border-color: transparent;
-  }
-
-  .j-tag.is-outline {
-    --tag-background: transparent;
-    --tag-foreground: var(--tone-solid);
-    --tag-border-color: var(--tone-solid);
-  }
-
-  .j-tag.is-ghost {
-    --tag-border-color: transparent;
-    --tag-shadow: none;
+    gap: var(--tag-gap);
+    padding: var(--tag-padding);
+    height: var(--tag-height);
+    line-height: var(--tag-line-height);
+    font-size: var(--tag-font-size);
+    font-weight: var(--tag-font-weight);
+    border-width: var(--tag-border-width);
+    border-style: var(--tag-border-style);
+    border-color: var(--tag-border-color);
+    border-radius: var(--tag-border-radius);
+    color: var(--tag-fg);
+    background: var(--tag-bg);
+    box-shadow: var(--tag-box-shadow);
   }
 
   .j-tag span {
@@ -56,42 +26,11 @@
 
   .j-tag img,
   .j-tag svg {
-    width: var(--tag-icon-size, var(--font-size-sm));
-    height: var(--tag-icon-size, var(--font-size-sm));
+    width: var(--tag-icon-size);
+    height: var(--tag-icon-size);
   }
 
   .j-tag:hover {
-    opacity: var(--opacity-hover, 0.9);
-  }
-
-  .j-tag.is-default:hover {
-    background-color: var(--ui-surface-hover);
-  }
-
-  .j-tag.is-outline:hover,
-  .j-tag.is-ghost:hover {
-    background-color: var(--tone-subtle);
-  }
-
-  .j-tag .el-icon[data-action='close']:hover {
-    color: var(--tone-fg);
-    background-color: var(--tone-solid);
-    border-radius: 50%;
-  }
-
-  .j-tag.is-default .el-icon[data-action='close']:hover,
-  .j-tag.is-ghost .el-icon[data-action='close']:hover {
-    background-color: var(--ui-fg);
-    color: var(--ui-bg-subtle);
-  }
-
-  .j-tag.is-contrast .el-icon[data-action='close']:hover {
-    color: var(--ui-fg);
-    background-color: var(--ui-bg);
-  }
-
-  .j-tag.is-primary .el-icon[data-action='close']:hover {
-    color: var(--tone-solid);
-    background-color: var(--tone-fg);
+    opacity: var(--opacity-hover);
   }
 }

package/src/css/themes/default/accordion.css

@@ -0,0 +1,62 @@
+@layer themes {
+    .j-accordion {
+        --accordion-font-size: var(--font-size-md);
+        --accordion-font-weight: var(--font-medium);
+        --accordion-header-font-size: var(--font-size-md);
+        --accordion-header-padding: var(--s2) var(--s3);
+        --accordion-header-margin: 0;
+        --accordion-border: 1px solid var(--ui-border-subtle);
+        --accordion-icon-size: var(--font-size-lg);
+        --accordion-icon-transform: rotate(0deg);
+        --accordion-panel-margin: 0;
+        --accordion-panel-content-margin: 0;
+        --accordion-panel-content-padding: 0 var(--s3) var(--s2);
+    }
+
+    .j-accordion .accordion-header {
+        padding: var(--accordion-header-padding);
+        margin: var(--accordion-header-margin);
+        font-weight: var(--accordion-font-weight);
+        font-size: var(--accordion-header-font-size);
+        background: var(--accordion-bg);
+        border-bottom: var(--accordion-border);
+    }
+
+    .j-accordion .accordion-header.is-active {
+        border-color: transparent;
+    }
+
+    .j-accordion .accordion-header.is-active .header-title {
+        --accordion-font-weight: var(--font-bold);
+    }
+
+    .j-accordion .accordion-header:hover:not(.is-active) {
+        --accordion-bg: var(--ui-surface-hover)
+    }
+
+    .j-accordion .accordion-header .header-arrow {
+        width: var(--accordion-icon-size);
+        height: var(--accordion-icon-size);
+        transition: transform 0.3s ease-out;
+        transform: var(--accordion-icon-transform);
+    }
+
+    .j-accordion .accordion-header.is-active .header-arrow {
+        --accordion-icon-transform: rotate(180deg);
+    }
+
+    .j-accordion .accordion-panel {
+        margin: var(--accordion-panel-margin);
+        font-size: var(--accordion-font-size);
+    }
+
+    .j-accordion .accordion-panel .panel-content {
+        margin: var(--accordion-panel-content-margin);
+        padding: var(--accordion-panel-content-padding);
+        border-bottom: var(--accordion-border);
+    }
+
+    .j-accordion .accordion-panel:last-child .panel-content {
+        border-bottom: none;
+    }
+}

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

@@ -0,0 +1,39 @@
+@layer themes {
+    .j-avatar {
+        --avatar-size: var(--el-height-md);
+        --avatar-border-radius: var(--radius-md);
+        --avatar-box-shadow: var(--shadow-sm);
+    }
+
+    .j-avatar.is-sm {
+        --avatar-size: var(--el-height-2xs);
+    }
+
+    .j-avatar.is-lg {
+        --avatar-size: var(--el-height-lg);
+    }
+
+    .j-avatar.is-round {
+        --avatar-border-radius: 0.5rem;
+    }
+
+    .j-avatar.is-text {
+        --avatar-bg: var(--tone-subtle);
+        --avatar-fg: var(--tone-solid);
+        --avatar-font-weight: var(--font-medium);
+    }
+
+    .j-avatar-group .j-avatar {
+        --avatar-border: 1.5px solid var(--ui-bg)
+    }
+
+    .j-avatar-group .j-avatar:not(:first-child) {
+        margin-inline-start: calc(var(--space) * -3);
+    }
+
+    .j-avatar-group .j-avatar:last-child {
+        --avatar-font-size: var(--font-size-sm);
+        --avatar-bg: var(--ui-bg);
+        --avatar-box-shadow: var(--shadow-sm);
+    }
+}

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

@@ -0,0 +1,63 @@
+@layer themes {
+    .j-badge {
+        --badge-padding: 0 calc(var(--space) * 1.5);
+        --badge-min-width: 1.25rem;
+        --badge-height: 1.25rem;
+        --badge-font-size: var(--font-size-sm);
+        --badge-font-weight: var(--font-medium);
+        --badge-line-height: var(--line-height-self);
+        --badge-radius: 500px;
+        --badge-border-color: var(--ui-border);
+        --badge-fg: var(--ui-fg);
+        --badge-bg: var(--ui-bg);
+        --badge-box-shadow: none;
+    }
+
+    .j-badge.is-sm {
+        --badge-padding: 0 calc(var(--space) * 0.75);
+        --badge-min-width: 1rem;
+        --badge-height: 1rem;
+        --badge-font-size: 0.625rem;
+    }
+
+    .j-badge.is-contrast {
+        --badge-bg: var(--ui-fg);
+        --badge-fg: var(--ui-bg);
+    }
+
+    .j-badge.is-primary {
+        --badge-bg: var(--tone-solid);
+        --badge-fg: var(--tone-fg);
+        --badge-border-color: var(--tone-solid);
+    }
+
+    .j-badge.is-secondary {
+        --badge-bg: var(--tone-soft);
+        --badge-fg: var(--tone-text);
+        --badge-border-color: var(--tone-soft);
+    }
+
+    .j-badge.is-success {
+        --badge-bg: var(--state-success);
+        --badge-fg: var(--state-success-fg);
+        --badge-border-color: var(--state-success);
+    }
+
+    .j-badge.is-warning {
+        --badge-bg: var(--state-warning);
+        --badge-fg: var(--state-warning-fg);
+        --badge-border-color: var(--state-warning);
+    }
+
+    .j-badge.is-danger {
+        --badge-bg: var(--state-danger);
+        --badge-fg: var(--state-danger-fg);
+        --badge-border-color: var(--state-danger);
+    }
+
+    .j-badge.is-error {
+        --badge-border-color: var(--state-danger-subtle);
+        --badge-bg: var(--state-danger-subtle);
+        --badge-fg: var(--state-danger-text);
+    }
+}

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

@@ -0,0 +1,28 @@
+@layer themes {
+    .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);
+    }
+
+    .j-breadcrumb.is-sm {
+        --breadcrumb-font-size: var(--font-size-sm);
+        --breadcrumb-icon-size: var(--font-size-sm);
+    }
+
+    .j-breadcrumb.is-lg {
+        --breadcrumb-font-size: var(--font-size-lg);
+        --breadcrumb-icon-size: var(--font-size-lg);
+    }
+
+    .j-breadcrumb a:hover {
+        --breadcrumb-link-fg: var(--tone-solid);
+    }
+
+    .j-breadcrumb li.is-active a {
+        --breadcrumb-link-fg: var(--ui-fg-muted);
+    }
+}

package/src/css/themes/default/button.css

@@ -0,0 +1,204 @@
+@layer themes {
+    .j-button-group {
+        --btn-group-box-shadow: var(--shadow-sm);
+    }
+
+    .j-button {
+        --btn-gap: var(--space) calc(var(--space) * 1.5);
+        --btn-font-weight: var(--font-medium);
+        --btn-font-size: var(--font-size-md);
+        --btn-height: var(--el-height-md);
+        --btn-line-height: var(--line-height-self);
+        --btn-fg: inherit;
+        --btn-bg: transparent;
+        --btn-padding: 0 var(--s3);
+        --btn-border-width: 1px;
+        --btn-border-style: solid;
+        --btn-border-color: transparent;
+        --btn-border-radius: var(--radius-md);
+        --btn-box-shadow: var(--shadow-sm);
+    }
+
+    .j-button svg {
+        --btn-svg-size: var(--font-size-md);
+    }
+
+    .j-button.is-sm {
+        --btn-font-size: var(--font-size-sm);
+        --btn-height: var(--el-height-sm);
+        --btn-padding: var(--space) var(--s2);
+    }
+
+    .j-button.is-lg {
+        --btn-font-size: var(--font-size-lg);
+        --btn-height: var(--el-height-lg);
+        --btn-padding: var(--s3) var(--s4);
+    }
+
+    .j-button.is-default {
+        --btn-fg: var(--ui-fg);
+        --btn-bg: var(--ui-bg);
+        --btn-border-color: var(--ui-border);
+    }
+
+    .j-button.is-contrast {
+        --btn-fg: var(--ui-bg);
+        --btn-bg: var(--ui-fg);
+    }
+
+    .j-button.is-primary {
+        --btn-fg: var(--tone-fg);
+        --btn-bg: var(--tone-solid);
+    }
+
+    .j-button.is-secondary {
+        --btn-fg: var(--tone-text);
+        --btn-bg: var(--tone-soft);
+        --btn-border-color: transparent;
+    }
+
+    .j-button.is-outline {
+        --btn-bg: transparent;
+        --btn-border-color: var(--tone-solid);
+        --btn-fg: var(--tone-solid);
+    }
+
+    .j-button.is-ghost {
+        --btn-box-shadow: none;
+        transition-property: none;
+    }
+
+    .j-button.is-text {
+        --btn-border-color: transparent;
+        --btn-text-height: auto;
+        --btn-text-padding: 0;
+        --btn-box-shadow: none;
+    }
+
+    .j-button.is-icon {
+        aspect-ratio: var(--aspect-icon, 1);
+        --btn-padding: var(--icon-padding, 0);
+    }
+
+    .j-button.is-danger {
+        --btn-bg: var(--state-danger);
+        --btn-fg: var(--state-danger-fg);
+    }
+
+    .j-button.is-warning {
+        --btn-bg: var(--state-warning);
+        --btn-fg: var(--state-warning-fg);
+    }
+
+    .j-button.is-success {
+        --btn-bg: var(--state-success);
+        --btn-fg: var(--state-success-fg);
+    }
+
+    .j-button.is-error {
+        --btn-bg: var(--state-danger-subtle);
+        --btn-fg: var(--state-danger-text);
+    }
+
+    .j-button[class*='is-surface-'] {
+        --btn-border-color: var(--ui-border);
+        --btn-fg: var(--ui-fg);
+    }
+
+    .j-button.is-surface-sm {
+        --btn-bg: var(--ui-surface-subtle);
+    }
+
+    .j-button.is-surface-md {
+        --btn-bg: var(--ui-surface-muted);
+    }
+
+    .j-button.is-surface-lg {
+        --btn-bg: var(--ui-surface-active);
+    }
+
+    .j-button-group {
+        --btn-padding: 0 var(--s2);
+    }
+
+    /* disabled */
+    .j-button:disabled {
+        opacity: var(--opacity-disabled);
+    }
+
+    /* status */
+    .j-button:not(:disabled) {
+        cursor: pointer;
+    }
+
+    .j-button:not(:disabled):hover {
+        opacity: var(--opacity-hover);
+    }
+
+    .j-button:not(:disabled):active {
+        opacity: var(--opacity-active);
+    }
+
+    .j-button:not(:disabled).is-active {
+        --opacity: var(--opacity-active);
+        --btn-border-color: var(--tone-solid);
+    }
+
+    .j-button:not(:disabled):focus-visible {
+        outline-color: var(--btn-ring, var(--tone-solid));
+    }
+
+    .j-button.is-default:hover:not(:disabled) {
+        --btn-bg: var(--ui-surface-hover);
+    }
+
+    .j-button.is-outline:hover:not(:disabled),
+    .j-button.is-ghost:hover:not(:disabled) {
+        --btn-bg: var(--tone-subtle);
+    }
+
+    .j-button.is-text:not(:disabled):active,
+    .j-button.is-text:not(:disabled):focus-visible,
+    .j-button.is-text:not(:disabled).is-active {
+        outline: none;
+        --btn-fg: var(--tone-solid);
+        text-decoration: underline;
+        text-underline-offset: var(--space);
+    }
+
+    .j-button.is-success:not(:disabled):active,
+    .j-button.is-success:not(:disabled):focus-visible {
+        --btn-ring: var(--state-success);
+    }
+
+    .j-button.is-warning:not(:disabled):active,
+    .j-button.is-warning:not(:disabled):focus-visible {
+        --btn-ring: var(--state-warning);
+    }
+
+    .j-button.is-danger:not(:disabled):active,
+    .j-button.is-danger:not(:disabled):focus-visible {
+        --btn-ring: var(--state-danger);
+    }
+
+    .j-button.is-error:not(:disabled):active,
+    .j-button.is-error:not(:disabled):focus-visible {
+        --btn-ring: var(--state-danger-subtle);
+    }
+
+    .j-button-group .j-button {
+        --btn-box-shadow: none;
+    }
+
+    .j-button-group .j-button:active,
+    .j-button-group .j-button:focus-visible,
+    .j-button-group .j-button:focus-within {
+        outline: 0;
+        opacity: var(--opacity-active);
+        z-index: 1;
+    }
+
+    .j-button-group.is-vertical .j-button:focus-within {
+        z-index: auto
+    }
+}

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

@@ -0,0 +1,11 @@
+@layer themes {
+    .j-drop {
+        --drop-border-width: 1px;
+        --drop-border-style: solid;
+        --drop-border-color: var(--ui-border);
+        --drop-border-radius: var(--radius-md);
+        --drop-fg: var(--ui-fg);
+        --drop-bg: var(--ui-bg);
+        --drop-box-shadow: var(--shadow-sm);
+    }
+}

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

@@ -0,0 +1,16 @@
+@import url('./button.css');
+@import url('./avatar.css');
+@import url('./badge.css');
+@import url('./tag.css');
+@import url('./tip.css');
+@import url('./tabs.css');
+@import url('./popup.css');
+@import url('./toast.css');
+@import url('./modal.css');
+@import url('./offcanvas.css');
+@import url('./accordion.css');
+@import url('./drop.css');
+@import url('./tooltip.css');
+@import url('./swiper.css');
+@import url('./breadcrumb.css');
+@import url('./loading.css');

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

@@ -0,0 +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);
+    }
+
+    .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,
+            conic-gradient(#0000 30%, var(--tone-solid));
+        --loading-loader-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+    }
+}

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

@@ -0,0 +1,40 @@
+@layer themes {
+    .j-modal {
+        --modal-fg: var(--ui-fg);
+        --modal-bg: var(--ui-bg);
+        --modal-border-width: 1px;
+        --modal-border-style: solid;
+        --modal-border-color: var(--ui-border);
+        --modal-border-radius: var(--radius-md);
+        --modal-box-shadow: var(--shadow-md);
+        --modal-min-width: 300px;
+        --modal-max-width: 500px;
+        --modal-max-height: 90vh;
+        --modal-header-gap: var(--space);
+        --modal-header-padding: var(--s4) var(--s4) 0;
+        --modal-header-bottom-border: transparent;
+        --modal-title-font-size: var(--font-size-md);
+        --modal-title-font-weight: var(--font-medium);
+        --modal-body-padding: var(--s4);
+        --modal-body-line-height: var(--line-height-paragraph);
+        --modal-footer-gap: var(--s2);
+        --modal-footer-padding: 0 var(--s4) var(--s4);
+        --modal-footer-top-border: 1px solid transparent;
+    }
+
+    .j-modal:not(.is-fullscreen) .modal-header:has(.modal-close) {
+        --modal-header-padding: var(--s3) var(--s4) 0;
+    }
+
+    .j-modal.is-fullscreen .modal-header {
+        --modal-header-padding: var(--s4);
+    }
+
+    .j-modal.is-fullscreen .modal-body {
+        --modal-body-padding: 0;
+    }
+
+    .j-modal.is-fullscreen .modal-footer {
+        --modal-footer-padding: var(--s4);
+    }
+}

package/src/css/themes/default/offcanvas.css

@@ -0,0 +1,13 @@
+@layer themes {
+  .j-offcanvas-overlay {
+    --offcanvas-overlay-bg: var(--ui-overlay-muted);
+  }
+
+  .j-offcanvas {
+    --offcanvas-bg: var(--ui-bg);
+    --offcanvas-box-shadow: var(--shadow-md);
+    --offcanvas-border: 1px solid var(--ui-border-subtle);
+    --offcanvas-block-width: 300px;
+    --offcanvas-inline-height: 200px;
+  }
+}

package/src/css/themes/default/popup.css

@@ -0,0 +1,7 @@
+@layer themes {
+    .j-popup-layout {
+        --popup-layout-padding: var(--s4);
+        --popup-bg: var(--ui-popup-bg);
+        --popup-backdrop-filter: blur(4px);
+    }
+}

package/src/css/themes/default/swiper.css

@@ -0,0 +1,35 @@
+@layer themes {
+    .j-swiper {
+        --swiper-min-height: 180px;
+        --swiper-title-inset: var(--s3);
+        --swiper-title-padding: calc(var(--space) * 1.5) var(--s2);
+        --swiper-title-color: #fff;
+        --swiper-title-font-size: var(--font-size-lg);
+        --swiper-title-font-weight: var(--font-bold);
+        --swiper-title-bg: rgb(0 0 0 / 35%);
+        --swiper-title-border-radius: var(--radius-sm);
+        --swiper-title-line-height: var(--line-height-heading);
+        --swiper-pagination-gap: 6px;
+        --swiper-pagination-inline: var(--s3);
+        --swiper-pagination-block: var(--s2);
+        --swiper-indicator-size: 8px;
+        --swiper-indicator-bg: rgb(255 255 255 / 62%);
+        --swiper-indicator-hover-bg: rgb(255 255 255 / 86%);
+        --swiper-indicator-active-width: 22px;
+        --swiper-indicator-active-bg: #fff;
+        --swiper-navigation-size: 36px;
+        --swiper-navigation-fg: #fff;
+        --swiper-navigation-bg: rgb(0 0 0 / 35%);
+        --swiper-navigation-hover-bg: rgb(0 0 0 / 65%);
+        --swiper-navigation-offset: var(--s2);
+        --swiper-navigation-icon-size: 18px;
+    }
+
+    @media (max-width: 640px) {
+        .j-swiper {
+            --swiper-title-font-size: var(--font-size-md);
+            --swiper-title-inset: var(--s2);
+            --swiper-navigation-size: 32px;
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+@layer themes {
+    .j-tabs {
+        --tab-list-item-padding: var(--s2) var(--s3);
+        --tab-list-item-margin: 0;
+        --tab-wrap-border: 1px solid var(--ui-border-subtle);
+        --tab-panel-padding: var(--s2) var(--s3);
+        --tab-panel-margin: 0;
+        --tab-panel-item-margin: 0;
+        --tab-panel-item-min-height: 1.25em;
+        --tab-panel-item-content-margin: 0;
+    }
+
+    .j-tabs.is-top .tab-wrap {
+        border-bottom: var(--tab-wrap-border);
+    }
+
+    .j-tabs.is-bottom .tab-wrap {
+        border-top: var(--tab-wrap-border);
+    }
+
+    .j-tabs.is-left .tab-wrap {
+        border-right: var(--tab-wrap-border);
+    }
+
+    .j-tabs.is-right .tab-wrap {
+        border-left: var(--tab-wrap-border);
+    }
+
+    .j-tabs .tab-list .tab-item.is-active {
+        --tab-fg: var(--tone-solid);
+        --tab-font-weight: var(--font-medium);
+    }
+
+    .j-tabs .tab-list .tab-item.is-disabled {
+        --tab-fg: var(--ui-border-strong);
+    }
+}