vanilla-jui 1.4.0 → 1.4.2

package/src/css/accordion.css

@@ -1,72 +1,27 @@
 @layer components {
-  .j-accordion {
-    --accordion-border: 1px solid var(--ui-border-subtle);
-    --accordion-icon-size: var(--font-size-lg);
-  }
-
   .j-accordion .accordion-header {
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: var(--accordion-header-padding,
-        var(--s2) var(--s3));
-    margin: var(--accordion-header-margin, 0);
-    border-bottom: var(--accordion-border);
-    font-size: var(--accordion-header-font-size, var(--font-size-md));
-    font-weight: var(--font-medium);
     user-select: none;
   }
 
-  .j-accordion .accordion-header:hover:not(.is-active) {
-    background: var(--accordion-header-hover-background, var(--ui-surface-hover));
-  }
-
-  .j-accordion .accordion-header.is-active {
-    border-color: transparent;
-  }
-
   .j-accordion .accordion-header .header-title {
     flex: 1;
     text-align: left;
-    font-size: var(--accordion-title-font-size, var(--font-size-md));
-  }
-
-  .j-accordion .accordion-header.is-active .header-title {
-    font-weight: var(--font-bold);
   }
 
   .j-accordion .accordion-header .header-arrow {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: var(--accordion-icon-size);
-    height: var(--accordion-icon-size);
-    transition: transform 0.3s ease-out;
-    transform: rotate(0deg);
-  }
-
-  .j-accordion .accordion-header.is-active .header-arrow {
-    transform: rotate(180deg);
   }
 
   .j-accordion .accordion-panel {
     display: none;
-    margin: 0;
   }
 
-  .j-accordion .accordion-panel.is-active {
+  .j-accordion .accordion-panel[aria-hidden="false"] {
     display: block;
   }
-
-  .j-accordion .accordion-panel .panel-content {
-    margin: var(--accordion-panel-content-margin, 0);
-    padding: var(--accordion-panel-content-padding,
-        0 var(--s3) var(--s2));
-    border-bottom: var(--accordion-border);
-    font-size: var(--accordion-font-size, var(--font-size-md));
-  }
-
-  .j-accordion .accordion-panel:last-child .panel-content {
-    border-bottom: none;
-  }
 }

package/src/css/avatar.css

@@ -1,16 +1,19 @@
 @layer components {
   .j-avatar {
-    --avatar-size: var(--el-height-md);
-
     display: inline-block;
     vertical-align: middle;
-    border-radius: var(--avatar-border-radius, var(--radius-md));
     width: var(--avatar-size);
     height: var(--avatar-size);
     overflow: hidden;
     user-select: none;
     object-fit: cover;
-    box-shadow: var(--avatar-box-shadow, var(--shadow-sm));
+    box-shadow: var(--avatar-box-shadow);
+    border: var(--avatar-border);
+    border-radius: var(--avatar-border-radius);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
+    font-size: var(--avatar-font-size);
+    font-weight: var(--avatar-font-weight);
   }
 
   .j-avatar img,
@@ -18,22 +21,7 @@
     margin: 0;
   }
 
-  .j-avatar.is-sm {
-    --avatar-size: var(--el-height-2xs);
-  }
-
-  .j-avatar.is-lg {
-    --avatar-size: var(--el-height-lg);
-  }
-
-  .j-avatar.is-round {
-    border-radius: 0.5rem;
-  }
-
   .j-avatar.is-text {
-    background-color: var(--tone-subtle);
-    color: var(--tone-solid);
-    font-weight: var(--font-medium);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -45,18 +33,4 @@
     align-items: center;
     flex-wrap: nowrap;
   }
-
-  .j-avatar-group .j-avatar {
-    border: 1.5px solid var(--avatar-border-color, 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 {
-    font-size: var(--font-size-sm, 0.75rem);
-    background-color: var(--ui-bg);
-    box-shadow: var(--avatar-box-shadow, var(--shadow-sm));
-  }
 }

package/src/css/badge.css

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

package/src/css/breadcrumb.css

@@ -1,33 +1,15 @@
 @layer components {
 
-  .j-breadcrumb,
-  .j-breadcrumb.is-md {
-    font-size: var(--breadcrumb-font-size, var(--font-size-md));
-    color: var(--breadcrumb-color, var(--ui-fg-muted));
+  .j-breadcrumb {
+    font-size: var(--breadcrumb-font-size);
+    color: var(--breadcrumb-fg);
     white-space: nowrap;
     user-select: none;
   }
 
-  .j-breadcrumb.is-sm {
-    --breadcrumb-font-size: var(--font-size-sm);
-  }
-
-  .j-breadcrumb.is-lg {
-    --breadcrumb-font-size: var(--font-size-lg);
-  }
-
-  .j-breadcrumb svg,
-  .j-breadcrumb.is-md svg {
-    width: var(--breadcrumb-icon-size, var(--font-size-md));
-    height: var(--breadcrumb-icon-size, var(--font-size-md));
-  }
-
-  .j-breadcrumb.is-sm svg {
-    --breadcrumb-icon-size: var(--font-size-sm);
-  }
-
-  .j-breadcrumb.is-lg svg {
-    --breadcrumb-icon-size: var(--font-size-lg);
+  .j-breadcrumb svg {
+    width: var(--breadcrumb-icon-size);
+    height: var(--breadcrumb-icon-size);
   }
 
   .j-breadcrumb>ol,
@@ -52,7 +34,7 @@
   }
 
   .j-breadcrumb li+li::before {
-    color: var(--breadcrumb-item-separator-color, var(--ui-fg-soft));
+    color: var(--breadcrumb-divider-fg);
     content: '/';
   }
 
@@ -73,15 +55,11 @@
     align-items: center;
     justify-content: center;
     gap: var(--space);
-    color: var(--breadcrumb-link-color, var(--tone-text));
-    padding: var(--breadcrumb-item-padding-vertical, 0) var(--breadcrumb-item-padding-horizontal, var(--s2));
+    color: var(--breadcrumb-link-fg);
+    padding: var(--breadcrumb-item-padding);
     text-decoration: none;
   }
 
-  .j-breadcrumb a:hover {
-    color: var(--breadcrumb-link-hover-color, var(--tone-solid));
-  }
-
   .j-breadcrumb a span {
     display: flex;
     align-items: center;
@@ -89,7 +67,6 @@
   }
 
   .j-breadcrumb li.is-active a {
-    --breadcrumb-link-color: var(--ui-fg-muted);
     cursor: default;
     pointer-events: none;
   }

package/src/css/button.css

@@ -4,20 +4,21 @@
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--button-gap, var(--space) calc(var(--space) * 1.5));
+    gap: var(--btn-gap);
     position: relative;
     white-space: nowrap;
-    font-weight: var(--button-font-weight, var(--font-medium));
-    font-size: var(--button-font-size, var(--font-size-md));
-    height: var(--button-height, var(--el-height-md));
-    line-height: var(--button-line-height, var(--line-height-self));
-    background-color: var(--button-background, transparent);
-    padding: var(--button-padding, 0 var(--s3));
-    border-width: var(--button-border-width, 1px);
-    border-style: var(--button-border-style, solid);
-    border-color: var(--button-border-color, transparent);
-    border-radius: var(--button-border-radius, var(--radius-md));
-    box-shadow: var(--button-box-shadow, var(--shadow-sm));
+    font-weight: var(--btn-font-weight);
+    font-size: var(--btn-font-size);
+    height: var(--btn-height);
+    line-height: var(--btn-line-height);
+    color: var(--btn-fg);
+    background-color: var(--btn-bg);
+    padding: var(--btn-padding);
+    border-width: var(--btn-border-width);
+    border-style: var(--btn-border-style);
+    border-color: var(--btn-border-color);
+    border-radius: var(--btn-border-radius);
+    box-shadow: var(--btn-box-shadow);
     appearance: button;
     user-select: none;
     touch-action: manipulation;
@@ -29,7 +30,7 @@
   }
 
   .j-button svg {
-    width: var(--font-size-md);
+    width: var(--btn-svg-size);
     fill: currentColor;
   }
 
@@ -38,113 +39,16 @@
     color: inherit;
   }
 
