@vuer-ai/vuer-uikit 0.0.102 → 0.0.103

package/dist/ui/theme/ThemeToggles.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunk2JV7MJIF_cjs = require('../../chunk-2JV7MJIF.cjs');
+var chunkY5SVZCPQ_cjs = require('../../chunk-Y5SVZCPQ.cjs');
 require('../../chunk-KR7VBV3B.cjs');
 require('../../chunk-WHV4VATL.cjs');
-require('../../chunk-2CZEFXEW.cjs');
+require('../../chunk-LFSCJLL2.cjs');
 require('../../chunk-HBIZQDDS.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
@@ -20,13 +20,13 @@ require('../../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunk2JV7MJIF_cjs.LiquidToggle; }
+  get: function () { return chunkY5SVZCPQ_cjs.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeColorToggle", {
   enumerable: true,
-  get: function () { return chunk2JV7MJIF_cjs.ThemeColorToggle; }
+  get: function () { return chunkY5SVZCPQ_cjs.ThemeColorToggle; }
 });
 Object.defineProperty(exports, "ThemeToggles", {
   enumerable: true,
-  get: function () { return chunk2JV7MJIF_cjs.ThemeToggles; }
+  get: function () { return chunkY5SVZCPQ_cjs.ThemeToggles; }
 });

package/dist/ui/theme/ThemeToggles.mjs

@@ -1,7 +1,7 @@
-export { LiquidToggle, ThemeColorToggle, ThemeToggles } from '../../chunk-3NSSQHRK.mjs';
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from '../../chunk-Y2H4A5AC.mjs';
 import '../../chunk-FK6ZROZE.mjs';
 import '../../chunk-5KJP6A6C.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
+import '../../chunk-5MBEK77I.mjs';
 import '../../chunk-CZ4GQOXG.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';

package/dist/ui/theme/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 require('../../chunk-LGOEGWMJ.cjs');
-var chunk2JV7MJIF_cjs = require('../../chunk-2JV7MJIF.cjs');
+var chunkY5SVZCPQ_cjs = require('../../chunk-Y5SVZCPQ.cjs');
 var chunkKR7VBV3B_cjs = require('../../chunk-KR7VBV3B.cjs');
 var chunkWHV4VATL_cjs = require('../../chunk-WHV4VATL.cjs');
-require('../../chunk-2CZEFXEW.cjs');
+require('../../chunk-LFSCJLL2.cjs');
 require('../../chunk-HBIZQDDS.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
@@ -21,15 +21,15 @@ require('../../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "LiquidToggle", {
   enumerable: true,
-  get: function () { return chunk2JV7MJIF_cjs.LiquidToggle; }
+  get: function () { return chunkY5SVZCPQ_cjs.LiquidToggle; }
 });
 Object.defineProperty(exports, "ThemeColorToggle", {
   enumerable: true,
-  get: function () { return chunk2JV7MJIF_cjs.ThemeColorToggle; }
+  get: function () { return chunkY5SVZCPQ_cjs.ThemeColorToggle; }
 });
 Object.defineProperty(exports, "ThemeToggles", {
   enumerable: true,
-  get: function () { return chunk2JV7MJIF_cjs.ThemeToggles; }
+  get: function () { return chunkY5SVZCPQ_cjs.ThemeToggles; }
 });
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,

package/dist/ui/theme/index.mjs

@@ -1,8 +1,8 @@
 import '../../chunk-6NK7UMFP.mjs';
-export { LiquidToggle, ThemeColorToggle, ThemeToggles } from '../../chunk-3NSSQHRK.mjs';
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from '../../chunk-Y2H4A5AC.mjs';
 export { ThemeProvider, computeTheme, defaultThemes, useTheme } from '../../chunk-FK6ZROZE.mjs';
 export { ThemeScript } from '../../chunk-5KJP6A6C.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
+import '../../chunk-5MBEK77I.mjs';
 import '../../chunk-CZ4GQOXG.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';

package/dist/ui/toast.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
-var chunkMCYFLR4F_cjs = require('../chunk-MCYFLR4F.cjs');
+var chunkZS7ESTKH_cjs = require('../chunk-ZS7ESTKH.cjs');
 
 
 
 Object.defineProperty(exports, "Toaster", {
   enumerable: true,
-  get: function () { return chunkMCYFLR4F_cjs.Toaster; }
+  get: function () { return chunkZS7ESTKH_cjs.Toaster; }
 });
 Object.defineProperty(exports, "toast", {
   enumerable: true,
-  get: function () { return chunkMCYFLR4F_cjs.toast; }
+  get: function () { return chunkZS7ESTKH_cjs.toast; }
 });

package/dist/ui/toast.mjs

@@ -1 +1 @@
-export { Toaster, toast } from '../chunk-EAZQH4IX.mjs';
+export { Toaster, toast } from '../chunk-EOSYXHEH.mjs';

package/dist/ui/toolbar.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3XTBLV6T_cjs = require('../chunk-3XTBLV6T.cjs');
+var chunkWZGZX3S2_cjs = require('../chunk-WZGZX3S2.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
@@ -16,13 +16,13 @@ require('../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "Toolbar", {
   enumerable: true,
-  get: function () { return chunk3XTBLV6T_cjs.Toolbar; }
+  get: function () { return chunkWZGZX3S2_cjs.Toolbar; }
 });
 Object.defineProperty(exports, "ToolbarGroup", {
   enumerable: true,
-  get: function () { return chunk3XTBLV6T_cjs.ToolbarGroup; }
+  get: function () { return chunkWZGZX3S2_cjs.ToolbarGroup; }
 });
 Object.defineProperty(exports, "ToolbarSeparator", {
   enumerable: true,
-  get: function () { return chunk3XTBLV6T_cjs.ToolbarSeparator; }
+  get: function () { return chunkWZGZX3S2_cjs.ToolbarSeparator; }
 });

package/dist/ui/toolbar.mjs

@@ -1,4 +1,4 @@
-export { Toolbar, ToolbarGroup, ToolbarSeparator } from '../chunk-KRNKB4FM.mjs';
+export { Toolbar, ToolbarGroup, ToolbarSeparator } from '../chunk-OPYMZDEZ.mjs';
 import '../chunk-F7ZHPSLA.mjs';
 import '../chunk-3QT5VABC.mjs';
 import '../chunk-XHJDRQD7.mjs';

package/dist/ui/tooltip.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2CZEFXEW_cjs = require('../chunk-2CZEFXEW.cjs');
+var chunkLFSCJLL2_cjs = require('../chunk-LFSCJLL2.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
@@ -16,17 +16,17 @@ require('../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunk2CZEFXEW_cjs.Tooltip; }
+  get: function () { return chunkLFSCJLL2_cjs.Tooltip; }
 });
 Object.defineProperty(exports, "TooltipContent", {
   enumerable: true,
-  get: function () { return chunk2CZEFXEW_cjs.TooltipContent; }
+  get: function () { return chunkLFSCJLL2_cjs.TooltipContent; }
 });
 Object.defineProperty(exports, "TooltipProvider", {
   enumerable: true,
-  get: function () { return chunk2CZEFXEW_cjs.TooltipProvider; }
+  get: function () { return chunkLFSCJLL2_cjs.TooltipProvider; }
 });
 Object.defineProperty(exports, "TooltipTrigger", {
   enumerable: true,
-  get: function () { return chunk2CZEFXEW_cjs.TooltipTrigger; }
+  get: function () { return chunkLFSCJLL2_cjs.TooltipTrigger; }
 });

package/dist/ui/tooltip.mjs

@@ -1,4 +1,4 @@
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../chunk-ZNPI2TYG.mjs';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../chunk-5MBEK77I.mjs';
 import '../chunk-F7ZHPSLA.mjs';
 import '../chunk-3QT5VABC.mjs';
 import '../chunk-XHJDRQD7.mjs';

package/dist/ui/tree-view/TreeSearchBar.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkXG56MLQH_cjs = require('../../chunk-XG56MLQH.cjs');
-require('../../chunk-2CZEFXEW.cjs');
+var chunk5JPYU5A6_cjs = require('../../chunk-5JPYU5A6.cjs');
+require('../../chunk-LFSCJLL2.cjs');
 require('../../chunk-LQGXG373.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
@@ -18,5 +18,5 @@ require('../../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "TreeSearchBar", {
   enumerable: true,
-  get: function () { return chunkXG56MLQH_cjs.TreeSearchBar; }
+  get: function () { return chunk5JPYU5A6_cjs.TreeSearchBar; }
 });

package/dist/ui/tree-view/TreeSearchBar.mjs

@@ -1,5 +1,5 @@
-export { TreeSearchBar } from '../../chunk-EI5ZOFWX.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
+export { TreeSearchBar } from '../../chunk-SUEFWFPX.mjs';
+import '../../chunk-5MBEK77I.mjs';
 import '../../chunk-LRSDE62T.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';

package/dist/ui/tree-view/index.cjs

@@ -2,10 +2,10 @@
 
 require('../../chunk-G5NT42YF.cjs');
 require('../../chunk-VOTZLQ6J.cjs');
-var chunkXG56MLQH_cjs = require('../../chunk-XG56MLQH.cjs');
+var chunk5JPYU5A6_cjs = require('../../chunk-5JPYU5A6.cjs');
 var chunkHAVTMZR3_cjs = require('../../chunk-HAVTMZR3.cjs');
 var chunkEEGQLTSQ_cjs = require('../../chunk-EEGQLTSQ.cjs');
-require('../../chunk-2CZEFXEW.cjs');
+require('../../chunk-LFSCJLL2.cjs');
 require('../../chunk-LQGXG373.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
@@ -22,7 +22,7 @@ require('../../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "TreeSearchBar", {
   enumerable: true,
-  get: function () { return chunkXG56MLQH_cjs.TreeSearchBar; }
+  get: function () { return chunk5JPYU5A6_cjs.TreeSearchBar; }
 });
 Object.defineProperty(exports, "TreeEntryItem", {
   enumerable: true,

package/dist/ui/tree-view/index.mjs

@@ -1,9 +1,9 @@
 import '../../chunk-HVVT3D2T.mjs';
 import '../../chunk-HTAFERCZ.mjs';
-export { TreeSearchBar } from '../../chunk-EI5ZOFWX.mjs';
+export { TreeSearchBar } from '../../chunk-SUEFWFPX.mjs';
 export { TreeEntryItem, TreeView } from '../../chunk-VQPJ7TLB.mjs';
 export { useTreeSearch, useTreeState } from '../../chunk-PC5DHSC4.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
+import '../../chunk-5MBEK77I.mjs';
 import '../../chunk-LRSDE62T.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';

package/dist/ui/tree-view-legacy.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkIQ5MDNCR_cjs = require('../chunk-IQ5MDNCR.cjs');
-require('../chunk-2CZEFXEW.cjs');
+var chunk2PJO5UJL_cjs = require('../chunk-2PJO5UJL.cjs');
+require('../chunk-LFSCJLL2.cjs');
 require('../chunk-LQGXG373.cjs');
 require('../chunk-JMCH2AFN.cjs');
 require('../chunk-G5JZGNKY.cjs');
@@ -21,17 +21,17 @@ require('../chunk-G4FJGNY5.cjs');
 
 Object.defineProperty(exports, "TreeEntries", {
   enumerable: true,
-  get: function () { return chunkIQ5MDNCR_cjs.TreeEntries; }
+  get: function () { return chunk2PJO5UJL_cjs.TreeEntries; }
 });
 Object.defineProperty(exports, "TreeEntryItem", {
   enumerable: true,
-  get: function () { return chunkIQ5MDNCR_cjs.TreeEntryItem; }
+  get: function () { return chunk2PJO5UJL_cjs.TreeEntryItem; }
 });
 Object.defineProperty(exports, "TreeSearchBar", {
   enumerable: true,
-  get: function () { return chunkIQ5MDNCR_cjs.TreeSearchBar; }
+  get: function () { return chunk2PJO5UJL_cjs.TreeSearchBar; }
 });
 Object.defineProperty(exports, "TreeView", {
   enumerable: true,
-  get: function () { return chunkIQ5MDNCR_cjs.TreeView; }
+  get: function () { return chunk2PJO5UJL_cjs.TreeView; }
 });

package/dist/ui/tree-view-legacy.mjs

@@ -1,5 +1,5 @@
-export { TreeEntries, TreeEntryItem, TreeSearchBar, TreeView } from '../chunk-D4DKSGER.mjs';
-import '../chunk-ZNPI2TYG.mjs';
+export { TreeEntries, TreeEntryItem, TreeSearchBar, TreeView } from '../chunk-QZUTRJSP.mjs';
+import '../chunk-5MBEK77I.mjs';
 import '../chunk-LRSDE62T.mjs';
 import '../chunk-BNDRHLLZ.mjs';
 import '../chunk-PDOFOJ4P.mjs';

package/dist/ui/waterfall/NavigationControls.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkLP3AGGRK_cjs = require('../../chunk-LP3AGGRK.cjs');
+var chunkUTS56UA5_cjs = require('../../chunk-UTS56UA5.cjs');
 require('../../chunk-G2ZYONQO.cjs');
 
 
 
 Object.defineProperty(exports, "NavigationControls", {
   enumerable: true,
-  get: function () { return chunkLP3AGGRK_cjs.NavigationControls; }
+  get: function () { return chunkUTS56UA5_cjs.NavigationControls; }
 });

package/dist/ui/waterfall/NavigationControls.mjs

@@ -1,2 +1,2 @@
-export { NavigationControls } from '../../chunk-5EXV5EWF.mjs';
+export { NavigationControls } from '../../chunk-D5H4XX6Q.mjs';
 import '../../chunk-4U232QAX.mjs';

package/dist/ui/waterfall/Tick.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunk6TSA7KXX_cjs = require('../../chunk-6TSA7KXX.cjs');
+var chunkJWVH6R35_cjs = require('../../chunk-JWVH6R35.cjs');
 
 
 
 Object.defineProperty(exports, "Tick", {
   enumerable: true,
-  get: function () { return chunk6TSA7KXX_cjs.Tick; }
+  get: function () { return chunkJWVH6R35_cjs.Tick; }
 });

package/dist/ui/waterfall/Tick.mjs

@@ -1 +1 @@
-export { Tick } from '../../chunk-K22BEXUA.mjs';
+export { Tick } from '../../chunk-JVV7W3TP.mjs';

package/dist/ui/waterfall/index.cjs

@@ -1,24 +1,24 @@
 'use strict';
 
-var chunkJMFTHHHE_cjs = require('../../chunk-JMFTHHHE.cjs');
+var chunk5SP25SO3_cjs = require('../../chunk-5SP25SO3.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
 require('../../chunk-5MNZYCN2.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
+require('../../chunk-G5NT42YF.cjs');
+require('../../chunk-VOTZLQ6J.cjs');
 require('../../chunk-2J75MYQA.cjs');
-require('../../chunk-LP3AGGRK.cjs');
-require('../../chunk-6TSA7KXX.cjs');
+require('../../chunk-UTS56UA5.cjs');
+require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
 require('../../chunk-TUYG6BYZ.cjs');
 require('../../chunk-YXFHJKNW.cjs');
 var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
-require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-VOTZLQ6J.cjs');
-require('../../chunk-XG56MLQH.cjs');
+require('../../chunk-5JPYU5A6.cjs');
 require('../../chunk-HAVTMZR3.cjs');
 require('../../chunk-EEGQLTSQ.cjs');
-require('../../chunk-2CZEFXEW.cjs');
+require('../../chunk-LFSCJLL2.cjs');
 require('../../chunk-LQGXG373.cjs');
 require('../../chunk-JMCH2AFN.cjs');
 require('../../chunk-G5JZGNKY.cjs');
@@ -38,7 +38,7 @@ require('../../chunk-G4FJGNY5.cjs');
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunkJMFTHHHE_cjs.Waterfall; }
+  get: function () { return chunk5SP25SO3_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,22 +1,22 @@
-export { Waterfall } from '../../chunk-7P563TWH.mjs';
+export { Waterfall } from '../../chunk-YHY6SXVJ.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
 import '../../chunk-IR334P7F.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
+import '../../chunk-HVVT3D2T.mjs';
+import '../../chunk-HTAFERCZ.mjs';
 import '../../chunk-SA5WKLYB.mjs';
-import '../../chunk-5EXV5EWF.mjs';
-import '../../chunk-K22BEXUA.mjs';
+import '../../chunk-D5H4XX6Q.mjs';
+import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
 import '../../chunk-N6DSPSMM.mjs';
 import '../../chunk-CO6EASQO.mjs';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
-import '../../chunk-HVVT3D2T.mjs';
-import '../../chunk-HTAFERCZ.mjs';
-import '../../chunk-EI5ZOFWX.mjs';
+import '../../chunk-SUEFWFPX.mjs';
 import '../../chunk-VQPJ7TLB.mjs';
 import '../../chunk-PC5DHSC4.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
+import '../../chunk-5MBEK77I.mjs';
 import '../../chunk-LRSDE62T.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
 import '../../chunk-PDOFOJ4P.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "files": [
     "/dist",
     "/src"

package/src/dial/DialPanel.tsx

@@ -65,7 +65,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
   const renderSchemaInput = (schema: DialSchema) => {
     const { name, dtype, min, max, step, options, tags } = schema;
     const labelPosition = tags?.labelPosition as LabelPositionT;
-    const label = name.charAt(0).toUpperCase() + name.slice(1);
+    const label = schema.label || (name.charAt(0).toUpperCase() + name.slice(1));
 
     // Choose the right input component based on dtype
     switch (dtype) {

package/src/dial/DialProvider.tsx

@@ -23,6 +23,7 @@ export interface DialSchema {
   steps?: number[];
   helpText?: string;
   icon?: string;
+  label?: string;
   tags?: {
     grouping?: string;
     col?: boolean | number;

package/src/styles/theme.css

@@ -1,60 +1,107 @@
 @import "./variables.css";
 
+@custom-variant liquid-dark (&:is(.liquid-dark *));
+@custom-variant liquid-light (&:is(.liquid-light *));
 @custom-variant liquid (&:is(.liquid-dark *, .liquid-light *));
 
-@utility liquid-bg {
+@utility liquid-dark-bg {
   background: linear-gradient(
     147.1deg,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 105.28%
+    rgba(50, 50, 50, 0.6) 0%,
+    rgba(70, 70, 70, 0.6) 105.28%
   ) !important;
   backdrop-filter: blur(20px) !important;
 }
 
-@utility liquid-bg-tooltip-arrow {
-  background: rgba(74, 74, 74, 0.1) !important;
-  backdrop-filter: blur(2px) !important;
+@utility liquid-light-bg {
+  background: linear-gradient(
+    147.1deg,
+    rgba(236, 236, 236, 0.6) 0%,
+    rgba(202, 202, 202, 0.6) 105.28%
+  ) !important;
+  backdrop-filter: blur(20px) !important;
+}
+
+@utility liquid-dark-bg-tooltip-arrow {
+  background: rgba(70, 70, 70, 0.8) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-arrow {
+  background: rgba(202, 202, 202, 0.8) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-content {
-  background: rgba(74, 74, 74, 0.1) !important;
-  backdrop-filter: blur(2px) !important;
+@utility liquid-dark-bg-tooltip-top {
+  background: linear-gradient(
+    to bottom,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-top {
+@utility liquid-light-bg-tooltip-top {
   background: linear-gradient(
     to bottom,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-bottom {
+@utility liquid-dark-bg-tooltip-bottom {
   background: linear-gradient(
     to top,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-left {
+@utility liquid-light-bg-tooltip-bottom {
+  background: linear-gradient(
+    to top,
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-dark-bg-tooltip-left {
+  background: linear-gradient(
+    to right,
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-left {
   background: linear-gradient(
     to right,
-    rgba(172, 172, 172, 0.1) 0%,
-    rgba(74, 74, 74, 0.1) 100%
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
-@utility liquid-bg-tooltip-right {
+@utility liquid-dark-bg-tooltip-right {
   background: linear-gradient(
     to left,
-    rgba(172, 172, 172, 0.1),
-    rgba(74, 74, 74, 0.1)
+    rgba(50, 50, 50, 0.8) 0%,
+    rgba(70, 70, 70, 0.8) 100%
   ) !important;
-  backdrop-filter: blur(2px) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+@utility liquid-light-bg-tooltip-right {
+  background: linear-gradient(
+    to left,
+    rgba(236, 236, 236, 0.8) 0%,
+    rgba(202, 202, 202, 0.8) 100%
+  ) !important;
+  backdrop-filter: blur(4px) !important;
 }
 
 @utility scrollbar-hide {
@@ -70,7 +117,7 @@
   &::-webkit-scrollbar-track {
     background: transparent;
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: var(--bg-tertiary);
     border-radius: 4px;
@@ -123,8 +170,8 @@
   --radius-uk-lg: calc(var(--radius) + 10px); /* 12px */
   --radius-uk-xl: calc(var(--radius) + 13px); /* 16px */
   /* spacing */
-  --spacing-xxs: calc(var(--spacing) - 2px); /* 2px */
-  --spacing-xs: var(--spacing); /* 4px */
+  --spacing-xxs: calc(var(--spacing) - 3px); /* 2px */
+  --spacing-xs: calc(var(--spacing) - 1px); /* 4px */
   --spacing-sm: calc(var(--spacing) + 2px); /* 6px */
   --spacing-md: calc(var(--spacing) + 4px); /* 8px */
   --spacing-lg: calc(var(--spacing) + 9px); /* 12px */

package/src/ui/badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
     "px-md",
     "py-xxs",
     "align-middle",
-    "text-uk-sm",
+    "text-xs",
     "leading-uk-sm",
     "w-fit",
     "whitespace-nowrap",

package/src/ui/card.tsx

@@ -13,7 +13,8 @@ const cardVariants = cva(
     "rounded-uk-lg",
     "bg-bg-primary",
     "liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-    "liquid:liquid-bg",
+    "liquid-dark:liquid-dark-bg",
+    "liquid-light:liquid-light-bg",
   ],
   {
     variants: {

package/src/ui/drawer.tsx

@@ -64,7 +64,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content bg-bg-primary liquid:liquid-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+          "group/drawer-content bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh]",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:pt-0",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[340px]",

package/src/ui/dropdown.tsx

@@ -54,7 +54,8 @@ function DropdownMenuContent({
             "overflow-y-auto",
             "rounded-uk-md",
             "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-            "liquid:liquid-bg",
+            "liquid-dark:liquid-dark-bg",
+            "liquid-light:liquid-light-bg",
           ],
           className,
         )}
@@ -335,7 +336,8 @@ function DropdownMenuSubContent({
         "overflow-y-auto",
         "rounded-uk-md",
         "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        "liquid:liquid-bg",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-light:liquid-light-bg",
         className,
       )}
       {...props}