vanilla-jui 1.7.31 → 1.7.33

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

@@ -1,17 +1,15 @@
 @layer components {
-  .j-button {
+  .j-btn {
     --btn-font-size: var(--font-size-md);
-    --btn-height: var(--el-height-md);
     --btn-fg: inherit;
-    --btn-bg: transparent;
-    --btn-padding: 0 var(--s3);
+    --btn-padding: 0 12px;
     --btn-border-color: transparent;
     --btn-radius: var(--radius-md);
     --btn-box-shadow: var(--shadow-xs);
 
-    gap: var(--space);
+    gap: 4px;
     font-size: var(--btn-font-size);
-    height: var(--btn-height);
+    height: var(--btn-height, var(--el-height));
     line-height: 1;
     color: var(--btn-fg);
     background-color: var(--btn-bg);
@@ -24,146 +22,122 @@
     outline: none;
     backdrop-filter: blur(4px);
 
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    position: relative;
     white-space: nowrap;
     appearance: button;
     user-select: none;
     touch-action: manipulation;
+    transition-property: box-shadow, opacity, transform;
+    transition-duration: 0.15s;
+    transition-timing-function: var(--bezier);
   }
 
-  .j-button .button-content {
-    display: contents;
-    position: relative;
-  }
-
-  .j-button svg {
+  .j-btn svg {
     width: var(--btn-font-size);
     fill: currentColor;
   }
 
-  .j-button a,
-  .j-button a:hover {
+  .j-btn a,
+  .j-btn a:hover {
     color: inherit;
   }
 
-  .j-button.is-xs {
+  .j-btn.is-xs {
     --btn-font-size: var(--font-size-sm);
-    --btn-height: var(--el-height-xs);
-    --btn-padding: var(--space) var(--s2);
+    --btn-padding: 0 8px;
   }
 
-  .j-button.is-sm {
+  .j-btn.is-sm {
     --btn-font-size: var(--font-size-sm);
-    --btn-height: var(--el-height-sm);
-    --btn-padding: var(--space) var(--s2);
+    --btn-padding: 0 8px;
   }
 
-  .j-button.is-lg {
+  .j-btn.is-lg {
     --btn-font-size: var(--font-size-lg);
-    --btn-height: var(--el-height-lg);
-    --btn-padding: 0 var(--s3);
+    --btn-padding: 0 12px;
   }
 
-  .j-button.is-xl {
+  .j-btn.is-xl {
     --btn-font-size: var(--font-size-xl);
-    --btn-height: var(--el-height-xl);
-    --btn-padding: 0 var(--s4);
+    --btn-padding: 0 14px;
   }
 
-  .j-button.is-default {
+  .j-btn.is-default {
     --btn-fg: var(--ui-fg);
     --btn-bg: var(--ui-bg);
     --btn-border-color: var(--ui-border);
   }
 
-  .j-button.is-reverse {
+  .j-btn.is-reverse {
     --btn-fg: var(--ui-bg);
     --btn-bg: var(--ui-fg);
     --btn-border-color: var(--ui-fg);
   }
 
-  .j-button.is-solid {
+  .j-btn.is-solid {
     --btn-fg: var(--tone-fg);
     --btn-bg: var(--tone-solid);
     --btn-border-color: var(--tone-solid);
   }
 
-  .j-button.is-soft {
+  .j-btn.is-soft {
     --btn-fg: var(--tone-text);
     --btn-bg: var(--tone-soft);
-    --btn-border-color: transparent;
+    --btn-border-color: var(--tone-soft);
   }
 
-  .j-button.is-wash {
+  .j-btn.is-wash {
     --btn-fg: var(--tone-text);
     --btn-bg: var(--tone-wash);
     --btn-border-color: var(--tone-wash);
   }
 
-  .j-button.is-outline {
-    --btn-bg: var(--tone-card);
+  .j-btn.is-outline {
+    --btn-bg: var(--ui-bg);
     --btn-border-color: var(--tone-solid);
     --btn-fg: var(--tone-solid);
   }
 
-  .j-button.is-ghost {
+  .j-btn.is-ghost {
     --btn-box-shadow: none;
-    transition-property: none;
   }
 
-  .j-button.is-text {
-    --btn-border-color: transparent;
+  .j-btn.is-text {
     --btn-box-shadow: none;
+    --btn-padding: 0 4px;
   }
 
-  .j-button.is-icon {
+  .j-btn.is-icon {
     aspect-ratio: 1/1;
-    --btn-padding: var(--icon-padding, 0);
+    --btn-padding: 0;
   }
 
-  .j-button.is-info {
-    --btn-bg: var(--state-info-soft);
+  .j-btn.is-info {
     --btn-fg: var(--state-info-text);
+    --btn-bg: var(--state-info-soft);
   }
 
-  .j-button.is-success {
-    --btn-bg: var(--state-success-soft);
+  .j-btn.is-success {
     --btn-fg: var(--state-success-text);
+    --btn-bg: var(--state-success-soft);
   }
 
-  .j-button.is-error {
-    --btn-bg: var(--state-error-soft);
+  .j-btn.is-error {
     --btn-fg: var(--state-error-text);
+    --btn-bg: var(--state-error-soft);
   }
 
-  .j-button.is-warning {
-    --btn-bg: var(--state-warning-soft);
+  .j-btn.is-warning {
     --btn-fg: var(--state-warning-text);
+    --btn-bg: var(--state-warning-soft);
   }
 
-  .j-button[class*='ui-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);
+  .j-btns {
+    --btn-padding: 0 8px;
     --btn-radius: var(--radius-md);
 
     margin: 0;
@@ -171,184 +145,133 @@
     border-radius: var(--btn-radius);
 
     display: flex;
+    flex-direction: var(--flex-direction);
   }
 
   /* status */
-  .j-button:disabled {
+  .j-btn:disabled {
     opacity: var(--opacity-disabled);
   }
 
-  .j-button:not(:disabled) {
+  .j-btn:not(:disabled) {
     cursor: pointer;
   }
 
-  .j-button:not(:disabled):hover {
+  .j-btn:not(:disabled):hover {
     opacity: var(--opacity-hover);
   }
 
-  .j-button:not(:disabled):active {
-    opacity: var(--opacity-active);
+  .j-btn:not(:disabled):active {
+    transform: translateY(1px);
   }
 
-  .j-button:not(:disabled).is-active {
+  .j-btn:not(:disabled).is-active {
     --btn-border-color: var(--tone-solid);
   }
 
-  .j-button:not(:disabled):focus,
-  .j-button:not(:disabled):focus-within,
-  .j-button:not(:disabled):focus-visible {
+  .j-btn:not(:disabled):focus-visible {
     --btn-border-color: var(--tone-solid);
     --btn-box-shadow: 0 0 0 3px var(--tone-ring);
   }
 
-  .j-button.is-default:not(:disabled):focus,
-  .j-button.is-default:not(:disabled):focus-within,
-  .j-button.is-default:not(:disabled):focus-visible {
-    --btn-border-color: var(--ui-fg-muted);
-    --btn-box-shadow: 0 0 0 3px var(--tone-card-active);
-  }
-
-  .j-button.is-reverse:not(:disabled).is-active,
-  .j-button.is-reverse:not(:disabled):focus,
-  .j-button.is-reverse:not(:disabled):focus-within,
-  .j-button.is-reverse:not(:disabled):focus-visible {
+  .j-btn.is-reverse:not(:disabled).is-active,
+  .j-btn.is-reverse:not(:disabled):focus-visible {
     --btn-border-color: transparent;
     --btn-box-shadow: 0 0 0 3px var(--tone-card-active);
   }
 
-  .j-button.is-solid:not(:disabled).is-active,
-  .j-button.is-solid:not(:disabled):focus,
-  .j-button.is-solid:not(:disabled):focus-within,
-  .j-button.is-solid:not(:disabled):focus-visible {
-    --btn-border-color: transparent;
+  .j-btn.is-info:not(:disabled).is-active {
+    --btn-border-color: var(--state-info-muted);
   }
 
-  .j-button.is-info:not(:disabled).is-active,
-  .j-button.is-info:not(:disabled):focus,
-  .j-button.is-info:not(:disabled):focus-within,
-  .j-button.is-info:not(:disabled):focus-visible {
+  .j-btn.is-info:not(:disabled):focus-visible {
     --btn-border-color: var(--state-info);
     --btn-box-shadow: 0 0 0 3px var(--state-info-ring);
   }
 
-  .j-button.is-success:not(:disabled).is-active,
-  .j-button.is-success:not(:disabled):focus,
-  .j-button.is-success:not(:disabled):focus-within,
-  .j-button.is-success:not(:disabled):focus-visible {
+  .j-btn.is-success:not(:disabled).is-active {
+    --btn-border-color: var(--state-success-muted);
+  }
+
+  .j-btn.is-success:not(:disabled):focus-visible {
     --btn-border-color: var(--state-success);
     --btn-box-shadow: 0 0 0 3px var(--state-success-ring);
   }
 
-  .j-button.is-warning:not(:disabled).is-active,
-  .j-button.is-warning:not(:disabled):focus,
-  .j-button.is-warning:not(:disabled):focus-within,
-  .j-button.is-warning:not(:disabled):focus-visible {
-    --btn-border-color: var(--state-warning);
-    --btn-box-shadow: 0 0 0 3px var(--state-warning-ring);
+  .j-btn.is-warning:not(:disabled).is-active {
+    --btn-border-color: var(--state-warning-muted);
   }
 
-  .j-button.is-error:not(:disabled).is-active,
-  .j-button.is-error:not(:disabled):focus,
-  .j-button.is-error:not(:disabled):focus-within,
-  .j-button.is-error:not(:disabled):focus-visible {
-    --btn-border-color: var(--state-error);
-    --btn-box-shadow: 0 0 0 3px var(--state-error-muted);
+  .j-btn.is-warning:not(:disabled):focus-visible {
+    --btn-border-color: var(--state-warning);
+    --btn-box-shadow: 0 0 0 3px var(--state-warning-ring);
   }
 
-  .j-button.is-default:hover:not(:disabled) {
-    --btn-bg: var(--ui-surface-hover);
+  .j-btn.is-error:not(:disabled).is-active {
+    --btn-border-color: var(--state-error-muted);
   }
 
-  .j-button.is-outline:hover:not(:disabled),
-  .j-button.is-ghost:hover:not(:disabled) {
-    --btn-bg: var(--tone-subtle);
+  .j-btn.is-error:not(:disabled):focus-visible {
+    --btn-border-color: var(--state-error);
+    --btn-box-shadow: 0 0 0 3px var(--state-error-ring);
   }
 
-  .j-button.is-text:not(:disabled).is-active,
-  .j-button.is-text:not(:disabled):active,
-  .j-button.is-text:not(:disabled):focus,
-  .j-button.is-text:not(:disabled):focus-within,
-  .j-button.is-text:not(:disabled):focus-visible {
+  .j-btn.is-text:not(:disabled).is-active,
+  .j-btn.is-text:not(:disabled):active,
+  .j-btn.is-text:not(:disabled):focus-visible {
     --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-error:not(:disabled):active,
-  .j-button.is-error:not(:disabled):focus-visible {
-    --btn-ring: var(--state-error);
-  }
-
-  .j-button-group .j-button {
+  .j-btns .j-btn {
     --btn-box-shadow: none;
   }
 
-  .j-button-group .j-button:active,
-  .j-button-group .j-button:focus,
-  .j-button-group .j-button:focus-visible,
-  .j-button-group .j-button:focus-within {
-    /* opacity: var(--opacity-active); */
+  .j-btns .j-btn:active,
+  .j-btns .j-btn:focus-within,
+  .j-btns .j-btn:focus-visible {
     z-index: 1;
   }
 
-  .j-button-group .j-button:not(:first-child) {
+  .j-btns .j-btn:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .j-button-group .j-button:not(:last-child) {
+  .j-btns .j-btn:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .j-button-group .j-button:not(:first-child):not(:last-child) {
+  .j-btns .j-btn:not(:first-child):not(:last-child) {
     border-top-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 0;
     border-right-width: 0;
   }
 
-  .j-button-group.is-vertical {
-    flex-direction: column;
-  }
-
-  .j-button-group.is-vertical .j-button:not(:last-child) {
+  .j-btns.is-vertical .j-btn:not(:last-child) {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .j-button-group.is-vertical .j-button:not(:first-child) {
+  .j-btns.is-vertical .j-btn:not(:first-child) {
     margin-left: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
-  .j-button-group.is-vertical .j-button:not(:last-child):not(:first-child) {
+  .j-btns.is-vertical .j-btn:not(:last-child):not(:first-child) {
     border-left-width: 1px;
     border-right-width: 1px;
     border-top-width: 0;
     border-bottom-width: 0;
   }
 
-  .j-button-group.is-vertical .j-button:first-child {
+  .j-btns.is-vertical .j-btn:first-child {
     border-top-right-radius: var(--btn-radius);
   }
 
-  .j-button-group.is-vertical .j-button:last-child {
+  .j-btns.is-vertical .j-btn:last-child {
     border-bottom-left-radius: var(--btn-radius);
   }
-
-  .j-button-group.is-vertical .j-button:focus-within {
-    z-index: auto;
-  }
 }

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

@@ -21,7 +21,8 @@
   .j-editor {
     --editor-font-size: var(--font-size-lg);
     --editor-line-height: 1.75;
-    --editor-block-space: 1.25rem;
+    --editor-p-space: 1.25rem;
+    --editor-block-space: 1.75rem;
 
     --editor-heading-fg: var(--tone-heading);
     --editor-caption-fg: var(--tone-caption);
@@ -80,7 +81,7 @@
     position: relative;
     font-weight: 600;
     color: var(--editor-heading-fg);
-    margin-bottom: var(--editor-block-space);
+    margin-bottom: var(--editor-p-space);
   }
 
   .j-editor h2,
@@ -90,40 +91,55 @@
   }
 
   .j-editor h1 {
-    font-size: 2em;
+    /* font-size: 2em; */
+    /* font-size: 2.5em; */
+    font-size: 2.25em;
     letter-spacing: -0.02em;
     line-height: 1.25;
     margin: 0;
   }
 
   .j-editor h2 {
-    font-size: 1.5em;
+    /* font-size: 1.5em; */
+    /* font-size: 2em; */
+    font-size: 1.75em;
     letter-spacing: -0.02em;
-    margin-top: 2.25rem;
+    /* margin-top: 2.5rem; */
+    margin-top: 3rem;
   }
 
   .j-editor h3 {
+    /* font-size: 1.25em; */
+    font-size: 1.5em;
+    letter-spacing: -0.01em;
+    /* margin-top: 2.25rem; */
+    margin-top: 2.5rem;
+  }
+
+  .j-editor h4 {
+    /* font-size: 1.125em; */
     font-size: 1.25em;
     letter-spacing: -0.01em;
     margin-top: 2rem;
   }
 
-  .j-editor h4 {
+  .j-editor h5 {
     font-size: 1.125em;
-    letter-spacing: -0.01em;
-    margin-top: 1.75rem;
   }
 
-  .j-editor h5,
   .j-editor h6 {
     font-size: 1em;
-    margin-top: 1.5rem;
+  }
+
+  .j-editor h5,
+  .j-editor h6 {
+    margin-top: 1.75rem;
     line-height: 1.4;
   }
 
   .j-editor p {
     line-height: var(--editor-line-height);
-    margin: var(--editor-block-space) 0;
+    margin: var(--editor-p-space) 0;
   }
 
   .j-editor>div {
@@ -240,7 +256,7 @@
 
   .j-editor ul li,
   .j-editor ol li {
-    margin-bottom: 10px;
+    margin-bottom: 8px;
     padding-left: 2px;
   }
 
@@ -287,7 +303,6 @@
 
   /* Definition List */
   .j-editor dl {
-    /* margin-block: var(--editor-block-space); */
     margin: var(--editor-block-space) 0;
   }
 
@@ -342,7 +357,7 @@
 
   .j-editor input[type='checkbox'] {
     border: 1px solid var(--ui-border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--checkbox-radius, var(--radius-sm));
     background: var(--ui-bg);
     clear: none;
     cursor: pointer;
@@ -354,22 +369,11 @@
     transition: all 0.05s ease-in-out;
   }
 
-  .j-editor input[type='checkbox']:checked {
-    background: var(--tone-solid);
-    border-color: var(--tone-solid);
-  }
-
-  .dark .j-editor input[type='checkbox']:checked {
-    background: var(--tone-shade);
-    border-color: var(--tone-shade);
-  }
-
-  .j-editor input[type='checkbox']:checked:before {
-    content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E');
-    display: inline-block;
-    margin: -0.1875rem 0 0 -0.25rem;
-    width: 1.3125rem;
-    height: 1.3125rem;
+  .j-editor:not(:has(.j-checkbox)) input[type='checkbox']:checked {
+    border-color: transparent;
+    background-color: var(--tone-solid);
+    background-image: var(--svg-check);
+    background-position: center;
   }
 
   .j-editor ul[data-type='taskList'] li:has(input[type='checkbox']:checked) p {
@@ -391,19 +395,16 @@
   }
 
   .j-editor blockquote>* {
-    /* margin-block: 0; */
     margin: 0;
   }
 
   .j-editor blockquote>*+* {
-    margin-top: 0.25rem;
+    margin-top: 4px;
   }
 
   .j-editor cite {
     display: block;
-    /* margin-block: 0.25rem; */
-    margin: 0.25rem 0;
-    font-style: normal;
+    margin: 4px 0;
     font-size: 0.875em;
     color: var(--editor-caption-fg);
   }
@@ -800,7 +801,6 @@
 
   .j-editor table,
   .j-editor .block {
-    /* margin-block: var(--editor-block-space); */
     margin: var(--editor-block-space) 0;
   }
 

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

@@ -1,6 +1,6 @@
 @layer components {
   .j-flow {
-    --flow-gap: var(--s2);
+    --flow-gap: 8px;
     --flow-step-size: 28px;
   }
 
@@ -25,7 +25,7 @@
   .j-flow .flow-step-button {
     display: inline-flex;
     align-items: center;
-    gap: var(--space);
+    gap: 4px;
     border: 0;
     background: transparent;
     color: var(--ui-fg-muted);
@@ -65,9 +65,9 @@
   .j-flow .flow-footer {
     border-top: 1px solid var(--ui-border-subtle);
     display: flex;
-    gap: var(--space);
+    gap: 4px;
     justify-content: flex-end;
     padding-top: var(--flow-gap);
     position: relative;
   }
-}
+}