-  /* size */
-  .j-button.is-sm {
-    font-size: var(--font-size-sm);
-    height: var(--button-height-sm, var(--el-height-sm));
-    padding: var(--button-padding-sm, var(--space) var(--s2));
-  }
-
-  .j-button.is-lg {
-    font-size: var(--font-size-lg);
-    height: var(--button-height-lg, var(--el-height-lg));
-    padding: var(--button-padding-lg, var(--s3) var(--s4));
-  }
-
-  /* variant */
-  .j-button.is-default {
-    --button-background: var(--ui-bg);
-    --button-border-color: var(--ui-border);
-    color: var(--ui-fg);
-  }
-
-  .j-button.is-contrast {
-    --button-background: var(--ui-fg);
-    color: var(--ui-bg);
-  }
-
-  .j-button.is-primary {
-    --button-background: var(--tone-solid);
-    color: var(--tone-fg);
-  }
-
-  .j-button.is-secondary {
-    --button-border-color: transparent;
-    --button-background: var(--tone-soft);
-    color: var(--tone-text);
-  }
-
-  .j-button.is-outline {
-    --button-background: transparent;
-    --button-border-color: var(--tone-solid);
-    color: var(--tone-solid);
-  }
-
-  .j-button.is-ghost {
-    --button-box-shadow: none;
-    transition-property: none;
-  }
-
-  .j-button.is-text {
-    --button-border-color: transparent;
-    height: var(--button-text-height, auto);
-    padding: var(--button-text-padding, 0);
-    box-shadow: var(--button-text-box-shadow, none);
-  }
-
-  .j-button.is-icon {
-    aspect-ratio: var(--aspect-icon, 1);
-    padding: var(--icon-padding, 0);
-  }
-
-  .j-button.is-danger {
-    --button-background: var(--state-danger);
-    color: var(--state-danger-fg);
-  }
-
-  .j-button.is-warning {
-    --button-background: var(--state-warning);
-    color: var(--state-warning-fg);
-  }
-
-  .j-button.is-success {
-    --button-background: var(--state-success);
-    color: var(--state-success-fg);
-  }
-
-  .j-button.is-error {
-    --button-background: var(--state-danger-subtle);
-    color: var(--state-danger-text);
-  }
-
-  .j-button[class*='is-surface-'] {
-    --button-border-color: var(--ui-border);
-    color: var(--ui-fg);
-  }
-
-  .j-button.is-surface-sm {
-    --button-background: var(--ui-surface-subtle);
-  }
-
-  .j-button.is-surface-md {
-    --button-background: var(--ui-surface-muted);
-  }
-
-  .j-button.is-surface-lg {
-    --button-background: var(--ui-surface-active);
-  }
-
   /* group */
   .j-button-group {
-    --button-padding: 0 var(--s2);
     display: flex;
     margin: 0;
+    box-shadow: var(--btn-group-box-shadow);
   }
 
   .j-button-group .j-button:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    /* margin-left: -1px; */
   }
 
   .j-button-group .j-button:not(:last-child) {
@@ -153,8 +57,10 @@
   }
 
   .j-button-group .j-button:not(:first-child):not(:last-child) {
-    border-block-width: var(--button-border-width, 1px);
-    border-inline-width: 0;
+    border-top-width: var(--btn-border-width);
+    border-bottom-width: var(--btn-border-width);
+    border-left-width: 0;
+    border-right-width: 0;
   }
 
   .j-button-group.is-vertical {
@@ -173,8 +79,10 @@
   }
 
   .j-button-group.is-vertical .j-button:not(:last-child):not(:first-child) {
-    border-block-width: 0;
-    border-inline-width: var(--button-border-width, 1px);
+    border-left-width: var(--btn-border-width);
+    border-right-width: var(--btn-border-width);
+    border-top-width: 0;
+    border-bottom-width: 0;
   }
 
   .j-button-group.is-vertical .j-button:first-child {
@@ -184,113 +92,4 @@
   .j-button-group.is-vertical .j-button:last-child {
     border-bottom-left-radius: var(--radius-md);
   }
-
-  /* disabled */
-  .j-button:disabled {
-    opacity: var(--opacity-disabled, 0.5);
-  }
-
-  /* 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,
-  .j-button:not(:disabled):focus-visible {
-    outline: 2px solid var(--button-ring, var(--tone-solid));
-    outline-offset: 1px;
-    border-color: transparent;
-  }
-
-  .j-button.is-default:hover:not(:disabled) {
-    background-color: var(--ui-surface-hover);
-  }
-
-  .j-button.is-outline:hover:not(:disabled),
-  .j-button.is-ghost:hover:not(:disabled) {
-    background-color: 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;
-    color: var(--tone-solid);
-    text-decoration: underline;
-    text-underline-offset: var(--space);
-  }
-
-  .j-button.is-contrast:not(:disabled):active,
-  .j-button.is-contrast:not(:disabled):focus-visible {
-    --button-ring: var(--ui-fg);
-  }
-
-  .j-button.is-success:not(:disabled):active,
-  .j-button.is-success:not(:disabled):focus-visible {
-    --button-ring: var(--state-success);
-  }
-
-  .j-button.is-warning:not(:disabled):active,
-  .j-button.is-warning:not(:disabled):focus-visible {
-    --button-ring: var(--state-warning);
-  }
-
-  .j-button.is-danger:not(:disabled):active,
-  .j-button.is-danger:not(:disabled):focus-visible {
-    --button-ring: var(--state-danger);
-  }
-
-  .j-button.is-error:not(:disabled):active,
-  .j-button.is-error:not(:disabled):focus-visible {
-    --button-ring: var(--state-danger-subtle);
-  }
-
-  .j-button.is-surface-sm:not(:disabled):active,
-  .j-button.is-surface-sm:not(:disabled):focus-visible {
-    --button-ring: var(--ui-surface-hover);
-  }
-
-  .j-button.is-surface-md:not(:disabled):active,
-  .j-button.is-surface-md:not(:disabled):focus-visible {
-    --button-ring: var(--ui-border);
-  }
-
-  .j-button.is-surface-lg:not(:disabled):active,
-  .j-button.is-surface-lg:not(:disabled):focus-visible {
-    --button-ring: var(--ui-border-strong);
-  }
-
-  .j-button-group .j-button:active,
-  .j-button-group .j-button:focus-visible {
-    outline: none;
-    --button-border-color: transparent;
-    --button-box-shadow: 0 0 0 2px var(--tone-solid);
-    z-index: 1;
-  }
-
-  .j-button-group .j-button.is-primary:not(:disabled):active,
-  .j-button-group .j-button.is-primary:not(:disabled):focus-visible,
-  .j-button-group .j-button:focus-within {
-    outline: 2px solid var(--button-ring, var(--tone-solid));
-    outline-offset: 1px;
-    --button-border-color: transparent;
-    --button-box-shadow: var(--shadow-sm);
-  }
-
-  .j-button-group .j-button:focus-within {
-    z-index: 1;
-    --button-border-color: transparent;
-  }
-
-  .j-button-group.is-vertical .j-button:focus-within {
-    z-index: auto
-  }
 }

package/src/css/components.css

@@ -22,6 +22,7 @@
 @import url('./pagination.css');
 @import url('./card.css');
 @import url('./toolbar.css');
+@import url('./editor.css');
 @import url('./menu.css');
 @import url('./toc.css');
 @import url('./form.css');