vanilla-jui 1.7.30 → 1.7.32

package/src/css/tokens.css

@@ -18,22 +18,6 @@
 
     /* --- Spacing --- */
     --space: 0.25rem;
-    --s1d5: 0.375rem;
-    --s2: 0.5rem;
-    --s2d5: 0.625rem;
-    --s3: 0.75rem;
-    --s3d5: 0.875rem;
-    --s4: 1rem;
-    --s5: 1.25rem;
-    --s6: 1.5rem;
-    --s7: 1.75rem;
-    --s8: 2rem;
-
-    /* --- Transitions --- */
-    --speed-sm: 0.15s;
-    --speed-md: 0.25s;
-    --speed-lg: 0.5s;
-    --speed-xl: 0.75s;
 
     /* --- Typography Scale --- */
     --text-xs: 0.75rem;
@@ -57,6 +41,10 @@
     --font-extraBold: 800;
     --font-black: 900;
 
+    /* --- height size --- */
+    --el-height: var(--el-height-md);
+    --el-font-size: var(--font-size-md);
+
     /* --- Line Height --- */
     --line-height: 1.5;
     --line-height-paragraph: 1.5;
@@ -71,9 +59,14 @@
     --screen-xl: 1200px;
 
     /* --- Opacity --- */
-    --opacity-hover: 0.85;
+    --opacity-hover: 0.68;
     --opacity-active: 0.95;
-    --opacity-disabled: 0.75;
+    --opacity-disabled: 0.5;
+
+    /* --- Animation --- */
+    --time: 0.2s;
+
+    --bezier: cubic-bezier(.4, 0, .2, 1);
   }
 
   /* ============================================
@@ -82,10 +75,27 @@
 
   :root,
   .light {
+    --svg-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
+
     /* UI Structure */
-    --ui-bg: #ffffff;
-    --ui-bg-subtle: #f9fafb;
-    --ui-bg-muted: #f3f4f6;
+    --ui-fg: #111827;
+    --ui-fg-muted: #6b7280;
+    --ui-fg-soft: #9ca3af;
+    --ui-fg-subtle: #d1d5db;
+
+    --ui-bg: hsl(210, 12%, 99%);
+    --ui-bg-subtle: hsl(210, 12%, 98%);
+    --ui-bg-soft: hsl(210, 12%, 96%);
+    --ui-bg-muted: hsl(210, 12%, 94%);
+
+    --ui-fg-disabled: #9ca3af;
+    --ui-bg-disabled: rgba(0, 0, 0, 0.04);
+
+    --ui-border: hsla(210, 12%, 84%);
+    --ui-border-subtle: hsla(210, 12%, 88%);
+    --ui-border-soft: hsla(210, 12%, 92%);
+    --ui-border-muted: hsla(210, 12%, 96%);
+
     --ui-surface: #ffffff;
     --ui-surface-subtle: #f9fafb;
     --ui-surface-muted: #f3f4f6;
@@ -93,27 +103,12 @@
     --ui-surface-active: rgba(0, 0, 0, 0.04);
     --ui-surface-raised: #ffffff;
     --ui-surface-overlay: rgba(255, 255, 255, 0.85);
-    --ui-fg: #111827;
-    --ui-fg-muted: #6b7280;
-    --ui-fg-soft: #9ca3af;
-    --ui-fg-subtle: #d1d5db;
+
     --ui-reverse: #000;
-    --ui-border-subtle: rgba(0, 0, 0, 0.06);
-    --ui-border: rgba(0, 0, 0, 0.1);
-    --ui-border-strong: rgba(0, 0, 0, 0.2);
     --ui-outline: rgba(0, 0, 0, 0.15);
     --ui-placeholder: #9ca3af;
-    --ui-disabled-bg: rgba(0, 0, 0, 0.04);
-    --ui-disabled-fg: #9ca3af;
     --ui-overlay: rgba(0, 0, 0, 0.25);
-    --ui-overlay-muted: 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: var(--ui-blue);
-    --ui-input-placeholder: #9ca3af;
-    --ui-input-focus-ring: rgba(59, 130, 246, 0.25);
-    --ui-tooltip-bg: #1f2937;
     --ui-tooltip-fg: #f9fafb;
 
     /* --- Fixed Theme Colors (15 themes) --- */
@@ -169,6 +164,7 @@
     --tone-muted: rgba(99, 102, 241, 0.12);
     --tone-weak: #ececf7;
     --tone-wash: rgba(99, 102, 241, 0.03);
