vanilla-jui 1.3.11 → 1.4.1

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/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/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,19 +16,25 @@
   .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));
+    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);
     opacity: 0;
+    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);
 
     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;
@@ -46,7 +52,8 @@
 
   .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,57 +61,6 @@
     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%;
@@ -113,13 +69,7 @@
     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;
   }
@@ -137,18 +87,6 @@
   .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

@@ -78,7 +78,7 @@
     --columns-5xs: 12rem;
     --columns-4xs: 14rem;
     --columns-3xs: 16rem;
-    --columns-2xs: 18px;
+    --columns-2xs: 18rem;
     --columns-xs: 20rem;
     --columns-sm: 24rem;
     --columns-md: 28rem;
@@ -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;

package/src/css/tooltip.css

@@ -1,19 +1,19 @@
 @layer comopnents {
   .j-tooltip {
     position: relative;
-    background: var(--tooltip-background, #000);
-    color: var(--tooltip-foreground, #fff);
-    border-width: var(--tooltip-border-width, 1px);
-    border-style: var(--tooltip-border-style, solid);
-    border-color: var(--tooltip-border-color, #111);
-    border-radius: var(--tooltip-radius, var(--radius-md));
-    max-width: var(--tooltip-max-width, 260px);
+    background: var(--tooltip-bg);
+    color: var(--tooltip-fg);
+    border-width: var(--tooltip-border-width);
+    border-style: var(--tooltip-border-style);
+    border-color: var(--tooltip-border-color);
+    border-radius: var(--tooltip-border-radius);
+    max-width: var(--tooltip-max-width);
   }
 
   .j-tooltip .tooltip-message {
     word-wrap: break-word;
-    padding: var(--tooltip-padding, calc(var(--space) * 1.5) var(--s2));
-    font-size: var(--tooltip-font-size, var(--font-size-md));
-    line-height: var(--tooltip-line-height, var(--line-height));
+    padding: var(--tooltip-padding);
+    font-size: var(--tooltip-font-size);
+    line-height: var(--tooltip-line-height);
   }
 }

package/src/index.ts

@@ -0,0 +1,37 @@
+// CSS
+import './css/index.css';
+
+// Utilities
+export * from './utilities/browser.ts';
+export * from './utilities/cache.ts';
+export * from './utilities/core.ts';
+export * from './utilities/dom.ts';
+export * from './utilities/events.ts';
+export * from './utilities/http.ts';
+export * from './utilities/storage.ts';
+
+// Core
+export { default as Component } from './core/Component.ts';
+
+// Common Components
+export * from './components/icons.ts';
+export * from './components/theme.ts';
+export * from './components/toast.ts';
+
+// Components extending Component
+// components with factory functions
+export * from './components/form.ts';
+export * from './components/validator.ts';
+export * from './components/toc.ts';
+export * from './components/sticky.ts';
+export * from './components/flow.ts';
+export * from './components/parabola.ts';
+export * from './components/tabs.ts';
+export * from './components/accordion.ts';
+export * from './components/drop.ts';
+export * from './components/tooltip.ts';
+export * from './components/offcanvas.ts';
+export * from './components/modal.ts';
+export * from './components/pagination.ts';
+export * from './components/swiper.ts';
+export * from './components/menu.ts';

package/src/locales/{index.js → index.ts}

@@ -3,7 +3,6 @@ export default {
     b: 'Back',
     t: 'Customize',
     d: 'Customize your UI experience.',
-    n: 'None',
     sm: 'Small',
     md: 'Medium',
     lg: 'Large',
@@ -32,7 +31,7 @@ export default {
     Yellow: '黄色',
     Orange: '橙色',
     Gold: '金色',
-    n: '无',
+    None: '无',
     sm: '小',
     md: '中',
     lg: '大',

package/src/types.d.ts

@@ -0,0 +1 @@
+declare module '*.css';