eco-vue-js 0.14.0 → 0.14.2

package/README.md

@@ -9,21 +9,14 @@ npm i eco-vue-js
 
 ### Tailwind configuration
 
-1. Add the library's [Tailwind preset](https://tailwindcss.com/docs/presets) to your [Tailwind configuration file](https://tailwindcss.com/docs/content-configuration):
-    ```
-    import tailwindBase from 'eco-vue-js/tailwind-base'
-
-    presets: [
-      tailwindBase,
-    ]
-    ```
-
-2. Add the following lines to the `content` section in your configuration file:
-    ```
-    content: [
-      ...tailwindBase.content,
-    ]
-    ```
+Requires Tailwind CSS v4. Import the library's base after Tailwind itself in your CSS entry:
+```css
+@import "tailwindcss";
+@import "eco-vue-js/tailwind-base/base.css";
+```
+
+It brings the theme (colors, sizes, breakpoints, animations), the `w-*` utilities and the variants with
+it, and registers the library's components as a source, so no Tailwind configuration file is needed.
 
 ### Import components
 

package/dist/components/Button/WButtonMore.vue_vue_type_script_setup_true_lang.js

@@ -63,7 +63,7 @@ var WButtonMore_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 					"w-hover-circle": !__props.disabled,
 					"text-description": !isOpen.value || __props.anchor,
 					"text-primary dark:text-primary-dark": isOpen.value && !__props.anchor