+    --tone-bg: rgba(99, 102, 241, 0.01);
     --tone-border: rgba(99, 102, 241, 0.2);
     --tone-border-strong: rgba(99, 102, 241, 0.35);
     --tone-solid: #6366f1;
@@ -180,6 +176,7 @@
     --tone-text-hover: #4338ca;
     --tone-fg: #ffffff;
     --tone-ring: rgba(99, 102, 241, 0.4);
+
     --tone-highlight: #fef08a;
     --tone-highlight-fg: #854d0e;
 
@@ -273,10 +270,27 @@
   ============================================ */
 
   .dark {
+    --svg-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
+
     /* UI Structure */
-    --ui-bg: #0b0f14;
-    --ui-bg-subtle: #11161d;
-    --ui-bg-muted: #181e27;
+    --ui-fg: #f9fafb;
+    --ui-fg-muted: #cbd5e1;
+    --ui-fg-soft: #94a3b8;
+    --ui-fg-subtle: #64748b;
+
+    --ui-bg: hsl(210, 4%, 8%);
+    --ui-bg-subtle: hsl(210, 4%, 10%);
+    --ui-bg-soft: hsl(210, 4%, 12%);
+    --ui-bg-muted: hsl(210, 4%, 14%);
+
+    --ui-fg-disabled: #64748b;
+    --ui-bg-disabled: rgba(255, 255, 255, 0.04);
+
+    --ui-border: hsl(210, 8%, 24%);
+    --ui-border-subtle: hsl(210, 8%, 16%);
+    --ui-border-soft: hsl(210, 8%, 12%);
+    --ui-border-muted: hsl(210, 8%, 10%);
+
     --ui-surface: #0b0f14;
     --ui-surface-subtle: #11161d;
     --ui-surface-muted: #181e27;
@@ -284,27 +298,12 @@
     --ui-surface-active: rgba(255, 255, 255, 0.07);
     --ui-surface-raised: #151b24;
     --ui-surface-overlay: rgba(7, 10, 15, 0.9);
-    --ui-fg: #f9fafb;
-    --ui-fg-muted: #cbd5e1;
-    --ui-fg-soft: #94a3b8;
-    --ui-fg-subtle: #64748b;
+
     --ui-reverse: #fff;
-    --ui-border-subtle: rgba(148, 163, 184, 0.12);
-    --ui-border: rgba(148, 163, 184, 0.18);
-    --ui-border-strong: rgba(148, 163, 184, 0.28);
     --ui-outline: rgba(148, 163, 184, 0.2);
     --ui-placeholder: #64748b;
-    --ui-disabled-bg: rgba(255, 255, 255, 0.04);
-    --ui-disabled-fg: #64748b;
     --ui-overlay: rgba(2, 6, 23, 0.7);
-    --ui-overlay-muted: rgba(2, 6, 23, 0.45);
-    --ui-popup-bg: rgba(17, 24, 39, 0.45);
-    --ui-input-color: #f9fafb;
-    --ui-input-border: rgba(148, 163, 184, 0.2);
-    --ui-input-focus-border: #a78bfa;
-    --ui-input-placeholder: #64748b;
-    --ui-input-focus-ring: rgba(167, 139, 250, 0.28);
-    --ui-tooltip-bg: #11161d;
+    --ui-popup-bg: rgba(0, 0, 0, 0.0375);
     --ui-tooltip-fg: #f8fafc;
 
     /* --- Fixed Theme Colors (15 themes) --- */
@@ -360,6 +359,7 @@
     --tone-muted: rgba(129, 140, 248, 0.2);
     --tone-weak: #151b23;
     --tone-wash: rgba(129, 140, 248, 0.05);
+    --tone-bg: rgba(129, 140, 248, 0.01);
     --tone-border: rgba(129, 140, 248, 0.2);
     --tone-border-strong: rgba(129, 140, 248, 0.35);
     --tone-solid: #818cf8;
@@ -468,7 +468,8 @@
     --tone-subtle: rgba(0, 0, 0, 0.04);
     --tone-soft: rgba(0, 0, 0, 0.06);
     --tone-muted: rgba(0, 0, 0, 0.1);
-    --tone-wash: rgba(0, 0, 0, 0.02);
+    --tone-wash: rgba(0, 0, 0, 0.03);
+    --tone-bg: rgba(0, 0, 0, 0.01);
     --tone-border: rgba(0, 0, 0, 0.2);
     --tone-border-strong: rgba(0, 0, 0, 0.35);
     --tone-solid: var(--ui-gray);
@@ -491,6 +492,7 @@
     --tone-soft: rgba(113, 119, 98, 0.1);
     --tone-muted: rgba(113, 119, 98, 0.15);
     --tone-wash: rgba(113, 119, 98, 0.03);
+    --tone-bg: rgba(113, 119, 98, 0.01);
     --tone-border: rgba(113, 119, 98, 0.2);
     --tone-border-strong: rgba(113, 119, 98, 0.35);
     --tone-solid: var(--ui-olive);
@@ -513,6 +515,7 @@
     --tone-soft: rgba(239, 68, 68, 0.1);
     --tone-muted: rgba(239, 68, 68, 0.15);
     --tone-wash: rgba(239, 68, 68, 0.03);
+    --tone-bg: rgba(239, 68, 68, 0.01);
     --tone-border: rgba(239, 68, 68, 0.2);
     --tone-border-strong: rgba(239, 68, 68, 0.35);
     --tone-solid: var(--ui-tomato);
@@ -535,6 +538,7 @@
     --tone-soft: rgba(244, 63, 94, 0.1);
     --tone-muted: rgba(244, 63, 94, 0.15);
     --tone-wash: rgba(244, 63, 94, 0.03);
+    --tone-bg: rgba(244, 63, 94, 0.01);
     --tone-border: rgba(244, 63, 94, 0.2);
     --tone-border-strong: rgba(244, 63, 94, 0.35);
     --tone-solid: var(--ui-ruby);
@@ -557,6 +561,7 @@
     --tone-soft: rgba(236, 72, 153, 0.1);
     --tone-muted: rgba(236, 72, 153, 0.15);
     --tone-wash: rgba(236, 72, 153, 0.03);
+    --tone-bg: rgba(236, 72, 153, 0.01);
     --tone-border: rgba(236, 72, 153, 0.2);
     --tone-border-strong: rgba(236, 72, 153, 0.35);
     --tone-solid: var(--ui-pink);
@@ -579,6 +584,7 @@
     --tone-soft: rgba(139, 92, 246, 0.1);
     --tone-muted: rgba(139, 92, 246, 0.15);
     --tone-wash: rgba(139, 92, 246, 0.03);
+    --tone-bg: rgba(139, 92, 246, 0.01);
     --tone-border: rgba(139, 92, 246, 0.2);
     --tone-border-strong: rgba(139, 92, 246, 0.35);
     --tone-solid: var(--ui-violet);
@@ -601,6 +607,7 @@
     --tone-soft: rgba(99, 102, 241, 0.1);
     --tone-muted: rgba(99, 102, 241, 0.15);
     --tone-wash: rgba(99, 102, 241, 0.03);
+    --tone-bg: rgba(99, 102, 241, 0.01);
     --tone-border: rgba(99, 102, 241, 0.2);
     --tone-border-strong: rgba(99, 102, 241, 0.35);
     --tone-solid: var(--ui-indigo);
@@ -623,6 +630,7 @@
     --tone-soft: rgba(59, 130, 246, 0.1);
     --tone-muted: rgba(59, 130, 246, 0.15);
     --tone-wash: rgba(59, 130, 246, 0.03);
+    --tone-bg: rgba(59, 130, 246, 0.01);
     --tone-border: rgba(59, 130, 246, 0.2);
     --tone-border-strong: rgba(59, 130, 246, 0.35);
     --tone-solid: var(--ui-blue);
@@ -645,6 +653,7 @@
     --tone-soft: rgba(20, 184, 166, 0.1);
     --tone-muted: rgba(20, 184, 166, 0.15);
     --tone-wash: rgba(20, 184, 166, 0.03);
+    --tone-bg: rgba(20, 184, 166, 0.01);
     --tone-border: rgba(20, 184, 166, 0.2);
     --tone-border-strong: rgba(20, 184, 166, 0.35);
     --tone-solid: var(--ui-teal);
@@ -667,6 +676,7 @@
     --tone-soft: rgba(34, 197, 94, 0.1);
     --tone-muted: rgba(34, 197, 94, 0.15);
     --tone-wash: rgba(34, 197, 94, 0.03);
+    --tone-bg: rgba(34, 197, 94, 0.01);
     --tone-border: rgba(34, 197, 94, 0.2);
     --tone-border-strong: rgba(34, 197, 94, 0.35);
     --tone-solid: var(--ui-grass);
@@ -689,6 +699,7 @@
     --tone-soft: rgba(6, 182, 212, 0.1);
     --tone-muted: rgba(6, 182, 212, 0.15);
     --tone-wash: rgba(6, 182, 212, 0.03);
+    --tone-bg: rgba(6, 182, 212, 0.01);
     --tone-border: rgba(6, 182, 212, 0.2);
     --tone-border-strong: rgba(6, 182, 212, 0.35);
     --tone-solid: var(--ui-mint);
@@ -711,6 +722,7 @@
     --tone-soft: rgba(132, 204, 22, 0.1);
     --tone-muted: rgba(132, 204, 22, 0.15);
     --tone-wash: rgba(132, 204, 22, 0.03);
+    --tone-bg: rgba(132, 204, 22, 0.01);
     --tone-border: rgba(132, 204, 22, 0.2);
     --tone-border-strong: rgba(132, 204, 22, 0.35);
     --tone-solid: var(--ui-lime);
@@ -733,6 +745,7 @@
     --tone-soft: rgba(234, 179, 8, 0.1);
     --tone-muted: rgba(234, 179, 8, 0.15);
     --tone-wash: rgba(234, 179, 8, 0.03);
+    --tone-bg: rgba(234, 179, 8, 0.01);
     --tone-border: rgba(234, 179, 8, 0.2);
     --tone-border-strong: rgba(234, 179, 8, 0.35);
     --tone-solid: var(--ui-yellow);
@@ -755,6 +768,7 @@
     --tone-soft: rgba(249, 115, 22, 0.1);
     --tone-muted: rgba(249, 115, 22, 0.15);
     --tone-wash: rgba(249, 115, 22, 0.03);
+    --tone-bg: rgba(249, 115, 22, 0.01);
     --tone-border: rgba(249, 115, 22, 0.2);
     --tone-border-strong: rgba(249, 115, 22, 0.35);
     --tone-solid: var(--ui-orange);
@@ -777,6 +791,7 @@
     --tone-soft: rgba(180, 83, 9, 0.1);
     --tone-muted: rgba(180, 83, 9, 0.15);
     --tone-wash: rgba(180, 83, 9, 0.03);
+    --tone-bg: rgba(180, 83, 9, 0.01);
     --tone-border: rgba(180, 83, 9, 0.2);
     --tone-border-strong: rgba(180, 83, 9, 0.35);
     --tone-solid: var(--ui-gold);
@@ -802,6 +817,7 @@
     --tone-soft: rgba(255, 255, 255, 0.1);
     --tone-muted: rgba(255, 255, 255, 0.15);
     --tone-wash: rgba(255, 255, 255, 0.03);
+    --tone-bg: rgba(255, 255, 255, 0.01);
     --tone-border: rgba(255, 255, 255, 0.2);
     --tone-border-strong: rgba(255, 255, 255, 0.35);
     /* --tone-solid: #e5e7eb; */
@@ -821,6 +837,7 @@
     --tone-soft: rgba(180, 188, 162, 0.15);
     --tone-muted: rgba(180, 188, 162, 0.2);
     --tone-wash: rgba(180, 188, 162, 0.05);
+    --tone-bg: rgba(180, 188, 162, 0.01);
     --tone-border: rgba(180, 188, 162, 0.2);
     --tone-border-strong: rgba(180, 188, 162, 0.35);
     /* --tone-solid: #b4bc9e; */
@@ -840,6 +857,7 @@
     --tone-soft: rgba(248, 113, 113, 0.15);
     --tone-muted: rgba(248, 113, 113, 0.2);
     --tone-wash: rgba(248, 113, 113, 0.05);
+    --tone-bg: rgba(248, 113, 113, 0.01);
     --tone-border: rgba(248, 113, 113, 0.2);
     --tone-border-strong: rgba(248, 113, 113, 0.35);
     /* --tone-solid: #f87171; */
@@ -859,6 +877,7 @@
     --tone-soft: rgba(251, 113, 133, 0.15);
     --tone-muted: rgba(251, 113, 133, 0.2);
     --tone-wash: rgba(251, 113, 133, 0.05);
+    --tone-bg: rgba(251, 113, 133, 0.01);
     --tone-border: rgba(251, 113, 133, 0.2);
     --tone-border-strong: rgba(251, 113, 133, 0.35);
     /* --tone-solid: #fb7185; */
@@ -878,6 +897,7 @@
     --tone-soft: rgba(244, 114, 182, 0.15);
     --tone-muted: rgba(244, 114, 182, 0.2);
     --tone-wash: rgba(244, 114, 182, 0.05);
+    --tone-bg: rgba(244, 114, 182, 0.01);
     --tone-border: rgba(244, 114, 182, 0.2);
     --tone-border-strong: rgba(244, 114, 182, 0.35);
     /* --tone-solid: #f472b6; */
@@ -897,6 +917,7 @@
     --tone-soft: rgba(167, 139, 250, 0.15);
     --tone-muted: rgba(167, 139, 250, 0.2);
     --tone-wash: rgba(167, 139, 250, 0.05);
+    --tone-bg: rgba(167, 139, 250, 0.01);
     --tone-border: rgba(167, 139, 250, 0.2);
     --tone-border-strong: rgba(167, 139, 250, 0.35);
     /* --tone-solid: #a78bfa; */
@@ -916,6 +937,7 @@
     --tone-soft: rgba(129, 140, 248, 0.15);
     --tone-muted: rgba(129, 140, 248, 0.2);
     --tone-wash: rgba(129, 140, 248, 0.05);
+    --tone-bg: rgba(129, 140, 248, 0.01);
     --tone-border: rgba(129, 140, 248, 0.2);
     --tone-border-strong: rgba(129, 140, 248, 0.35);
     /* --tone-solid: #818cf8; */
@@ -935,6 +957,7 @@
     --tone-soft: rgba(96, 165, 250, 0.15);
     --tone-muted: rgba(96, 165, 250, 0.2);
     --tone-wash: rgba(96, 165, 250, 0.05);
+    --tone-bg: rgba(96, 165, 250, 0.01);
     --tone-border: rgba(96, 165, 250, 0.2);
     --tone-border-strong: rgba(96, 165, 250, 0.35);
     /* --tone-solid: #60a5fa; */
@@ -954,6 +977,7 @@
     --tone-soft: rgba(45, 212, 191, 0.15);
     --tone-muted: rgba(45, 212, 191, 0.2);
     --tone-wash: rgba(45, 212, 191, 0.05);
+    --tone-bg: rgba(45, 212, 191, 0.01);
     --tone-border: rgba(45, 212, 191, 0.2);
     --tone-border-strong: rgba(45, 212, 191, 0.35);
     /* --tone-solid: #2dd4bf; */
@@ -973,6 +997,7 @@
     --tone-soft: rgba(74, 222, 128, 0.15);
     --tone-muted: rgba(74, 222, 128, 0.2);
     --tone-wash: rgba(74, 222, 128, 0.05);
+    --tone-bg: rgba(74, 222, 128, 0.01);
     --tone-border: rgba(74, 222, 128, 0.2);
     --tone-border-strong: rgba(74, 222, 128, 0.35);
     /* --tone-solid: #4ade80; */
@@ -992,6 +1017,7 @@
     --tone-soft: rgba(34, 211, 238, 0.15);
     --tone-muted: rgba(34, 211, 238, 0.2);
     --tone-wash: rgba(34, 211, 238, 0.05);
+    --tone-bg: rgba(34, 211, 238, 0.01);
     --tone-border: rgba(34, 211, 238, 0.2);
     --tone-border-strong: rgba(34, 211, 238, 0.35);
     /* --tone-solid: #22d3ee; */
@@ -1011,6 +1037,7 @@
     --tone-soft: rgba(163, 230, 53, 0.15);
     --tone-muted: rgba(163, 230, 53, 0.2);
     --tone-wash: rgba(163, 230, 53, 0.05);
+    --tone-bg: rgba(163, 230, 53, 0.01);
     --tone-border: rgba(163, 230, 53, 0.2);
     --tone-border-strong: rgba(163, 230, 53, 0.35);
     /* --tone-solid: #a3e635; */
@@ -1030,6 +1057,7 @@
     --tone-soft: rgba(250, 204, 21, 0.15);
     --tone-muted: rgba(250, 204, 21, 0.2);
     --tone-wash: rgba(250, 204, 21, 0.05);
+    --tone-bg: rgba(250, 204, 21, 0.01);
     --tone-border: rgba(250, 204, 21, 0.2);
     --tone-border-strong: rgba(250, 204, 21, 0.35);
     /* --tone-solid: #facc15; */
@@ -1049,6 +1077,7 @@
     --tone-soft: rgba(251, 146, 60, 0.15);
     --tone-muted: rgba(251, 146, 60, 0.2);
     --tone-wash: rgba(251, 146, 60, 0.05);
+    --tone-bg: rgba(251, 146, 60, 0.01);
     --tone-border: rgba(251, 146, 60, 0.2);
     --tone-border-strong: rgba(251, 146, 60, 0.35);
     /* --tone-solid: #fb923c; */
@@ -1068,6 +1097,7 @@
     --tone-soft: rgba(217, 119, 6, 0.15);
     --tone-muted: rgba(217, 119, 6, 0.2);
     --tone-wash: rgba(217, 119, 6, 0.05);
+    --tone-bg: rgba(217, 119, 6, 0.01);
     --tone-border: rgba(217, 119, 6, 0.2);
     --tone-border-strong: rgba(217, 119, 6, 0.35);
     /* --tone-solid: #d97706; */
@@ -1295,4 +1325,4 @@
     --el-height-2xl: 3.5rem;
     --el-height-3xl: 3.75rem;
   }
