vanilla-jui 1.4.0 → 1.4.2

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[aria-selected="true"] {
+        --tab-fg: var(--tone-solid);
+        --tab-font-weight: var(--font-medium);
+    }
+
+    .j-tabs .tab-list .tab-item[aria-disabled="true"] {
+        --tab-fg: var(--ui-border-strong);
+    }
+}

package/src/css/themes/default/tag.css

@@ -0,0 +1,85 @@
+@layer themes {
+    .j-tag {
+        --tag-gap: var(--space);
+        --tag-fg: var(--ui-fg);
+        --tag-bg: var(--ui-bg);
+        --tag-font-size: var(--font-size-sm);
+        --tag-font-weight: var(--font-normal);
+        --tag-line-height: var(--line-height-self);
+        --tag-height: var(--el-height-xs);
+        --tag-padding: 0 calc(var(--space) * 1.5);
+        --tag-border-width: 1px;
+        --tag-border-style: solid;
+        --tag-border-color: var(--ui-border);
+        --tag-border-radius: var(--radius-md);
+        --tag-box-shadow: var(--shadow-sm);
+    }
+
+    .j-font-md .j-tag {
+        --tag-padding: 0 var(--s2);
+    }
+
+    .j-tag.is-contrast {
+        --tag-fg: var(--ui-bg);
+        --tag-bg: var(--ui-fg);
+    }
+
+    .j-tag.is-primary {
+        --tag-bg: var(--tone-solid);
+        --tag-fg: var(--tone-fg);
+        --tag-border-color: var(--tone-solid);
+    }
+
+    .j-tag.is-secondary {
+        --tag-bg: var(--tone-soft);
+        --tag-fg: var(--tone-text);
+        --tag-border-color: transparent;
+    }
+
+    .j-tag.is-outline {
+        --tag-bg: transparent;
+        --tag-fg: var(--tone-solid);
+        --tag-border-color: var(--tone-solid);
+    }
+
+    .j-tag.is-ghost {
+        --tag-border-color: transparent;
+        --tag-box-shadow: none;
+    }
+
+    .j-tag img,
+    .j-tag svg {
+        --tag-icon-size: var(--font-size-sm);
+    }
+
+    .j-tag.is-default:hover {
+        background: var(--ui-surface-hover);
+    }
+
+    .j-tag.is-outline:hover,
+    .j-tag.is-ghost:hover {
+        background: var(--tone-subtle);
+    }
+
+    .j-tag .el-icon[data-action='close']:hover {
+        color: var(--tone-fg);
+        background: 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: var(--ui-fg);
+        color: var(--ui-bg-subtle);
+    }
+
+    .j-tag.is-contrast .el-icon[data-action='close']:hover {
+        color: var(--ui-fg);
+        background: var(--ui-bg);
+    }
+
+    .j-tag.is-primary .el-icon[data-action='close']:hover {
+        color: var(--tone-solid);
+        background: var(--tone-fg);
+    }
+}

package/src/css/themes/default/theme-palette.css

@@ -0,0 +1,12 @@
+@layer themes {
+    .j-theme-palette {
+        --palette-padding: 1rem 1rem 2rem;
+        --palette-container-gap: var(--s4);
+        --palette-item-gap: var(--s2);
+        --palette-item-title-font-size: var(--font-size-md);
+        --palette-item-title-font-weight: var(--font-bold);
+        --palette-items-columns: repeat(3, 1fr);
+        --palette-items-gap: var(--space);
+        --palette-items-icon-size: var(--font-size-sm);
+    }
+}

package/src/css/themes/default/tip.css

