vanilla-jui 1.7.28 → 1.7.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.28",
+  "version": "1.7.30",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/css/themes/default/badge.css

@@ -1,6 +1,6 @@
 @layer components {
   .j-badge {
-    --badge-padding: 0 calc(var(--space) * 1.5);
+    --badge-padding: 0 var(--s1d5);
     --badge-min-width: 1.25rem;
     --badge-height: 1.25rem;
     --badge-font-size: var(--font-size-sm);

package/src/css/themes/default/form.css

@@ -55,7 +55,7 @@
   }
 
   .j-input:not([type='checkbox']) {
-    --input-padding: calc(var(--space) * 1.5) var(--s2);
+    --input-padding: var(--s1d5) var(--s2);
     --input-height: var(--el-height-md);
     --input-line-height: var(--line-height);
 
@@ -246,7 +246,7 @@
   .j-radio.is-group label span.radio-text {
     color: var(--ui-fg);
     background-color: var(--ui-bg);
-    padding: var(--radio-group-padding, calc(var(--space) * 1.5) var(--s3));
+    padding: var(--radio-group-padding, var(--s1d5) var(--s3));
     height: var(--el-height-md);
     line-height: var(--line-height);
     box-shadow: 0 0 0 1px var(--ui-input-border);
@@ -288,7 +288,7 @@
   }
 
   .j-radio.is-group.is-sm label span.radio-text {
-    --radio-group-padding: var(--space) calc(var(--space) * 2.5);
+    --radio-group-padding: var(--space) var(--s2d5);
     height: var(--el-height-sm);
   }
 
@@ -297,7 +297,7 @@
   }
 
   .j-radio.is-group.is-lg label span.radio-text {
-    --radio-group-padding: var(--s3) calc(var(--space) * 3.5);
+    --radio-group-padding: var(--s3) var(--s3d5);
     height: var(--el-height-lg);
   }
 
@@ -320,7 +320,7 @@
   .j-checkbox label {
     display: flex;
     align-items: center;
-    gap: calc(var(--space) * 1.5);
+    gap: var(--s1d5);
     font-size: var(--font-size-md);
     height: var(--el-height-md);
     padding: var(--s2);
@@ -458,7 +458,7 @@
 
   /* select */
   select.j-select {
-    --input-padding: calc(var(--space) * 1.5);
+    --input-padding: var(--s1d5);
     --input-height: var(--el-height-md);
     --input-font-size: var(--font-size-md);
 

package/src/css/themes/default/menu.css

@@ -200,7 +200,7 @@
   }
 
   .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
-    padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
+    padding: calc(var(--space) * 1.25) var(--s2d5);
     line-height: 1.75;
   }
 

package/src/css/themes/default/swiper.css

@@ -42,11 +42,9 @@
     color: var(--ui-fg-soft);
     font-size: var(--font-size-md);
     background-color: var(--tone-wash);
-    background-image: radial-gradient(
-      circle,
-      var(--ui-border) 1px,
-      transparent 1px
-    );
+    background-image: radial-gradient(circle,
+        var(--ui-border) 1px,
+        transparent 1px);
     background-size: 20px 20px;
 
     position: absolute;
@@ -79,7 +77,7 @@
     right: var(--swiper-title-inset);
     bottom: var(--swiper-title-inset);
     left: var(--swiper-title-inset);
-    padding: calc(var(--space) * 1.5) var(--s2);
+    padding: var(--s1d5) var(--s2);
     color: #fff;
     font-size: var(--swiper-title-font-size);
     font-weight: var(--font-bold);
@@ -194,4 +192,4 @@
       --swiper-navigation-size: 32px;
     }
   }
-}
+}

package/src/css/tokens.css

@@ -18,8 +18,11 @@
 
     /* --- 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;
@@ -305,50 +308,50 @@
     --ui-tooltip-fg: #f8fafc;
 
     /* --- Fixed Theme Colors (15 themes) --- */
-    --ui-gray: #e5e7eb;
-    --ui-gray-tint: #f3f4f6;
+    --ui-gray: #d1d5db;
+    --ui-gray-tint: #e5e7eb;
     --ui-gray-shade: #9ca3af;