-}
+}

package/src/css/tokens_/345/211/257/346/234/254.css

@@ -103,8 +103,8 @@
     --ui-border-strong: rgba(0, 0, 0, 0.2);
     --ui-outline: rgba(0, 0, 0, 0.15);
     --ui-placeholder: #9ca3af;
-    --ui-disabled-bg: rgba(0, 0, 0, 0.04);
-    --ui-disabled-fg: #9ca3af;
+    --ui-bg-disabled: rgba(0, 0, 0, 0.04);
+    --ui-fg-disabled: #9ca3af;
     --ui-overlay: rgba(0, 0, 0, 0.25);
     --ui-overlay-muted: rgba(0, 0, 0, 0.0625);
     --ui-popup-bg: rgba(0, 0, 0, 0.0625);
@@ -294,8 +294,8 @@
     --ui-border-strong: rgba(148, 163, 184, 0.28);
     --ui-outline: rgba(148, 163, 184, 0.2);
     --ui-placeholder: #64748b;
-    --ui-disabled-bg: rgba(255, 255, 255, 0.04);
-    --ui-disabled-fg: #64748b;
+    --ui-bg-disabled: rgba(255, 255, 255, 0.04);
+    --ui-fg-disabled: #64748b;
     --ui-overlay: rgba(2, 6, 23, 0.7);
     --ui-overlay-muted: rgba(2, 6, 23, 0.45);
     --ui-popup-bg: rgba(17, 24, 39, 0.45);