@@ -0,0 +1,49 @@
+@layer themes {
+    .j-tip {
+        --tip-gap: var(--s2);
+        --tip-width: 100%;
+        --tip-padding: var(--s3) var(--s4);
+        --tip-border-width: 1px;
+        --tip-border-style: solid;
+        --tip-border-color: var(--ui-border);
+        --tip-border-radius: var(--radius-md);
+        --tip-font-size: var(--font-size-md);
+        --tip-fg: var(--ui-fg);
+        --tip-bg: var(--ui-bg);
+        --tip-box-shadow: var(--shadow-sm);
+        --tip-icon-fg: var(--tip-fg);
+    }
+
+    .j-tip .tip-icon,
+    .j-tip .tip-icon svg {
+        --tip-icon-size: var(--font-size-xl);
+    }
+
+    .j-tip .tip-title {
+        --tip-title-line-height: var(--line-height-paragraph);
+        --tip-title-font-weight: var(--font-medium);
+    }
+
+    .j-tip .tip-content {
+        --tip-content-gap: var(--s2);
+        --tip-content-line-height: var(--line-height-paragraph);
+    }
+
+    .j-tip.is-success {
+        --tip-border-color: var(--state-success);
+        --tip-bg: var(--state-success-muted);
+        --tip-icon-fg: var(--state-success);
+    }
+
+    .j-tip.is-warning {
+        --tip-border-color: var(--state-warning);
+        --tip-bg: var(--state-warning-muted);
+        --tip-icon-fg: var(--state-warning);
+    }
+
+    .j-tip.is-danger {
+        --tip-border-color: var(--state-danger);
+        --tip-bg: var(--state-danger-muted);
+        --tip-icon-fg: var(--state-danger);
+    }
+}

package/src/css/themes/default/toast.css

@@ -0,0 +1,70 @@
+@layer themes {
+    .j-toast-container {
+        --toast-container-offset: var(--s2);
+        --toast-container-gap: var(--s2);
+    }
+
+    .j-toast {
+        --toast-padding: var(--s3) var(--s4);
+        --toast-font-size: var(--font-size-md);
+        --toast-font-weight: var(--font-medium);
+        --toast-min-width: 200px;
+        --toast-max-width: 310px;
+        --toast-box-shadow: var(--shadow-md);
+        --toast-border-width: 1px;
+        --toast-border-style: solid;
+        --toast-border-color: var(--ui-border);
+        --toast-border-radius: var(--radius-md);
+        --toast-fg: var(--ui-fg);
+        --toast-bg: var(--ui-bg);
+    }
+
+    .j-toast .toast-icon {
+        --toast-icon-size: var(--font-size-lg);
+    }
+
+    .j-toast.is-success {
+        --toast-fg: var(--state-success);
+        --toast-bg: var(--state-success-weak);
+        --toast-border-color: var(--state-success-border);
+    }
+
+    .j-toast.is-error {
+        --toast-fg: var(--state-danger);
+        --toast-bg: var(--state-danger-weak);
+        --toast-border-color: var(--state-danger-border);
+    }
+
+    .j-toast.is-warning {
+        --toast-fg: var(--state-warning);
+        --toast-bg: var(--state-warning-weak);
+        --toast-border-color: var(--state-warning-border);
+    }
+
+    .j-toast.is-primary {
+        --toast-fg: var(--tone-solid);
+        --toast-bg: var(--tone-weak);
+        --toast-border-color: var(--tone-border);
+    }
+
+    .j-toast.is-action {
+        --toast-gap: calc(var(--space)*4);
+        --toast-min-width: 280px;
+    }
+
+    .j-toast.is-action .toast-actions {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--space);
+    }
+
+    .j-toast-lite {
+        font-size: var(--font-size-md);
+        color: var(--ui-bg);
+        background: var(--ui-fg);
+        border-radius: var(--radius-md);
+        padding: var(--s2) var(--s3);
+        max-width: calc(var(--screen-sm) / 2);
+    }
+}

package/src/css/themes/default/toolbar.css

@@ -0,0 +1,34 @@
+@layer themes {
+    .j-toolbar-container {
+        --toolbar-container-position: sticky;
+        --toolbar-container-bg: var(--ui-bg);
+        --toolbar-container-border: 1px solid var(--ui-border);
+    }
+
+    .j-toolbar {
+        --toolbar-gap: 0;
+        --toolbar-padding: var(--s2);
+        --toolbar-box-shadow: var(--shadow-sm);
+        --toolbar-divider-width: 1px;
+        --toolbar-divider-height: 16px;
+        --toolbar-divider-bg: var(--ui-fg);
+        --toolbar-drop-font-size: var(--font-size-md);
+        --toolbar-drop-bg: var(--ui-bg-subtle);
+        --toolbar-drop-padding: var(--space);
+        --toolbar-drop-border: 1px solid var(--ui-border);
+        --toolbar-drop-radius: var(--radius-sm);
+        --toolbar-drop-box-shadow: var(--shadow-md);
+    }
+
+    .j-toolbar button svg {
+        --toolbar-icon-size: var(--font-size-xl);
+    }
+
+    .j-toolbar button.is-sm svg {
+        --toolbar-icon-size: var(--font-size-lg);
+    }
+
+    .j-toolbar button.is-lg svg {
+        --toolbar-icon-size: var(--font-size-2xl);
+    }
+}

