vanilla-jui 1.4.0 → 1.4.2

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[aria-expanded="true"] {
+        border-color: transparent;
+    }
+
+    .j-accordion .accordion-header[aria-expanded="true"] .header-title {
+        --accordion-font-weight: var(--font-bold);
+    }
+
+    .j-accordion .accordion-header[aria-expanded="false"]:hover {
+        --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[aria-expanded="true"] .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,55 @@
+@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-2xs {
+        --avatar-size: var(--el-height-2xs);
+    }
+
+    .j-avatar.is-xs {
+        --avatar-size: var(--el-height-xs);
+    }
+
+    .j-avatar.is-sm {
+        --avatar-size: var(--el-height-sm);
+    }
+
+    .j-avatar.is-lg {
+        --avatar-size: var(--el-height-lg);
+    }
+
+    .j-avatar.is-xl {
+        --avatar-size: var(--el-height-xl);
+    }
+
+    .j-avatar.is-2xl {
+        --avatar-size: var(--el-height-2xl);
+    }
+
+    .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/content.css

@@ -0,0 +1,59 @@
+@layer themes {
+    .j-content {
+        --content-outline: 0;
+        --content-font-size: var(--font-size-lg);
+        --content-line-height: 1.75;
+        --content-letter-space: 0.01em;
+        --content-word-space: 0.02em;
+        --content-paragraph-space: 1.25em;
+        --content-heading-space: 1.5em;
+        --content-block-space: 1.5em;
+        --content-list-space: 0.5em;
+
+        --content-heading-fg: var(--tone-heading);
+        --content-caption-fg: var(--tone-caption);
+        --content-ring: var(--tone-ring);
+        --content-border-tone: var(--tone-border);
+        --content-border-subtle: var(--ui-border-subtle);
+        --content-blockquote-bg: var(--tone-wash);
+        --content-blockquote-fg: var(--tone-subtitle);
+        --content-link: var(--tone-link);
+        --content-link-hover: var(--tone-link-hover);
+        --content-link-visited: var(--tone-link-visited);
+        --content-link-active: var(--tone-link-active);
+        --content-border: var(--ui-border);
+        --content-code-bg: var(--tone-code-bg);
+        --content-code-fg: var(--tone-code-fg);
+        --content-bg-subtle: var(--ui-bg-subtle);
+    }
+
+    .j-content.is-sm {
+        --content-font-size: var(--font-size-md);
+        --content-line-height: 1.65;
+        --content-paragraph-space: 1em;
+        --content-heading-space: 1.25em;
+        --content-block-space: 1.25em;
+    }
+
+    .j-content.is-lg {
+        --content-font-size: var(--font-size-xl);
+        --content-line-height: 1.8;
+        --content-paragraph-space: 1.5em;
+        --content-heading-space: 1.75em;
+        --content-block-space: 1.75em;
+    }
+
+    .j-content.is-xl {
+        --content-font-size: var(--font-size-2xl);
+        --content-line-height: 1.85;
+        --content-paragraph-space: 1.75em;
+        --content-heading-space: 2em;
+        --content-block-space: 2em;
+    }
+
+    .j-radius-round .j-content {
+        --radius-sm: .75rem;
+        --radius-md: 1rem;
+        --radius-lg: 1.5rem;
+    }
+}

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/editor.css

@@ -0,0 +1,10 @@
+@layer themes {
+    #j-editor {
+        --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);
+    }
+}

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

@@ -0,0 +1,23 @@
+@import url('./content.css');
+@import url('./toolbar.css');
+@import url('./editor.css');
+@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');
+@import url('./theme-palette.css');
+@import url('./table.css');
+@import url('./pagination.css');
+@import url('./menu.css');

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

@@ -0,0 +1,23 @@
+@layer themes {
+    .j-loader {
+        --loader-position: absolute;
+        --loader-size: var(--font-size-md);
+        --loader-width: 1.5px;
+        --loader-style: solid;
+        --loader-fg: currentcolor;
+        --loader-speed: var(--speed-xl);
+    }
+
+    .j-loader .tone-loader {
+        --loader-width: 2px;
+        --loader-fg: var(--tone-soft);
+        --loader-top-fg: var(--tone-solid);
+    }
+
+    .j-loader .flow-loader {
+        --loader-width: 2px;
+        --loader-bg: radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/var(--loader-width) var(--loader-width) no-repeat,
+            conic-gradient(#0000 30%, var(--tone-solid));
+        --loader-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loader-width)), #000 0);
+    }
+}

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

@@ -0,0 +1,15 @@
+@layer themes {
+    .j-menu {
+        --menu-font-size: var(--font-size-md);
+        --menu-font-weight: var(--font-normal);
+
+        --menu-item-padding: 0.5rem 1rem;
+        --menu-item-height: var(--el-height-md);
+        --menu-item-line-height: var(--line-height);
+
+        --menu-link-font-weight: var(--font-medium);
+        --menu-link-gap: var(--space);
+
+        --menu-item-icon-size: var(--font-size-lg);
+    }
+}

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/pagination.css

@@ -0,0 +1,8 @@
+@layer themes {
+    .j-pagination {
+        --pagination-font-size: var(--font-size-md);
+        --pagination-link-fg: var(--ui-fg);
+        --pagination-link-decoration: none;
+        --pagination-gap: var(--space);
+    }
+}

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/table.css

@@ -0,0 +1,18 @@
+@layer themes {
+    .j-table-container {
+        --table-container-max-width: 100%;
+    }
+
+    .j-table {
+        --table-selected-bg: var(--tone-soft);
+        --table-border-width: 0 0 1px;
+        --table-border-style: solid;
+        --table-border-color: var(--ui-border);
+        --table-cell-padding: 0.5em 0.75em;
+        --table-cell-text-align: left;
+        --table-link-fg: var(--tone-solid);
+        --table-striped-bg: var(--tone-soft);
+        --table-hover-bg: var(--tone-soft);
+        --table-bordered-width: 1px;
+    }
+}