vanilla-jui 1.7.34 → 1.7.36

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

@@ -1,18 +1,17 @@
 @layer components {
   .j-breadcrumb {
-    --breadcrumb-font-size: var(--font-size-md);
     --breadcrumb-icon-size: var(--font-size-md);
     --breadcrumb-link-fg: var(--tone-text);
 
-    font-size: var(--breadcrumb-font-size);
+    font-size: var(--breadcrumb-font-size, var(--font-size-md));
     color: var(--ui-fg-muted);
 
     white-space: nowrap;
     user-select: none;
   }
 
-  .j-breadcrumb>ol,
-  .j-breadcrumb>ul {
+  .j-breadcrumb > ol,
+  .j-breadcrumb > ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -21,26 +20,26 @@
     padding: 0;
   }
 
-  .j-breadcrumb>ol li,
-  .j-breadcrumb>ul li {
+  .j-breadcrumb > ol li,
+  .j-breadcrumb > ul li {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .j-breadcrumb li+li::before {
+  .j-breadcrumb li + li::before {
     content: '/';
   }
 
-  .j-breadcrumb.is-dot li+li::before {
+  .j-breadcrumb.is-dot li + li::before {
     content: '•';
   }
 
-  .j-breadcrumb.is-arrow li+li::before {
+  .j-breadcrumb.is-arrow li + li::before {
     content: '>';
   }
 
-  .j-breadcrumb.is-dash li+li::before {
+  .j-breadcrumb.is-dash li + li::before {
     content: '–';
   }
 
@@ -80,7 +79,7 @@
     justify-content: center;
   }
 
-  .j-breadcrumb li+li::before {
+  .j-breadcrumb li + li::before {
     color: var(--ui-fg-soft);
   }
 
@@ -104,4 +103,4 @@
   .j-breadcrumb.is-right ol {
     justify-content: flex-end;
   }
-}
+}

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

@@ -1,24 +1,16 @@
 @layer components {
   .j-btn {
     --btn-font-size: var(--font-size-md);
-    --btn-fg: inherit;
-    --btn-padding: 0 12px;
-    --btn-border-color: transparent;
-    --btn-radius: var(--radius-md);
-    --btn-box-shadow: var(--shadow-xs);
-
     gap: 4px;
     font-size: var(--btn-font-size);
     height: var(--btn-height, var(--el-height));
     line-height: 1;
-    color: var(--btn-fg);
+    color: var(--btn-fg, inherit);
     background-color: var(--btn-bg);
-    padding: var(--btn-padding);
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--btn-border-color);
-    border-radius: var(--btn-radius);
-    box-shadow: var(--btn-box-shadow);
+    padding: var(--btn-padding, 0 12px);
+    border: 1px solid var(--btn-border-color, transparent);
+    border-radius: var(--btn-radius, var(--radius-md));
+    box-shadow: var(--btn-box-shadow, var(--shadow-xs));
     outline: none;
     backdrop-filter: blur(4px);
 
@@ -33,7 +25,7 @@
     touch-action: manipulation;
     transition-property: box-shadow, opacity, transform;
     transition-duration: 0.15s;
-    transition-timing-function: var(--bezier);
+    transition-timing-function: ease;
   }
 
   .j-btn svg {
@@ -274,4 +266,4 @@
   .j-btns.is-vertical .j-btn:last-child {
     border-bottom-left-radius: var(--btn-radius);
   }
-}
+}

package/src/css/themes/default/captcha.css

@@ -1,125 +1,123 @@
 /* cap captcha */
 .j-cap-field {
-    position: relative;
-    width: 100%;
-    min-width: 0;
-    height: 56px;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  height: 56px;
 }
 
 .j-cap-field .cap-control {
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    height: 100%;
-    padding: 8px 12px;
-    border: 1px solid var(--ui-border);
-    border-radius: 6px;
-    background: var(--ui-bg);
-    color: var(--ui-fg);
-    font: inherit;
-    font-size: var(--font-size-md);
-    line-height: 18px;
-    text-align: start;
-    cursor: pointer;
-    transition:
-        background-color 150ms,
-        border-color 150ms;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 100%;
+  padding: 8px 12px;
+  border: var(--border);
+  border-radius: 6px;
+  background: var(--ui-bg);
+  color: var(--ui-fg);
+  font: inherit;
+  font-size: var(--font-size-md);
+  line-height: 18px;
+  text-align: start;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .j-cap-field .cap-control[data-state='idle']:hover {
-    border-color: var(--tone-border-strong);
-    background: var(--tone-soft);
+  border-color: var(--tone-border-strong);
+  background: var(--tone-soft);
 }
 
 .j-cap-field .cap-control:focus-visible {
-    outline: 2px solid var(--tone-solid);
-    outline-offset: 2px;
+  outline: 2px solid var(--tone-solid);
+  outline-offset: 2px;
 }
 
 .j-cap-field .cap-control[data-state='loading'],
 .j-cap-field .cap-control[data-state='verifying'] {
-    cursor: wait;
+  cursor: wait;
 }
 
 .j-cap-field .cap-control[data-state='verified'] {
-    border-color: var(--state-success-border);
-    background: var(--state-success-subtle);
-    color: var(--state-success-text);
-    cursor: default;
+  border-color: var(--state-success-border);
+  background: var(--state-success-subtle);
+  color: var(--state-success-text);
+  cursor: default;
 }
 
 .j-cap-field .cap-control[data-state='error'],
 .j-cap-field .cap-control[data-state='rate-limited'] {
-    border-color: var(--state-error-border);
-    color: var(--state-error-text);
+  border-color: var(--state-error-border);
+  color: var(--state-error-text);
 }
 
 .j-cap-field .cap-control-icon,
-.j-cap-field .cap-control-icon>svg,
+.j-cap-field .cap-control-icon > svg,
 .j-cap-field .cap-control-box {
-    display: block;
-    width: 20px;
-    height: 20px;
+  display: block;
+  width: 20px;
+  height: 20px;
 }
 
 .j-cap-field .cap-control-icon {
-    flex: 0 0 20px;
-    color: var(--tone-text);
+  flex: 0 0 20px;
+  color: var(--tone-text);
 }
 
 .j-cap-field .cap-control[data-state='verified'] .cap-control-icon,
 .j-cap-field .cap-control[data-state='error'] .cap-control-icon,
 .j-cap-field .cap-control[data-state='rate-limited'] .cap-control-icon {
-    color: inherit;
+  color: inherit;
 }
 
 .j-cap-field .cap-control-box {
-    border: 1.5px solid var(--ui-border);
-    border-radius: 4px;
+  border: 1.5px solid var(--ui-border);
+  border-radius: 4px;
 }
 
 .j-cap-field .cap-control-label {
-    flex: 1 1 0;
-    min-width: 0;
-    overflow-wrap: anywhere;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .j-cap-field .cap-control-percent {
-    flex: 0 0 4ch;
-    white-space: nowrap;
-    color: var(--tone-caption);
-    font-size: 12px;
-    font-variant-numeric: tabular-nums;
-    text-align: end;
+  flex: 0 0 4ch;
+  white-space: nowrap;
+  color: var(--tone-caption);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
 }
 
 .j-cap-field .cap-progress {
-    position: absolute;
-    inset: auto 1px 1px;
-    height: 2px;
-    overflow: hidden;
-    border-radius: 0 0 5px 5px;
-    pointer-events: none;
+  position: absolute;
+  inset: auto 1px 1px;
+  height: 2px;
+  overflow: hidden;
+  border-radius: 0 0 5px 5px;
+  pointer-events: none;
 }
 
-.j-cap-field .cap-progress>span {
-    display: block;
-    height: 100%;
-    background: var(--tone-solid);
+.j-cap-field .cap-progress > span {
+  display: block;
+  height: 100%;
+  background: var(--tone-solid);
 }
 
 .j-cap-field .cap-spinner {
-    animation: animate-spin 800ms linear infinite;
+  animation: animate-spin 800ms linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .j-cap-field .cap-control {
-        transition: none;
-    }
-
-    .j-cap-field .cap-spinner {
-        animation: none;
-    }
-}
+  .j-cap-field .cap-control {
+    transition: none;
+  }
+
+  .j-cap-field .cap-spinner {
+    animation: none;
+  }
+}

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

@@ -1,6 +1,6 @@
 @layer components {
   .drop-container {
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-sm);
     background: var(--ui-bg);
     color: var(--ui-fg);

package/src/css/themes/default/editor.css

@@ -142,7 +142,7 @@
     margin: var(--editor-p-space) 0;
   }
 
-  .j-editor>div {
+  .j-editor > div {
     margin: var(--editor-block-space) 0;
   }
 
@@ -342,7 +342,7 @@
     display: flex;
   }
 
-  .j-editor ul[data-type='taskList'] li>label {
+  .j-editor ul[data-type='taskList'] li > label {
     flex: none;
     user-select: none;
   }
@@ -356,7 +356,7 @@
   }
 
   .j-editor input[type='checkbox'] {
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--checkbox-radius, var(--radius-sm));
     background: var(--ui-bg);
     clear: none;
@@ -366,7 +366,7 @@
     height: 1rem;
     margin: 0;
     appearance: none;
-    transition: all 0.05s ease-in-out;
+    transition: all 0.2s ease;
   }
 
   .j-editor:not(:has(.j-checkbox)) input[type='checkbox']:checked {
@@ -394,11 +394,11 @@
     color: var(--tone-subtitle);
   }
 
-  .j-editor blockquote>* {
+  .j-editor blockquote > * {
     margin: 0;
   }
 
-  .j-editor blockquote>*+* {
+  .j-editor blockquote > * + * {
     margin-top: 4px;
   }
 
@@ -427,8 +427,8 @@
     border: 1px solid var(--editor-border-subtle);
     border-radius: var(--radius-sm);
     word-break: break-word;
-    background: var(--tone-code-bg);
-    color: var(--tone-code-fg);
+    background: var(--ui-code-bg);
+    color: var(--ui-code-fg);
   }
 
   .j-editor code:not([class*='language-']) {
@@ -506,7 +506,7 @@
     scrollbar-color: var(--ui-border) transparent;
   }
 
-  pre .code-header+code[class*='language-'] {
+  pre .code-header + code[class*='language-'] {
     padding: 0.5rem 1rem 0.75rem;
   }
 
@@ -722,22 +722,22 @@
     transition: transform 0.2s ease;
   }
 
-  .j-editor details[open]>summary::before {
+  .j-editor details[open] > summary::before {
     transform: rotate(90deg);
   }
 
   .j-editor details[open] p,
   .j-editor details[open] ul,
   .j-editor details[open] ol,
-  .j-editor details[open]>* {
+  .j-editor details[open] > * {
     margin-bottom: 1em;
   }
 
-  .j-editor details[open]>summary+* {
+  .j-editor details[open] > summary + * {
     margin-top: 0;
   }
 
-  .j-editor details[open]>*:last-child {
+  .j-editor details[open] > *:last-child {
     margin-bottom: 0;
   }
 
@@ -791,11 +791,11 @@
   /* ============================================
     Block Item - 通用块级元素
   ============================================ */
-  .j-editor>*:first-child {
+  .j-editor > *:first-child {
     margin-top: 0;
   }
 
-  .j-editor>*:last-child {
+  .j-editor > *:last-child {
     margin-bottom: 0;
   }
 
@@ -854,4 +854,4 @@
   .mobile .j-editor p {
     --editor-block-space: 1.5rem;
   }
-}
+}

package/src/css/themes/default/flow.css

@@ -1,18 +1,13 @@
 @layer components {
-  .j-flow {
-    --flow-gap: 8px;
-    --flow-step-size: 28px;
-  }
-
   .j-flow,
   .j-flow .flow-header {
     display: grid;
-    gap: var(--flow-gap);
+    gap: 8px;
   }
 
   .j-flow .flow-steps {
     display: flex;
-    gap: var(--flow-gap);
+    gap: 16px;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -44,8 +39,8 @@
     border-radius: 999px;
     display: inline-flex;
     justify-content: center;
-    height: var(--flow-step-size);
-    min-width: var(--flow-step-size);
+    height: 28px;
+    min-width: 28px;
   }
 
   .j-flow .flow-step.is-active .flow-step-button {
@@ -63,11 +58,9 @@
   }
 
   .j-flow .flow-footer {
-    border-top: 1px solid var(--ui-border-subtle);
     display: flex;
-    gap: 4px;
+    gap: 8px;
     justify-content: flex-end;
-    padding-top: var(--flow-gap);
     position: relative;
   }
-}
+}