package/src/css/themes/default/tooltip.css

@@ -0,0 +1,14 @@
+@layer themes {
+    .j-tooltip {
+        --tooltip-fg: var(--ui-bg);
+        --tooltip-bg: var(--ui-fg);
+        --tooltip-border-width: 1px;
+        --tooltip-border-style: solid;
+        --tooltip-border-color: var(--ui-border-strong);
+        --tooltip-border-radius: var(--radius-md);
+        --tooltip-max-width: 260px;
+        --tooltip-padding: calc(var(--space) * 1.5) var(--s2);
+        --tooltip-font-size: var(--font-size-md);
+        --tooltip-line-height: var(--line-height);
+    }
+}

package/src/css/themes/index.css

@@ -0,0 +1 @@
+@import url('./default/index.css');

package/src/css/tip.css

@@ -2,39 +2,38 @@
   .j-tip {
     position: relative;
     display: grid;
-    width: var(--tip-width, 100%);
     grid-template-columns: 0 1fr;
     align-items: flex-start;
-    row-gap: var(--tip-gap, calc(var(--space, 0.25rem) * 2));
-    border-radius: var(--tip-border-radius, var(--radius-md));
-    border-style: var(--tip-border-style, solid);
-    border-width: var(--tip-border-width, 1px);
-    border-color: var(--tip-border-color, var(--ui-border));
-    padding-inline: calc(var(--space, 0.25rem) * 4);
-    padding-block: calc(var(--space, 0.25rem) * 3);
-    font-size: var(--tip-font-size, var(--font-size-md));
-    color: var(--tip-color, var(--ui-fg));
-    background-color: var(--tip-background, var(--ui-bg));
-    box-shadow: var(--tip-box-shadow, var(--shadow-sm));
+    row-gap: var(--tip-gap);
+    width: var(--tip-width);
+    border-width: var(--tip-border-width);
+    border-style: var(--tip-border-style);
+    border-color: var(--tip-border-color);
+    border-radius: var(--tip-border-radius);
+    padding: var(--tip-padding);
+    font-size: var(--tip-font-size);
+    color: var(--tip-fg);
+    background: var(--tip-bg);
+    box-shadow: var(--tip-box-shadow);
   }
 
   .j-tip:has(.tip-icon) {
-    column-gap: calc(var(--space, 0.25rem) * 3);
+    column-gap: var(--s3);
     grid-template-columns: var(--s4) 1fr;
   }
 
   .j-font-md .j-tip:has(.tip-icon) {
-    column-gap: calc(var(--space, 0.25rem) * 5);
+    column-gap: var(--s5);
   }
 
   .j-tip .tip-icon,
   .j-tip .tip-icon svg {
-    width: var(--tip-icon-size, var(--font-size-xl));
-    height: var(--tip-icon-size, var(--font-size-xl));
+    width: var(--tip-icon-size);
+    height: var(--tip-icon-size);
   }
 
   .j-tip .tip-icon {
-    color: var(--tip-icon-color, var(--tip-color));
+    color: var(--tip-icon-fg);
     transform: translateY(calc(var(--space, 0.25rem) * 0.5));
     margin: 0;
   }
@@ -46,8 +45,8 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     line-clamp: 1;
-    line-height: var(--tip-title-line-height, var(--line-height-paragraph));
-    font-weight: var(--font-medium, 500);
+    line-height: var(--tip-title-line-height);
+    font-weight: var(--tip-title-font-weight);
     margin: 0;
   }
 
@@ -55,30 +54,12 @@
     grid-column-start: 2;
     display: grid;
     justify-items: start;