-				}]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconMore_default)), { class: "square-[1.25em]" }))], 2)]),
+				}]) }, [(openBlock(), createBlock(resolveDynamicComponent(__props.icon ?? unref(IconMore_default)), { class: "square-[1.125em]" }))], 2)]),
 				content: withCtx(({ isTop, isRight, isLeft }) => [createVNode(WClickOutside_default, {
 					"no-filter": "",
 					class: normalizeClass(["bg-default dark:bg-default-dark overflow-hidden rounded-xl text-start font-normal shadow-md dark:border dark:border-solid dark:border-gray-800", {

package/dist/components/Button/WButtonTab.vue_vue_type_script_setup_true_lang.js

@@ -106,8 +106,8 @@ var WButtonTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					_: 1
 				}),
 				createVNode(Transition, {
-					"enter-active-class": "transition-[transform,opacity] origin-center duration-300",
-					"leave-active-class": "transition-[transform,opacity] origin-center duration-300",
+					"enter-active-class": "transition-[scale,opacity] origin-center duration-300",
+					"leave-active-class": "transition-[scale,opacity] origin-center duration-300",
 					"enter-from-class": "scale-x-0 opacity-0",
 					"leave-to-class": "scale-x-0 opacity-0",
 					css: !__props.indicator

package/dist/components/Checkbox/WCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -57,7 +57,7 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				class: _ctx.$attrs.class,
 				style: _ctx.$attrs.style
 			}, {
-				class: ["w-ripple-trigger w-hover-circle-trigger w-hover-circle-opacity-0.08 flex select-none gap-2 outline-none", {
+				class: ["w-ripple-trigger w-hover-circle-trigger w-hover-circle-opacity-8 flex select-none gap-2 outline-none", {
 					"cursor-progress": __props.loading || unref(isSkeleton),
 					"cursor-not-allowed opacity-70": unref(isDisabled) || unref(isSkeleton),
 					"cursor-pointer": !unref(isDisabled) && !__props.loading && !unref(isReadonly) && !unref(isSkeleton),
@@ -86,10 +86,10 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				onKeypress: withKeys(withModifiers(toggle, ["stop", "prevent"]), ["enter"])
 			}, [
 				createVNode(Transition, {
-					"enter-active-class": "transition-[opacity,transform]",
-					"leave-active-class": "transition-[opacity,transform]",
-					"enter-from-class": __props.radio ? "opacity-0 scale-[0.25]!" : "opacity-0 scale-[0.50]!",
-					"leave-to-class": __props.radio ? "opacity-0 scale-[0.25]!" : "opacity-0 scale-[0.50]!",
+					"enter-active-class": "transition-[scale,opacity]",
+					"leave-active-class": "transition-[scale,opacity]",
+					"enter-from-class": __props.radio ? "opacity-0 scale-25!" : "opacity-0 scale-50!",
+					"leave-to-class": __props.radio ? "opacity-0 scale-25!" : "opacity-0 scale-50!",
 					css: !__props.lessTransitions
 				}, {
 					default: withCtx(() => [withDirectives(createElementVNode("div", { class: normalizeClass(["square-full absolute -z-10", {
@@ -99,7 +99,7 @@ var WCheckbox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						"rounded": !__props.radio && !(__props.intermediate && __props.modelValue === null),
 						"bg-primary dark:bg-primary-dark [.w-hover-checked:hover_&]:block!": !unref(isDisabled) && !unref(isSkeleton),
 						"bg-gray-300 dark:bg-gray-700": unref(isDisabled) || unref(isSkeleton),
-						"transition-[opacity,transform]": !__props.lessTransitions
+						"transition-[scale,opacity]": !__props.lessTransitions
 					}]) }, null, 2), [[vShow, __props.modelValue !== false && !__props.loading]])]),
 					_: 1
 				}, 8, [

package/dist/components/Notify/WNotify.vue_vue_type_script_setup_true_lang.js

@@ -48,7 +48,7 @@ var WNotify_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (config) => {
 					return openBlock(), createElementBlock("div", {
 						key: config.id,
-						class: "grid justify-end transition-[opacity,transform,grid-template-rows] duration-500"
+						class: "grid justify-end transition-[translate,opacity,grid-template-rows] duration-500"
 					}, [createElementVNode("div", _hoisted_1, [createVNode(NotifyCard_default, {
 						title: config.title,
 						caption: config.caption,

package/dist/components/Tabs/WTabs.vue_vue_type_script_setup_true_lang.js

@@ -337,8 +337,8 @@ var WTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComp
 					"--direction-factor": isDirect.value ? "1" : "-1"
 				})
 			}, [createVNode(TransitionGroup, {
-				"enter-active-class": "transition-[transform,opacity] duration-250 w-full",
-				"leave-active-class": "transition-[transform,opacity] duration-250 w-full absolute top-0",
+				"enter-active-class": "transition-[translate,opacity] duration-250 w-full",
+				"leave-active-class": "transition-[translate,opacity] duration-250 w-full absolute top-0",
 				"enter-from-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor))]",
 				"leave-to-class": __props.lessTransitions || __props.side || unref(hasScrollbar) ? "opacity-0 absolute" : "opacity-0 translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor)*-1)]",
 				css: !__props.flat

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.14.0",
+  "version": "0.14.2",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",
     "@tanstack/eslint-plugin-query": "5.101.2",

package/tailwind-base/base.css

@@ -1,14 +1,12 @@
-@theme {
-  --color-*: initial;
-  --font-*: initial;
-}
+@import "./css/theme.css";
+@import "./css/breakpoints.css";
+@import "./css/animations.css";
+@import "./css/default.css";
+@import "./css/internal-variants.css";
+@import "./css/internal-variables.css";
 
 @source "../dist/components";
 
-@plugin "./index.ts";
-@plugin "./plugins/default.ts";
-@plugin "./plugins/internal-variables.ts";
-@plugin "./plugins/internal-variants.ts";
 @plugin "./plugins/internal-classes.ts";
 @plugin "./plugins/text.ts";
 @plugin "./plugins/w-ripple.ts";

package/tailwind-base/css/animations.css

@@ -0,0 +1,124 @@
+@theme {
+  --animate-ticker: ticker var(--tiker-duration, 0.8s) linear infinite;
+  --animate-ticker-rare: ticker-rare var(--tiker-duration, 10s) linear infinite;
+  --animate-move-horizontal: move-horizontal var(--tiker-duration, 0.8s) linear infinite;
+  --animate-shake: shake .6s linear infinite;
+  --animate-border-rotate: border-rotate linear infinite 10s;
+  --animate-dojo-logo-dashoffset: dojo-logo-dashoffset 1.6s linear 1;
+  --animate-spinner-dash: spinner-dash 1.6s linear infinite;
+  --animate-ping-fast: ping-big .5s cubic-bezier(0, 0, 0.2, 1);
+  --animate-ping-opacity: ping-opacity 1.2s linear infinite alternate-reverse;
+  --animate-spinner-dash-small: spinner-dash-small 1.6s linear infinite;
+
+  @keyframes ticker {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes ticker-rare {
+    0%, 45% {
+      transform: translateX(-100%);
+    }
+    55%, 100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes move-horizontal {
+    from {
+      transform: translateX(-40px);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes shake {
+    15% {
+      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+    }
+    30% {
+      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+    }
+    45% {
+      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+    }
+    60% {
+      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+    }
+    75% {
+      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+    }
+  }
+
+  @keyframes border-rotate {
+    from {
+      stroke-dashoffset: var(--border-rotate-offset-from, 25);
+    }
+    to {
+      stroke-dashoffset: var(--border-rotate-offset-to, -100%);
+    }
+  }
+
+  @keyframes dojo-logo-dashoffset {
+    from {
+      stroke-dashoffset: 0;
+    }
+    to {
+      stroke-dashoffset: 880;
+    }
+  }
+
+  @keyframes spinner-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+
+  @keyframes spinner-dash-small {
+    0% {
+      stroke-dasharray: 1, 69;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 30, 69;
+      stroke-dashoffset: -20px;
+    }
+    100% {
+      stroke-dasharray: 30, 69;
+      stroke-dashoffset: -69px;
+    }
+  }
+
+  @keyframes ping-big {
+    75%, 100% {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+
+  @keyframes ping-opacity {
+    0% {
+      opacity: 1;
+    }
+    60% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0.1;
+    }
+  }
+}

package/tailwind-base/css/breakpoints.css

@@ -0,0 +1,21 @@
+@theme {
+  --breakpoint-xs: 480px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+  --breakpoint-3xl: 1728px;
+  --breakpoint-4xl: 1920px;
+  --breakpoint-5xl: 2560px;
+}
+
+@custom-variant xs-not (@media (max-width: 479px));
+@custom-variant sm-not (@media (max-width: 639px));
+@custom-variant md-not (@media (max-width: 767px));
+@custom-variant lg-not (@media (max-width: 1023px));
+@custom-variant xl-not (@media (max-width: 1279px));
+@custom-variant 2xl-not (@media (max-width: 1535px));
+@custom-variant 3xl-not (@media (max-width: 1727px));
+@custom-variant 4xl-not (@media (max-width: 1919px));
+@custom-variant 5xl-not (@media (max-width: 2559px));

package/tailwind-base/css/default.css

@@ -0,0 +1,127 @@
+@utility square-* {
+  min-width: --spacing(--value(number));
+  max-width: --spacing(--value(number));
+  width: --spacing(--value(number));
+  height: --spacing(--value(number));
+  max-height: --spacing(--value(number));
+  min-height: --spacing(--value(number));
+
+  min-width: --value(--spacing-*, --w-size-*, [*]);
+  max-width: --value(--spacing-*, --w-size-*, [*]);
+  width: --value(--spacing-*, --w-size-*, [*]);
+  height: --value(--spacing-*, --w-size-*, [*]);
+  max-height: --value(--spacing-*, --w-size-*, [*]);
+  min-height: --value(--spacing-*, --w-size-*, [*]);
+
+  min-width: calc(--value(ratio) * 100%);
+  max-width: calc(--value(ratio) * 100%);
+  width: calc(--value(ratio) * 100%);
+  height: calc(--value(ratio) * 100%);
+  max-height: calc(--value(ratio) * 100%);
+  min-height: calc(--value(ratio) * 100%);
+}
+
+@utility width-* {
+  min-width: --spacing(--value(number));
+  max-width: --spacing(--value(number));
+  width: --spacing(--value(number));
+
+  min-width: --value(--spacing-*, --w-size-*, [*]);
+  max-width: --value(--spacing-*, --w-size-*, [*]);
+  width: --value(--spacing-*, --w-size-*, [*]);
+
+  min-width: calc(--value(ratio) * 100%);
+  max-width: calc(--value(ratio) * 100%);
+  width: calc(--value(ratio) * 100%);
+}
+
+@utility height-* {
+  min-height: --spacing(--value(number));
+  max-height: --spacing(--value(number));
+  height: --spacing(--value(number));
+
+  min-height: --value(--spacing-*, --w-size-*, [*]);
+  max-height: --value(--spacing-*, --w-size-*, [*]);
+  height: --value(--spacing-*, --w-size-*, [*]);
+
+  min-height: calc(--value(ratio) * 100%);
+  max-height: calc(--value(ratio) * 100%);
+  height: calc(--value(ratio) * 100%);
+}
+
+@utility grid-cols-fill-* {
+  grid-template-columns: repeat(auto-fill, minmax(--spacing(--value(number)), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(--value(--spacing-*, --w-size-*, [*]), 1fr));
+}
+
+@utility grid-cols-fit-* {
+  grid-template-columns: repeat(auto-fit, minmax(--spacing(--value(number)), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(--value(--spacing-*, --w-size-*, [*]), 1fr));
+}
+
+@utility stop-color-* {
+  stop-color: --value(--color-*, [color]);
+  stop-color: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  stop-color: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility scrollbar-bar-color-* {
+  --scrollbar-bar-color: --value(--color-*, [color]);
+  --scrollbar-bar-color: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --scrollbar-bar-color: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+
+  scrollbar-color: var(--scrollbar-bar-color) var(--scrollbar-gutter-color);
+}
+
+@utility scrollbar-gutter-color-* {
+  --scrollbar-gutter-color: --value(--color-*, [color]);
+  --scrollbar-gutter-color: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --scrollbar-gutter-color: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+
+  scrollbar-color: var(--scrollbar-bar-color) var(--scrollbar-gutter-color);
+}
+
+@utility scrollbar-width-* {
+  scrollbar-width: --value('auto', 'none', 'thin');
+}
+
+@utility rounded-inherit {
+  border-radius: inherit;
+}
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+}
+
+@utility overflow-y-overlay {
+  @supports (overflow: overlay) {
+    overflow-y: overlay;
+  }
+
+  @supports not (overflow: overlay) {
+    overflow-y: auto;
+  }
+}
+
+@utility overflow-x-overlay {
+  @supports (overflow: overlay) {
+    overflow-x: overlay;
+  }
+
+  @supports not (overflow: overlay) {
+    overflow-x: auto;
+  }
+}
+
+@custom-variant dark (.dark &:not(:is(.light *)));
+
+@custom-variant supports-backdrop (@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)));
+@custom-variant supports-overlay (@supports (overflow: overlay));
+@custom-variant supports-overlay-not (@supports (not (overflow: overlay)));
+@custom-variant touch (.touch &);
+@custom-variant touch-not (.touch-not &);
+@custom-variant focus-within-not (&:not(:focus-within));
+@custom-variant resizer (&::-webkit-resizer);
+@custom-variant last-not (&:not(:last-child));
+@custom-variant first-not (&:not(:first-child));
+@custom-variant not-print (@media not print);

package/tailwind-base/css/internal-variables.css

@@ -0,0 +1,279 @@
+@theme inline {
+  --w-radius-none: 0;
+  --w-radius-full: calc(infinity * 1px);
+
+  --w-svg-stroke-3xs: 0.5;
+  --w-svg-stroke-2xs: 0.75;
+  --w-svg-stroke-xs: 1;
+  --w-svg-stroke-sm: 1.25;
+  --w-svg-stroke-md: 1.5;
+}
+
+/* Colors */
+
+@utility w-has-changes-color-* {
+  --has-changes-bg: --value(--color-*, [color]);
+  --has-changes-bg: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --has-changes-bg: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-input-bg-* {
+  --w-input-bg: --value(--color-*, [color]);
+  --w-input-bg: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-input-bg: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-slider-from-* {
+  --w-slider-from: --value(--color-*, [color]);
+  --w-slider-from: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-slider-from: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-slider-to-* {
+  --w-slider-to: --value(--color-*, [color]);
+  --w-slider-to: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-slider-to: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-toggle-caret-* {
+  --w-toggle-caret: --value(--color-*, [color]);
+  --w-toggle-caret: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-toggle-caret: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-checkbox-color-* {
+  --w-checkbox-color: --value(--color-*, [color]);
+  --w-checkbox-color: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-checkbox-color: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-nav-item-dot-color-* {
+  --w-nav-item-dot-color: --value(--color-*, [color]);
+  --w-nav-item-dot-color: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-nav-item-dot-color: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-date-picker-day-* {
+  --w-date-picker-day: --value(--color-*, [color]);
+  --w-date-picker-day: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-date-picker-day: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+@utility w-list-header-bg-* {
+  --w-list-header-bg: --value(--color-*, [color]);
+  --w-list-header-bg: --alpha(--value(--color-*, [color]) / calc(--modifier(number) * 1%));
+  --w-list-header-bg: --alpha(--value(--color-*, [color]) / --modifier([percentage], [*]));
+}
+
+/* Opacity */
+
+@utility w-ripple-opacity-* {
+  --w-ripple-opacity: calc(--value(integer) * 1%);
+  --w-ripple-opacity: --value([percentage], [*]);
+}
+
+@utility w-hover-circle-opacity-* {
+  --w-hover-circle-opacity: calc(--value(integer) * 1%);
+  --w-hover-circle-opacity: --value([percentage], [*]);
+}
+
+@utility w-skeleton-opacity-* {
+  --w-skeleton-opacity: calc(--value(integer) * 1%);
+  --w-skeleton-opacity: --value([percentage], [*]);
+}
+
+/* Spacing */
+
+@utility w-skeleton-w-* {
+  --skeleton-width: --spacing(--value(number));
+  --skeleton-width: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-skeleton-h-* {
+  --skeleton-height: --spacing(--value(number));
+  --skeleton-height: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-list-card-w-* {
+  --w-list-card-width: --spacing(--value(number));
+  --w-list-card-width: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-checkbox-size-* {
+  --w-checkbox-size: --spacing(--value(number));
+  --w-checkbox-size: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-input-gap-* {
+  --w-input-gap: --spacing(--value(number));
+  --w-input-gap: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-spinner-size-* {
+  --w-spinner-size: --spacing(--value(number));
+  --w-spinner-size: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-button-spinner-size-* {
+  --w-button-spinner-size: --spacing(--value(number));
+  --w-button-spinner-size: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-modal-wrapper-p-* {
+  --w-modal-wrapper-padding: --spacing(--value(number));
+  --w-modal-wrapper-padding: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-modal-wrapper-w-* {
+  --w-modal-wrapper-width: --spacing(--value(number));
+  --w-modal-wrapper-width: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-modal-confirm-w-* {
+  --w-modal-confirm-width: --spacing(--value(number));
+  --w-modal-confirm-width: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-list-header-h-* {
+  --w-list-header-height: --spacing(--value(number));
+  --w-list-header-height: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-list-padding-* {
+  --w-list-padding: --spacing(--value(number));
+  --w-list-padding: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-list-gap-* {
+  --w-list-gap: --spacing(--value(number));
+  --w-list-gap: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-tabs-side-width-* {
+  --w-tabs-side-width: --spacing(--value(number));
+  --w-tabs-side-width: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-dropdown-x-min-* {
+  --w-dropdown-x-min: --spacing(--value(number));
+  --w-dropdown-x-min: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-dropdown-x-max-* {
+  --w-dropdown-x-max: --spacing(--value(number));
+  --w-dropdown-x-max: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-dropdown-y-min-* {
+  --w-dropdown-y-min: --spacing(--value(number));
+  --w-dropdown-y-min: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-dropdown-y-max-* {
+  --w-dropdown-y-max: --spacing(--value(number));
+  --w-dropdown-y-max: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-chart-size-* {
+  --w-chart-size: --spacing(--value(number));
+  --w-chart-size: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-chart-heatmap-size-* {
+  --w-chart-heatmap-size: --spacing(--value(number));
+  --w-chart-heatmap-size: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-chart-heatmap-gap-* {
+  --w-chart-heatmap-gap: --spacing(--value(number));
+  --w-chart-heatmap-gap: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-input-h-* {
+  --w-input-height: --spacing(--value(number));
+  --w-input-height: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-input-min-h-* {
+  --w-input-min-height: --spacing(--value(number));
+  --w-input-min-height: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-textarea-h-* {
+  --w-textarea-height: --spacing(--value(number));
+  --w-textarea-height: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-button-h-* {
+  --w-button-height: --spacing(--value(number));
+  --w-button-height: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-border-svg-padding-* {
+  --w-border-svg-padding: --spacing(--value(number));
+  --w-border-svg-padding: --value(--spacing-*, --w-size-*, [*]);
+}
+
+@utility w-input-rounded-* {
+  --w-input-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-button-rounded-* {
+  --w-button-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-skeleton-rounded-* {
+  --w-skeleton-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-ripple-rounded-* {
+  --w-ripple-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-list-rounded-* {
+  --w-list-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-option-rounded-* {
+  --w-option-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-modal-wrapper-rounded-* {
+  --w-modal-wrapper-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-list-header-rounded-* {
+  --w-list-header-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-button-action-rounded-* {
+  --w-button-action-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-border-svg-rounded-* {
+  --w-border-svg-rounded: --value(--radius-*, --w-radius-*, [*]);
+}
+
+@utility w-border-svg-stroke-* {
+  --w-border-svg-stroke-width: --value(number, [*]);
+}
+
+@utility w-button-border-* {
+  --w-button-border: calc(--value(number) * 1px);
+  --w-button-border: --value([length], [*]);
+}
+
+@utility w-svg-stroke-width-* {
+  & path {
+    stroke-width: --value(--w-svg-stroke-*, number, [*]);
+  }
+}
+
+@utility w-expansion-duration-* {
+  --expansion-duration: calc(--value(number) * 1ms);
+  --expansion-duration: --value(--duration-*, [duration], [*]);
+}
+
+@utility w-input-whitespace-* {
+  --w-input-whitespace: --value('normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces', [*]);
+}