-    --ui-olive: #d4d9cc;
-    --ui-olive-tint: #e5e7db;
-    --ui-olive-shade: #a8b092;
-    --ui-tomato: #fca5a5;
-    --ui-tomato-tint: #fecaca;
-    --ui-tomato-shade: #f87171;
-    --ui-ruby: #fda4af;
-    --ui-ruby-tint: #fecdd3;
-    --ui-ruby-shade: #fb7185;
-    --ui-pink: #f9a8d4;
-    --ui-pink-tint: #fbcfe8;
-    --ui-pink-shade: #f472b6;
-    --ui-violet: #c4b5fd;
-    --ui-violet-tint: #ddd6fe;
-    --ui-violet-shade: #a78bfa;
-    --ui-indigo: #a5b4fc;
-    --ui-indigo-tint: #c7d2fe;
-    --ui-indigo-shade: #818cf8;
-    --ui-blue: #93c5fd;
-    --ui-blue-tint: #bfdbfe;
-    --ui-blue-shade: #60a5fa;
-    --ui-teal: #5eead4;
-    --ui-teal-tint: #99f6e4;
-    --ui-teal-shade: #2dd4bf;
-    --ui-grass: #86efac;
-    --ui-grass-tint: #bbf7d0;
-    --ui-grass-shade: #4ade80;
-    --ui-mint: #67e8f9;
-    --ui-mint-tint: #a5f3fc;
-    --ui-mint-shade: #22d3ee;
-    --ui-lime: #bef264;
-    --ui-lime-tint: #d9f99d;
-    --ui-lime-shade: #a3e635;
-    --ui-yellow: #fde047;
-    --ui-yellow-tint: #fef08a;
-    --ui-yellow-shade: #facc15;
-    --ui-orange: #fdba74;
-    --ui-orange-tint: #fed7aa;
-    --ui-orange-shade: #fb923c;
-    --ui-gold: #fbbf24;
-    --ui-gold-tint: #fcd34d;
+    --ui-olive: #a8b092;
+    --ui-olive-tint: #c2c9b3;
+    --ui-olive-shade: #8a927d;
+    --ui-tomato: #f87171;
+    --ui-tomato-tint: #fca5a5;
+    --ui-tomato-shade: #ef4444;
+    --ui-ruby: #fb7185;
+    --ui-ruby-tint: #fda4af;
+    --ui-ruby-shade: #f43f5e;
+    --ui-pink: #f472b6;
+    --ui-pink-tint: #f9a8d4;
+    --ui-pink-shade: #ec4899;
+    --ui-violet: #a78bfa;
+    --ui-violet-tint: #c4b5fd;
+    --ui-violet-shade: #8b5cf6;
+    --ui-indigo: #818cf8;
+    --ui-indigo-tint: #a5b4fc;
+    --ui-indigo-shade: #6366f1;
+    --ui-blue: #60a5fa;
+    --ui-blue-tint: #93c5fd;
+    --ui-blue-shade: #3b82f6;
+    --ui-teal: #2dd4bf;
+    --ui-teal-tint: #5eead4;
+    --ui-teal-shade: #14b8a6;
+    --ui-grass: #4ade80;
+    --ui-grass-tint: #86efac;
+    --ui-grass-shade: #22c55e;
+    --ui-mint: #22d3ee;
+    --ui-mint-tint: #67e8f9;
+    --ui-mint-shade: #06b6d4;
+    --ui-lime: #a3e635;
+    --ui-lime-tint: #bef264;
+    --ui-lime-shade: #84cc16;
+    --ui-yellow: #facc15;
+    --ui-yellow-tint: #fde047;
+    --ui-yellow-shade: #eab308;
+    --ui-orange: #fb923c;
+    --ui-orange-tint: #fdba74;
+    --ui-orange-shade: #f97316;
+    --ui-gold: #f59e0b;
+    --ui-gold-tint: #fbbf24;
     --ui-gold-shade: #d97706;
 
     /* Theme Color (default indigo) */
@@ -1292,4 +1295,4 @@
     --el-height-2xl: 3.5rem;
     --el-height-3xl: 3.75rem;
   }
-}
+}