-    gap: calc(var(--space, 0.25rem) * 2);
-    line-height: var(--line-height-paragraph);
+    gap: var(--tip-content-gap);
+    line-height: var(--tip-content-line-height);
     margin: 0;
   }
 
   .j-tip .tip-content>* {
     margin: 0;
   }
-
-  .j-tip.is-success {
-    --tip-border-color: var(--state-success);
-    --tip-icon-color: var(--state-success);
-    --tip-background: var(--state-success-muted);
-  }
-
-  .j-tip.is-warning {
-    --tip-border-color: var(--state-warning);
-    --tip-icon-color: var(--state-warning);
-    --tip-background: var(--state-warning-muted);
-  }
-
-  .j-tip.is-danger {
-    --tip-border-color: var(--state-danger);
-    --tip-icon-color: var(--state-danger);
-    --tip-background: var(--state-danger-muted);
-  }
 }

package/src/css/toast.css

@@ -1,12 +1,12 @@
 @layer components {
   .j-toast-container {
     position: fixed;
-    top: var(--toast-container-offset, var(--s2));
-    right: var(--toast-container-offset, var(--s2));
+    top: var(--toast-container-offset);
+    right: var(--toast-container-offset);
     z-index: var(--z-toast);
     display: flex;
     flex-direction: column;
-    gap: var(--toast-container-gap, var(--s2));
+    gap: var(--toast-container-gap);
     align-items: center;
     left: 50%;
     transform: translateX(-50%);
@@ -16,37 +16,45 @@
   .j-toast {
     display: flex;
     align-items: center;
-    padding: var(--toast-padding, var(--s3) var(--s4));
-    border-radius: var(--toast-border-radius, var(--radius-md));
-    box-shadow: var(--toast-box-shadow, var(--shadow-md));
-    font-size: var(--toast-font-size, var(--font-size-md));
-    font-weight: var(--toast-font-weight, var(--font-medium));
-    opacity: 0;
+    gap: var(--toast-gap);
+    padding: var(--toast-padding);
+    box-shadow: var(--toast-box-shadow);
+    font-size: var(--toast-font-size);
+    font-weight: var(--toast-font-weight);
+    color: var(--toast-fg);
+    background: var(--toast-bg);
+    border-width: var(--toast-border-width);
+    border-style: var(--toast-border-style);
+    border-color: var(--toast-border-color);
+    border-radius: var(--toast-border-radius);
 
+    opacity: 0;
     transform: translateY(-100%);
 
     transition: all 0.3s ease-in-out;
     cursor: pointer;
-    min-width: var(--toast-min-width, 200px);
-    max-width: var(--toast-max-width, 310px);
+    min-width: var(--toast-min-width);
+    max-width: var(--toast-max-width);
     word-break: break-all;
 
     pointer-events: auto;
   }
 
-  .j-toast.is-shown {
+  /* .j-toast.is-shown, */
+  .j-toast[aria-live] {
     opacity: 1;
     transform: translateY(0);
   }
 
-  .j-toast.is-hidden {
+  /* .j-toast.is-hidden {
     opacity: 0;
     transform: translateY(-100%);
-  }
+  } */
 
   .j-toast .toast-icon {
     margin-right: var(--s2);
-    width: var(--toast-icon-size, var(--font-size-lg));
+    width: var(--toast-icon-size);
+    color: inherit;
   }
 
   .j-toast .toast-message {
@@ -54,101 +62,33 @@
     word-break: normal;
   }
 
-  .j-toast.is-success {
-    color: var(--toast-success-color, var(--state-success));
-    background-color: var(--toast-success-background, var(--state-success-weak));
-    border: 1px solid var(--toast-success-border-color, var(--state-success-border));
-  }
-
-  .j-toast.is-success .toast-icon {
-    color: var(--toast-success-icon-color, var(--state-success));
-  }
-
-  .j-toast.is-error {
-    color: var(--toast-error-color, var(--state-danger));
-    background-color: var(--toast-error-background, var(--state-danger-weak));
-    border: 1px solid var(--toast-error-border-color, var(--state-danger-border));
-  }
-
-  .j-toast.is-error .toast-icon {
-    color: var(--toast-error-icon-color, var(--state-danger));
-  }
-
-  .j-toast.is-warning {
-    color: var(--toast-warning-color, var(--state-warning));
-    background-color: var(--toast-warning-background, var(--state-warning-weak));
-    border: 1px solid var(--toast-warning-border-color, var(--state-warning-border));
-  }
-
-  .j-toast.is-warning .toast-icon {
-    color: var(--toast-warning-icon-color, var(--state-warning));
-  }
-
-  .j-toast.is-info {
-    color: var(--toast-info-color, var(--ui-fg));
-    background-color: var(--toast-info-background, var(--ui-bg));
-    border: 1px solid var(--toast-info-border-color, var(--ui-border));
-  }
-
-  .j-toast.is-info .toast-icon {
-    color: var(--toast-info-icon-color, var(--ui-fg));
-  }
-
-  .j-toast.is-primary {
-    color: var(--toast-info-color, var(--tone-solid));
-    /* background-color: var(--toast-info-background, var(--tone-muted)); */
-    background-color: var(--toast-info-background, var(--tone-weak));
-    border: 1px solid var(--toast-info-border-color, var(--tone-border));
-  }
-
-  .j-toast.is-primary .toast-icon {
-    color: var(--toast-info-icon-color, var(--tone-solid));
-  }
-
   .j-toast-lite {
     position: fixed;
     top: 45%;
     left: 50%;
-    transform: translate(-50%, -50%);
     transition: opacity var(--speed-sm) ease-in-out;
-    opacity: 0;
     z-index: var(--z-toast);
-    font-size: var(--toast-lite-font-size, var(--font-size-md));
     text-align: center;
-    color: var(--toast-lite-color, var(--ui-bg));
-    background: var(--toast-lite-background, var(--ui-fg));
-    border-radius: var(--toast-lite-border-radius, var(--radius-md));
-    padding: var(--toast-lite-padding, var(--s2) var(--s3));
-    max-width: var(--toast-lite-max-width, calc(var(--screen-sm) / 2));
     user-select: none;
     pointer-events: none;
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
   }
 
-  .j-toast-lite.is-shown {
+  /* .j-toast-lite.is-shown, */
+  .j-toast-lite[aria-live] {
     opacity: 1;
     transform: scale(1);
   }
 
-  .j-toast-lite.is-hidden {
+  /* .j-toast-lite.is-hidden {
     opacity: 0;
     transform: scale(0.9);
-  }
+  } */
 
   .j-toast.is-action {
     flex-direction: column;
     align-items: flex-start;
-    gap: calc(var(--space)*4);
-    color: var(--toast-info-color, var(--ui-fg));
-    background-color: var(--toast-info-background, var(--ui-bg));
-    border: 1px solid var(--toast-info-border-color, var(--ui-border));
-    min-width: 280px;
     cursor: default;
   }
-
-  .j-toast.is-action .toast-actions {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space);
-  }
 }

package/src/css/tokens.css

@@ -92,6 +92,11 @@
 
     /* --- Border Radius --- */
     --radius-full: 9999px;
+
+    /* --- Opacity --- */
+    --opacity-hover: 0.8;
+    --opacity-active: 0.95;
+    --opacity-disabled: 0.5;
   }
 
 
@@ -126,7 +131,7 @@
     --ui-disabled-fg: #9ca3af;
     --ui-overlay: rgba(0, 0, 0, 0.5);
     --ui-overlay-muted: rgba(0, 0, 0, 0.25);
-    --ui-popup-background: rgba(0, 0, 0, 0.0625);
+    --ui-popup-bg: rgba(0, 0, 0, 0.0625);
     --ui-input-color: #111827;
     --ui-input-border: rgba(0, 0, 0, 0.15);
     --ui-input-focus-border: #3b82f6;
@@ -317,7 +322,7 @@
     --ui-disabled-fg: #64748b;
     --ui-overlay: rgba(2, 6, 23, 0.7);
     --ui-overlay-muted: rgba(2, 6, 23, 0.45);
-    --ui-popup-background: rgba(17, 24, 39, 0.82);
+    --ui-popup-bg: rgba(17, 24, 39, 0.82);
     --ui-input-color: #f9fafb;
     --ui-input-border: rgba(148, 163, 184, 0.2);
     --ui-input-focus-border: #a78bfa;