package/src/icons/index.ts

@@ -1,11 +1,12 @@
+const err =
+  '<path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>';
 export default {
-  info: '<path d="M12 22C6.47715 22 2 17.5228 2 12 2 6.47715 6.47715 2 12 2 17.5228 2 22 6.47715 22 12 22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 10.5V15H14V17H10V15H11V12.5H10V10.5H13ZM13.5 8C13.5 8.82843 12.8284 9.5 12 9.5 11.1716 9.5 10.5 8.82843 10.5 8 10.5 7.17157 11.1716 6.5 12 6.5 12.8284 6.5 13.5 7.17157 13.5 8Z"></path>',
+  info: '<path d="M12 6C12.8284 6 13.5 5.32843 13.5 4.5C13.5 3.67157 12.8284 3 12 3C11.1716 3 10.5 3.67157 10.5 4.5C10.5 5.32843 11.1716 6 12 6ZM9 10H11V18H9V20H15V18H13V8H9V10Z"></path>',
   success:
-    '<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path>',
+    '<path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path>',
   warning:
-    '<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path>',
-  error:
-    '<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z"></path>',
+    '<path d="M13 9H21L11 24V15H4L13 0V9ZM11 11V7.22063L7.53238 13H13V17.3944L17.263 11H11Z"></path>',
+  error: err,
   'arrow-left':
     '<path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>',
   'arrow-right':
@@ -15,8 +16,7 @@ export default {
   'arrow-down':
     '<path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path>',
   more: '<path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"></path>',
-  close:
-    '<path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>',
+  close: err,
   loader:
     '<path d="M12 3C16.9706 3 21 7.02944 21 12H19C19 8.13401 15.866 5 12 5V3Z"></path>',
   menu: '<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path>',
@@ -34,4 +34,6 @@ export default {
     '<path d="M14.5998 8.00033H21C22.1046 8.00033 23 8.89576 23 10.0003V12.1047C23 12.3659 22.9488 12.6246 22.8494 12.8662L19.755 20.3811C19.6007 20.7558 19.2355 21.0003 18.8303 21.0003H2C1.44772 21.0003 1 20.5526 1 20.0003V10.0003C1 9.44804 1.44772 9.00033 2 9.00033H5.48184C5.80677 9.00033 6.11143 8.84246 6.29881 8.57701L11.7522 0.851355C11.8947 0.649486 12.1633 0.581978 12.3843 0.692483L14.1984 1.59951C15.25 2.12534 15.7931 3.31292 15.5031 4.45235L14.5998 8.00033ZM7 10.5878V19.0003H18.1606L21 12.1047V10.0003H14.5998C13.2951 10.0003 12.3398 8.77128 12.6616 7.50691L13.5649 3.95894C13.6229 3.73105 13.5143 3.49353 13.3039 3.38837L12.6428 3.0578L7.93275 9.73038C7.68285 10.0844 7.36341 10.3746 7 10.5878ZM5 11.0003H3V19.0003H5V11.0003Z"></path>',
   'thumb-down':
     '<path d="M9.40017 16H3C1.89543 16 1 15.1046 1 14V11.8957C1 11.6344 1.05118 11.3757 1.15064 11.1342L4.24501 3.61925C4.3993 3.24455 4.76447 3 5.16969 3H22C22.5523 3 23 3.44772 23 4V14C23 14.5523 22.5523 15 22 15H18.5182C18.1932 15 17.8886 15.1579 17.7012 15.4233L12.2478 23.149C12.1053 23.3508 11.8367 23.4184 11.6157 23.3078L9.80163 22.4008C8.74998 21.875 8.20687 20.6874 8.49694 19.548L9.40017 16ZM17 13.4125V5H5.83939L3 11.8957V14H9.40017C10.7049 14 11.6602 15.229 11.3384 16.4934L10.4351 20.0414C10.3771 20.2693 10.4857 20.5068 10.6961 20.612L11.3572 20.9425L16.0673 14.27C16.3172 13.9159 16.6366 13.6257 17 13.4125ZM19 13H21V5H19V13Z"></path>',
+  add: '<path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>',
+  minus: '<path d="M5 11V13H19V11H5Z"></path>',
 };

package/src/locales/index.ts

@@ -48,7 +48,9 @@ export default {
     wn: '您的浏览器版本过低，存在安全风险。请升级浏览器后再访问本站。',
     Submit: '提交',
     Reset: '重置',
-    'Loading...': '加载中...',
+    Loading: '加载中',
+    Success: '成功',
+    Error: '失败',
     'Go to previous page': '访问上一页',
     'Go to next page': '访问下一页',
     Next: '下一步',

package/src/primitives/theme.ts

@@ -73,17 +73,17 @@ type ThemeStoredConfig = Partial<Record<ThemeConfigKey, string>> & {
 };
 
 const DEFAULT_CLASS_NAMES: ThemeClassNames = {
-  panel: 'j-theme-palette',
-  title: 'theme-palette-title',
-  container: 'palette-container',
-  item: 'palette-item',
+  panel: 'j-themes',
+  title: 'theme-title',
+  container: 'theme-container',
+  item: 'theme-item',
   itemTitle: 'item-title',
   items: 'items',
-  button: 'j-button is-default',
+  button: 'j-btn is-default',
   active: 'is-active',
   prefix: 'el-prefix',
   swatch: 'item-hex',
-  buttonText: 'button-text',
+  buttonText: 'el-text',
 };
 
 const DEFAULT_OPTIONS: ThemeResolvedOptions = {
@@ -281,14 +281,11 @@ export function createTheme(options: ThemeOptions = {}): ThemeInstance {
     const groups = panelConfig || defaultPanelConfig(translate);
     const panel = jsx('div', {
       className: containerClass || className.panel,
-      'data-theme-palette': 'root',
+      'data-themes': 'root',
       children: [
         jsx('h3', {
           className: className.title,
           'data-theme-title': '',
-          style: {
-            margin: '0 0 1rem',
-          },
           children: translate('t'),
         }),
         jsx('div', {