diff --git a/.envrc b/.envrc
new file mode 100644
index 00000000000..9c276bb5c05
--- /dev/null
+++ b/.envrc
@@ -0,0 +1,2 @@
+type nvm >/dev/null 2>&1 || . "$NVM_DIR/nvm.sh"
+nvm use
diff --git a/.ws-context b/.ws-context
new file mode 100644
index 00000000000..0cb81960dcf
--- /dev/null
+++ b/.ws-context
@@ -0,0 +1,3 @@
+{
+  "framework": "vue"
+}
diff --git a/packages/ui/build/configs/vite.web-components.ts b/packages/ui/build/configs/vite.web-components.ts
index f8ca404f3d3..1b194b73d95 100644
--- a/packages/ui/build/configs/vite.web-components.ts
+++ b/packages/ui/build/configs/vite.web-components.ts
@@ -5,6 +5,7 @@ import { chunkSplitPlugin } from 'vite-plugin-chunk-split'
 import { removeSideEffectedChunks } from '../plugins/remove-side-effected-chunks'
 import { webComponentsNestedStyles } from '../plugins/web-components-nested-styles'
 import { readFileSync } from 'fs'
+import { resolve } from '../common-config'
 
 /**
  * Build web components folder. It is a separated build of vuestic-ui for SPA-only (?: maybe for SPA-only).
@@ -19,6 +20,7 @@ const packageJSON = JSON.parse(readFileSync(resolver(process.cwd(), './package.j
 const dependencies = [...Object.keys(packageJSON.dependencies), ...Object.keys(packageJSON.peerDependencies)]
 
 export default () => defineConfig({
+  resolve,
   build: {
     lib: {
       entry: resolver(process.cwd(), 'src/main.ts'),
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e62d534ab84..df2847d8846 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -167,4 +167,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/ui/src/components/va-avatar-group/VaAvatarGroup.stories.ts b/packages/ui/src/components/va-avatar-group/VaAvatarGroup.stories.ts
index c6670ffaa85..071a93de2c3 100644
--- a/packages/ui/src/components/va-avatar-group/VaAvatarGroup.stories.ts
+++ b/packages/ui/src/components/va-avatar-group/VaAvatarGroup.stories.ts
@@ -1,5 +1,4 @@
 import { VaAvatarGroup } from './'
-import { addText } from '../../../.storybook/interaction-utils/addText'
 
 export default {
   title: 'VaAvatarGroup',
diff --git a/packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue b/packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue
index 85866150c6d..70ffe4a14c5 100644
--- a/packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue
+++ b/packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue
@@ -28,9 +28,9 @@ import { computed, PropType } from 'vue'
 
 import { VaAvatar } from '../va-avatar'
 
-import pick from 'lodash/pick.js'
+import pick from 'lodash/pick'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
-import { useBem, useComponentPresetProp, useSize, useSizeProps } from '../../composables'
+import { useBem, useComponentPresetProp } from '../../composables'
 
 const VaAvatarProps = extractComponentProps(VaAvatar)
 </script>
@@ -42,7 +42,6 @@ defineOptions({
 })
 
 const props = defineProps({
-  ...useSizeProps,
   ...useComponentPresetProp,
   ...VaAvatarProps,
 
@@ -77,14 +76,8 @@ const restOptionsCount = computed(() => {
 
   return hasOptions && canAddMoreOptions ? remainingOptions : 0
 })
-const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatarGroup')
 
-const filteredAvatarProps = filterComponentProps(VaAvatarProps)
-const avatarProps = computed(() => ({
-  ...filteredAvatarProps.value,
-  fontSize: fontSizeComputed.value,
-  size: sizeComputed.value,
-}))
+const avatarProps = filterComponentProps(VaAvatarProps)
 </script>
 
 <style lang="scss">
diff --git a/packages/ui/src/components/va-avatar/VaAvatar.stories.ts b/packages/ui/src/components/va-avatar/VaAvatar.stories.ts
index 5fd3942d945..def585b37f5 100644
--- a/packages/ui/src/components/va-avatar/VaAvatar.stories.ts
+++ b/packages/ui/src/components/va-avatar/VaAvatar.stories.ts
@@ -1,5 +1,6 @@
 import { VaAvatar } from './'
 import { h } from 'vue'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaAvatar',
@@ -58,32 +59,40 @@ export const Size = () => ({
   `,
 })
 
-export const SizesConfig = () => ({
+const sizesConfig = { small: { variables: { size: '16px' } }, medium: { variables: { size: '24px' } }, large: { variables: { size: '32px' } } }
+
+export const SizesConfig: StoryFn<typeof VaAvatar> = (args) => ({
   components: { VaAvatar },
+  setup () {
+    return { args }
+  },
   template: `
     [small: 16px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="small"
     >
       Text
     </VaAvatar>
     [medium: 24px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="medium"
     >
       Text
     </VaAvatar>
     [large: 32px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="large"
     >
       Text
     </VaAvatar>
   `,
 })
+SizesConfig.args = {
+  sizesConfig,
+}
 
 export const FontSize = () => ({
   components: { VaAvatar },
diff --git a/packages/ui/src/components/va-avatar/VaAvatar.vue b/packages/ui/src/components/va-avatar/VaAvatar.vue
index ac359a17e48..ce02b81fa8e 100644
--- a/packages/ui/src/components/va-avatar/VaAvatar.vue
+++ b/packages/ui/src/components/va-avatar/VaAvatar.vue
@@ -6,7 +6,7 @@
   >
     <va-progress-circle
       v-if="$props.loading"
-      :size="sizeComputed"
+      :size="props.size"
       :color="colorComputed"
       indeterminate
     />
@@ -37,7 +37,6 @@ import pick from 'lodash/pick'
 
 import {
   useBem,
-  useSize,
   useColors,
   useTextColor,
   useSizeProps,
@@ -48,6 +47,9 @@ import { extractComponentProps, filterComponentProps } from '../../utils/compone
 
 import { VaIcon, VaProgressCircle, VaFallback } from '../index'
 
+import { useComponentVariables } from '../../composables/useComponentVariables'
+import { variables } from './const'
+
 const VaFallbackPropsDeclaration = extractComponentProps(VaFallback)
 </script>
 
@@ -83,11 +85,14 @@ const backgroundColorComputed = computed(() => {
 
   return colorComputed.value
 })
-const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatar')
+
 const { textColorComputed } = useTextColor(backgroundColorComputed)
 
+const variablesComputed = useComponentVariables(variables, props)
+
 const computedStyle = computed(() => ({
-  fontSize: props.fontSize || fontSizeComputed.value,
+  ...variablesComputed.value,
+  fontSize: props.fontSize,
 }))
 
 const classesComputed = useBem('va-avatar', () => ({
@@ -121,20 +126,21 @@ defineExpose({
 @import "variables";
 
 .va-avatar {
-  align-items: var(--va-avatar-align-items);
-  display: var(--va-avatar-display);
-  justify-content: var(--va-avatar-justify-content);
-  line-height: var(--va-avatar-line-height);
-  position: var(--va-avatar-position);
-  text-align: var(--va-avatar-text-align);
-  vertical-align: var(--va-avatar-vertical-align);
-  border-radius: var(--va-avatar-border-radius);
+  align-items: var(--va-avatar-align-items-current);
+  display: var(--va-avatar-display-current);
+  justify-content: var(--va-avatar-justify-content-current);
+  line-height: var(--va-avatar-line-height-current);
+  position: var(--va-avatar-position-current);
+  text-align: var(--va-avatar-text-align-current);
+  vertical-align: var(--va-avatar-vertical-align-current);
+  border-radius: var(--va-avatar-border-radius-current);
   font-family: var(--va-font-family);
   background-color: v-bind(backgroundColorComputed);
   color: v-bind(textColorComputed);
-  width: v-bind(sizeComputed);
-  min-width: v-bind(sizeComputed);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
-  height: v-bind(sizeComputed);
+  width: var(--va-avatar-size-current);
+  min-width: var(--va-avatar-size-current);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
+  height: var(--va-avatar-size-current);
+  font-size: var(--va-avatar-font-size-current);
 
   &--square {
     --va-avatar-border-radius: 0;
diff --git a/packages/ui/src/components/va-avatar/_variables.scss b/packages/ui/src/components/va-avatar/_variables.scss
index 58a2ce0e873..cbe8fbe814b 100644
--- a/packages/ui/src/components/va-avatar/_variables.scss
+++ b/packages/ui/src/components/va-avatar/_variables.scss
@@ -9,4 +9,13 @@
   --va-avatar-position: relative;
   --va-avatar-line-height: normal;
   --va-avatar-border-radius: 50%;
+
+  /* Small */
+  --va-avatar-small-size: 32px;
+
+  /* Medium */
+  --va-avatar-size: 48px;
+
+  /* Large */
+  --va-avatar-large-size: 64px;
 }
diff --git a/packages/ui/src/components/va-avatar/const.ts b/packages/ui/src/components/va-avatar/const.ts
new file mode 100644
index 00000000000..69526f56fd7
--- /dev/null
+++ b/packages/ui/src/components/va-avatar/const.ts
@@ -0,0 +1,12 @@
+export const variables = [
+  'display',
+  'justifyContent',
+  'alignItems',
+  'textAlign',
+  'verticalAlign',
+  'position',
+  'lineHeight',
+  'borderRadius',
+  'size',
+  'fontSize',
+] as const
diff --git a/packages/ui/src/components/va-button/VaButton.demo.vue b/packages/ui/src/components/va-button/VaButton.demo.vue
index f644064a811..48c7f2f77e0 100644
--- a/packages/ui/src/components/va-button/VaButton.demo.vue
+++ b/packages/ui/src/components/va-button/VaButton.demo.vue
@@ -92,6 +92,7 @@
             <va-button size="small" preset="secondary">Secondary</va-button>
             <va-button size="small" preset="plain">Plain</va-button>
             <va-button size="small" preset="plainOpacity">Plain with opacity</va-button>
+            <va-button size="small" loading />
           </td>
         </tr>
 
@@ -103,6 +104,7 @@
             <va-button size="large" preset="secondary">Secondary</va-button>
             <va-button size="large" preset="plain">Plain</va-button>
             <va-button size="large" preset="plainOpacity">Plain with opacity</va-button>
+            <va-button size="large" loading />
           </td>
         </tr>
 
diff --git a/packages/ui/src/components/va-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
index ee8ede48896..f549d4d5028 100644
--- a/packages/ui/src/components/va-button/VaButton.vue
+++ b/packages/ui/src/components/va-button/VaButton.vue
@@ -33,35 +33,42 @@
       </slot>
     </span>
     <template v-if="loading">
-      <slot name="loading" v-bind="{
-        size: iconSizeComputed,
-        color: textColorComputed,
-      }">
+      <slot
+        name="loading"
+        v-bind="{
+          size: props.size,
+          color: textColorComputed,
+        }"
+      >
         <va-progress-circle
           class="va-button__loader"
-          :size="iconSizeComputed"
+          :size="props.size"
           :color="textColorComputed"
           :thickness="0.15"
           indeterminate
         />
       </slot>
-      </template>
+    </template>
   </component>
 </template>
 
 <script lang="ts" setup>
 import { PropType, computed, toRefs, shallowRef } from 'vue'
-import pick from 'lodash/pick.js'
+import pick from 'lodash/pick'
 
 import {
   useBem,
   useFocus,
-  useHover, useHoverStyleProps,
-  usePressed, usePressedStyleProps,
-  useColors, useTextColor,
+  useHover,
+  useHoverStyleProps,
+  usePressed,
+  usePressedStyleProps,
+  useColors,
+  useTextColor,
   useLoadingProps,
-  useSize, useSizeProps,
-  useRouterLink, useRouterLinkProps,
+  useSizeProps,
+  useRouterLink,
+  useRouterLinkProps,
   useComponentPresetProp,
   useSlotPassed,
 } from '../../composables'
@@ -72,6 +79,8 @@ import { useButtonTextColor } from './hooks/useButtonTextColor'
 
 import { VaIcon } from '../va-icon'
 import { VaProgressCircle } from '../va-progress-circle'
+import { useComponentVariables } from '../../composables/useComponentVariables'
+import { variables } from './const'
 
 defineOptions({
   name: 'VaButton',
@@ -95,16 +104,14 @@ const props = defineProps({
   backgroundOpacity: { type: Number, default: 1 },
   borderColor: { type: String, default: '' },
 
-    // only for filled bg state
+  // only for filled bg state
   gradient: { type: Boolean, default: false },
   plain: { type: Boolean, default: false },
   round: { type: Boolean, default: false },
   size: {
-    type: String as PropType<'small' | 'medium' | 'large'>,
+    type: [String, Number] as PropType<'small' | 'medium' | 'large' | string | number>,
     default: 'medium',
-    validator: (v: string) => ['small', 'medium', 'large'].includes(v),
   },
-
   icon: { type: String, default: '' },
   iconRight: { type: String, default: '' },
   iconColor: { type: String, default: '' },
@@ -114,13 +121,6 @@ const props = defineProps({
 const { getColor } = useColors()
 const colorComputed = computed(() => getColor(props.color))
 
-// loader size
-const { sizeComputed } = useSize(props)
-const iconSizeComputed = computed(() => {
-  const size = /([0-9]*)(px)/.exec(sizeComputed.value) as null | [string, string, string]
-  return size ? `${+size[1] / 2}${size[2]}` : sizeComputed.value
-})
-
 // attributes
 const { tagComputed } = useRouterLink(props)
 const attributesComputed = useButtonAttributes(props)
@@ -133,24 +133,29 @@ const { isHovered } = useHover(button, disabled)
 const { isPressed } = usePressed(button)
 
 // icon attributes
-const iconColorComputed = computed(() => props.iconColor ? getColor(props.iconColor) : textColorComputed.value)
+const iconColorComputed = computed(() =>
+  props.iconColor ? getColor(props.iconColor) : textColorComputed.value,
+)
 const iconAttributesComputed = computed(() => ({
   color: iconColorComputed.value,
   size: props.size,
 }))
 
 // classes
-const wrapperClassComputed = computed(() => ({ 'va-button__content--loading': props.loading }))
+const wrapperClassComputed = computed(() => ({
+  'va-button__content--loading': props.loading,
+}))
 
 const isSlotContentPassed = useSlotPassed()
 
-const isOneIcon = computed(() => !!((props.iconRight && !props.icon) || (!props.iconRight && props.icon)))
-const isOnlyIcon = computed(() => !isSlotContentPassed.value && isOneIcon.value)
+const isOneIcon = computed(
+  () => !!((props.iconRight && !props.icon) || (!props.iconRight && props.icon)),
+)
+const isOnlyIcon = computed(
+  () => !isSlotContentPassed.value && isOneIcon.value,
+)
 const computedClass = useBem('va-button', () => ({
   ...pick(props, ['disabled', 'block', 'loading', 'round', 'plain']),
-  small: props.size === 'small',
-  normal: !props.size || props.size === 'medium',
-  large: props.size === 'large',
   opacity: props.textOpacity < 1,
   bordered: !!props.borderColor,
   iconOnly: isOnlyIcon.value,
@@ -159,7 +164,9 @@ const computedClass = useBem('va-button', () => ({
 }))
 
 // styles
-const isTransparentBg = computed(() => props.plain || props.backgroundOpacity < 0.5)
+const isTransparentBg = computed(
+  () => props.plain || props.backgroundOpacity < 0.5,
+)
 const { textColorComputed } = useTextColor(colorComputed, isTransparentBg)
 
 const {
@@ -168,11 +175,19 @@ const {
   backgroundMaskOpacity,
   backgroundMaskColor,
 } = useButtonBackground(colorComputed, isPressed, isHovered)
-const contentColorComputed = useButtonTextColor(textColorComputed, colorComputed, isPressed, isHovered)
+const contentColorComputed = useButtonTextColor(
+  textColorComputed,
+  colorComputed,
+  isPressed,
+  isHovered,
+)
+
+const variablesComputed = useComponentVariables(variables, props)
 
 const computedStyle = computed(() => ({
   borderColor: props.borderColor ? getColor(props.borderColor) : 'transparent',
   ...contentColorComputed.value,
+  ...variablesComputed.value,
 }))
 
 defineExpose({
@@ -181,34 +196,38 @@ defineExpose({
 })
 </script>
 
-<style lang='scss'>
-@import 'variables';
-@import '../../styles/resources';
+<style lang="scss">
+@import "variables";
+@import "../../styles/resources";
 
 .va-button {
   position: relative;
-  padding: var(--va-button-padding);
-  display: var(--va-button-display);
-  justify-content: var(--va-button-justify-content);
-  align-items: var(--va-button-align-items);
-  border-width: var(--va-button-border-width);
-  border-color: var(--va-button-border-color);
-  border-style: var(--va-button-border-style);
-  background-image: var(--va-button-background-image);
-  box-shadow: var(--va-button-box-shadow);
+  padding: var(--va-button-padding-current);
+  display: var(--va-button-display-current);
+  justify-content: var(--va-button-justify-content-current);
+  align-items: var(--va-button-align-items-current);
+  border-width: var(--va-button-border-width-current);
+  border-color: var(--va-button-border-color-current);
+  border-style: var(--va-button-border-style-current);
+  background-image: var(--va-button-background-image-current);
+  box-shadow: var(--va-button-box-shadow-current);
   font-family: var(--va-font-family);
-  font-weight: var(--va-button-font-weight);
+  font-weight: var(--va-button-font-weight-current);
   text-decoration: none;
   text-transform: initial;
-  transition: var(--va-button-transition);
+  transition: var(--va-button-transition-current);
   box-sizing: border-box;
-  cursor: var(--va-button-cursor);
+  cursor: var(--va-button-cursor-current);
   z-index: 0;
   vertical-align: top;
 
+  --va-progress-circle-small-size: 16px;
+  --va-progress-circle-size: 24px;
+  --va-progress-circle-large-size: 32px;
+
   &::after,
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     width: 100%;
     height: 100%;
@@ -239,159 +258,70 @@ defineExpose({
     }
   }
 
-  &--small {
-    line-height: var(--va-button-sm-line-height);
-    border-radius: var(--va-button-sm-border-radius);
-    letter-spacing: var(--va-button-sm-letter-spacing);
-    min-height: var(--va-button-sm-size);
-    min-width: var(--va-button-sm-size);
-
-    .va-button__content {
-      font-size: var(--va-button-sm-font-size);
-      padding: var(--va-button-sm-content-py) var(--va-button-sm-content-px);
-    }
-
-    // set icons the same size as text
-    .va-button__left-icon,
-    .va-button__right-icon {
-      // font-size: var(--va-button-sm-line-height) !important;
-      // height: var(--va-button-sm-line-height) !important;
-      // line-height: var(--va-button-sm-line-height) !important;
-    }
-
-    .va-button__left-icon {
-      margin-right: var(--va-button-sm-icons-spacing);
-    }
-
-    .va-button__right-icon {
-      margin-left: var(--va-button-sm-icons-spacing);
-    }
+  line-height: var(--va-button-line-height-current);
+  border-radius: var(--va-button-border-radius-current);
+  letter-spacing: var(--va-button-letter-spacing-current);
+  min-height: var(--va-button-size-current);
+  min-width: var(--va-button-size-current);
+
+  .va-button__content {
+    font-size: var(--va-button-font-size-current);
+    padding:
+      var(--va-button-content-py-current)
+      var(--va-button-content-px-current);
+    line-height: var(--va-button-line-height-current);
+  }
 
-    &.va-button--bordered {
-      .va-button__content {
-        padding-top: calc(var(--va-button-sm-content-py) - var(--va-button-bordered-border));
-        padding-bottom: calc(var(--va-button-sm-content-py) - var(--va-button-bordered-border));
-      }
-    }
+  // set icons the same size as text
+  .va-button__left-icon,
+  .va-button__right-icon {
+    // font-size: var(--va-button-line-height-current) !important;
+    // height: var(--va-button-line-height-current) !important;
+    // line-height: var(--va-button-line-height-current) !important;
+  }
 
-    &.va-button--left-icon {
-      .va-button__content {
-        padding-left: var(--va-button-sm-icon-side-padding);
-      }
-    }
+  .va-button__left-icon {
+    margin-right: var(--va-button-icons-spacing-current);
+  }
 
-    &.va-button--right-icon {
-      .va-button__content {
-        padding-right: var(--va-button-sm-icon-side-padding);
-      }
-    }
+  .va-button__right-icon {
+    margin-left: var(--va-button-icons-spacing-current);
   }
 
-  &--normal {
-    line-height: var(--va-button-line-height);
-    border-radius: var(--va-button-border-radius);
-    letter-spacing: var(--va-button-letter-spacing);
-    min-height: var(--va-button-size);
-    min-width: var(--va-button-size);
+  &--bordered {
+    border-width: var(--va-button-bordered-border-current);
+    border-style: var(--va-button-bordered-style-current);
 
     .va-button__content {
-      font-size: var(--va-button-font-size);
-      padding: var(--va-button-content-py) var(--va-button-content-px);
-      line-height: var(--va-button-line-height);
-    }
-
-    // set icons the same size as text
-    .va-button__left-icon,
-    .va-button__right-icon {
-      // font-size: var(--va-button-line-height) !important;
-      // height: var(--va-button-line-height) !important;
-      // line-height: var(--va-button-line-height) !important;
-    }
-
-    .va-button__left-icon {
-      margin-right: var(--va-gap-medium);
-    }
-
-    .va-button__right-icon {
-      margin-left: var(--va-gap-medium);
-    }
-
-    &.va-button--bordered {
-      .va-button__content {
-        padding-top: calc(var(--va-button-content-py) - var(--va-button-bordered-border));
-        padding-bottom: calc(var(--va-button-content-py) - var(--va-button-bordered-border));
-      }
-    }
-
-    &.va-button--left-icon {
-      .va-button__content {
-        // padding-left: var(--va-button-icon-side-padding);
-      }
-    }
-
-    &.va-button--right-icon {
-      .va-button__content {
-        // padding-right: var(--va-button-icon-side-padding);
-      }
+      padding-top:
+        calc(
+          var(--va-button-content-py-current) -
+          var(--va-button-bordered-border-current)
+        );
+      padding-bottom:
+        calc(
+          var(--va-button-content-py-current) -
+          var(--va-button-bordered-border-current)
+        );
     }
   }
 
-  &--large {
-    line-height: var(--va-button-lg-line-height);
-    border-radius: var(--va-button-lg-border-radius);
-    letter-spacing: var(--va-button-lg-letter-spacing);
-    min-height: var(--va-button-lg-size);
-    min-width: var(--va-button-lg-size);
-
+  &--left-icon {
     .va-button__content {
-      font-size: var(--va-button-lg-font-size);
-      padding: var(--va-button-lg-content-py) var(--va-button-lg-content-px);
-    }
-
-    // set icons the same size as text
-    .va-button__left-icon,
-    .va-button__right-icon {
-      // font-size: var(--va-button-lg-line-height) !important;
-      // height: var(--va-button-lg-line-height) !important;
-      // line-height: var(--va-button-lg-line-height) !important;
-    }
-
-    .va-button__left-icon {
-      margin-right: var(--va-button-lg-icons-spacing);
-    }
-
-    .va-button__right-icon {
-      margin-left: var(--va-button-lg-icons-spacing);
-    }
-
-    &.va-button--bordered {
-      .va-button__content {
-        padding-top: calc(var(--va-button-lg-content-py) - var(--va-button-bordered-border));
-        padding-bottom: calc(var(--va-button-lg-content-py) - var(--va-button-bordered-border));
-      }
-    }
-
-    &.va-button--left-icon {
-      .va-button__content {
-        padding-left: var(--va-button-lg-icon-side-padding);
-      }
+      padding-left: var(--va-button-icon-side-padding-current);
     }
+  }
 
-    &.va-button--right-icon {
-      .va-button__content {
-        padding-right: var(--va-button-lg-icon-side-padding);
-      }
+  &--right-icon {
+    .va-button__content {
+      padding-right: var(--va-button-icon-side-padding-current);
     }
   }
 
-  &--small,
-  &--normal,
-  &--large {
-    &.va-button--icon-only {
-      .va-button__content {
-        padding-right: 0;
-        padding-left: 0;
-      }
+  .va-button--icon-only {
+    .va-button__content {
+      padding-right: 0;
+      padding-left: 0;
     }
   }
 
@@ -409,12 +339,7 @@ defineExpose({
     border-radius: 999px;
   }
 
-  &--bordered {
-    border-width: var(--va-button-bordered-border);
-    border-style: var(--va-button-bordered-style);
-  }
-
-  &.va-button--disabled {
+  &--disabled {
     @include va-disabled;
   }
 
@@ -443,8 +368,6 @@ defineExpose({
 
   &__loader {
     position: absolute;
-    width: 100%;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/packages/ui/src/components/va-button/_variables.scss b/packages/ui/src/components/va-button/_variables.scss
index 364cf1201e0..621970f6517 100644
--- a/packages/ui/src/components/va-button/_variables.scss
+++ b/packages/ui/src/components/va-button/_variables.scss
@@ -15,16 +15,17 @@
   --va-button-cursor: pointer;
 
   /* Small */
-  --va-button-sm-size: 1.5rem;
-  --va-button-sm-content-py: 0.25rem;
-  --va-button-sm-content-px: 0.375rem;
-  --va-button-sm-only-icon-content-px: 0.25rem;
-  --va-button-sm-font-size: 0.8125rem;
-  --va-button-sm-letter-spacing: 0;
-  --va-button-sm-line-height: 1rem;
-  --va-button-sm-border-radius: 0.125rem;
-  --va-button-sm-icon-side-padding: var(--va-button-sm-content-py);
-  --va-button-sm-icons-spacing: 0.125rem;
+  --va-button-small-size: 1.5rem;
+  --va-button-small-content-py: 0.25rem;
+  --va-button-small-content-px: 0.375rem;
+  --va-button-small-only-icon-content-px: 0.25rem;
+  --va-button-small-font-size: 0.8125rem;
+  --va-button-small-letter-spacing: 0;
+  --va-button-small-line-height: 1rem;
+  --va-button-small-border-radius: 0.125rem;
+  --va-button-small-icon-side-padding: var(--va-button-small-content-py);
+  --va-button-small-icons-spacing: 0.125rem;
+  --va-button-small-loader-size: 16px;
 
   /* Medium */
   --va-button-size: 2.25rem;
@@ -35,20 +36,22 @@
   --va-button-letter-spacing: 0;
   --va-button-line-height: 1.25rem;
   --va-button-border-radius: 0.25rem;
-  --va-button-icon-side-padding: var(--va-button-content-py);
-  --va-button-icons-spacing: 0.25rem;
+  --va-button-icon-side-padding: var(--va-button-content-px);
+  --va-button-icons-spacing: var(--va-gap-medium);
+  --va-button-loader-size: 24px;
 
   /* Large */
-  --va-button-lg-size: 3rem;
-  --va-button-lg-content-py: 0.75rem;
-  --va-button-lg-content-px: 1rem;
-  --va-button-lg-only-icon-content-px: 1rem;
-  --va-button-lg-font-size: 1.05rem;
-  --va-button-lg-letter-spacing: 0;
-  --va-button-lg-line-height: 1.5rem;
-  --va-button-lg-border-radius: 0.5rem;
-  --va-button-lg-icon-side-padding: var(--va-button-lg-content-py);
-  --va-button-lg-icons-spacing: 0.25rem;
+  --va-button-large-size: 3rem;
+  --va-button-large-content-py: 0.75rem;
+  --va-button-large-content-px: 1rem;
+  --va-button-large-only-icon-content-px: 1rem;
+  --va-button-large-font-size: 1.05rem;
+  --va-button-large-letter-spacing: 0;
+  --va-button-large-line-height: 1.5rem;
+  --va-button-large-border-radius: 0.5rem;
+  --va-button-large-icon-side-padding: var(--va-button-large-content-py);
+  --va-button-large-icons-spacing: 0.25rem;
+  --va-button-large-loader-size: 32px;
 
   /* Bordered */
   --va-button-bordered-border: 1px;
diff --git a/packages/ui/src/components/va-button/const.ts b/packages/ui/src/components/va-button/const.ts
new file mode 100644
index 00000000000..9e9ebc9721a
--- /dev/null
+++ b/packages/ui/src/components/va-button/const.ts
@@ -0,0 +1,26 @@
+export const variables = [
+  'display',
+  'justifyContent',
+  'alignItems',
+  'backgroundImage',
+  'boxShadow',
+  'borderWidth',
+  'borderColor',
+  'borderStyle',
+  'fontWeight',
+  'transition',
+  'padding',
+  'cursor',
+  'size',
+  'contentPy',
+  'contentPx',
+  'onlyIconContentPx',
+  'fontSize',
+  'letterSpacing',
+  'lineHeight',
+  'borderRadius',
+  'iconsSpacing',
+  'iconSidePadding',
+  'borderedBorder',
+  'borderedStyle',
+] as const
diff --git a/packages/ui/src/components/va-icon/VaIcon.vue b/packages/ui/src/components/va-icon/VaIcon.vue
index 6977cde8f1f..fe7bb9542fc 100644
--- a/packages/ui/src/components/va-icon/VaIcon.vue
+++ b/packages/ui/src/components/va-icon/VaIcon.vue
@@ -23,9 +23,11 @@ import omit from 'lodash/omit.js'
 import {
   useComponentPresetProp,
   useColors,
-  useSize, useSizeProps,
+  useSizeProps,
   useIcon,
 } from '../../composables'
+import { useComponentVariables } from '../../composables/useComponentVariables'
+import { variables } from './const'
 
 defineOptions({
   name: 'VaIcon',
@@ -48,7 +50,6 @@ const props = defineProps({
 })
 
 const { getColor } = useColors()
-const { sizeComputed } = useSize(props)
 const { getIcon } = useIcon()
 
 const iconConfig = computed(() => getIcon(props.name))
@@ -78,13 +79,13 @@ const transformStyle = computed(() => {
   return `${scale} ${rotation}`.trim()
 })
 
+const variablesComputed = useComponentVariables(variables, props)
+
 const computedStyle = computed(() => ({
   transform: transformStyle.value,
   cursor: attrs.onClick ? 'pointer' : null,
   color: props.color ? getColor(props.color, undefined, true) : iconConfig.value.color,
-  fontSize: sizeComputed.value,
-  height: sizeComputed.value,
-  lineHeight: sizeComputed.value,
+  ...variablesComputed.value,
 }))
 
 const tabindexComputed = computed(() => attrs.tabindex as number | undefined ?? -1)
@@ -98,6 +99,9 @@ const ariaHiddenComputed = computed(() => attrs.role !== 'button' || tabindexCom
 .va-icon {
   vertical-align: var(--va-icon-vertical-align);
   user-select: var(--va-icon-user-select);
+  font-size: var(--va-icon-size-current);
+  line-height: var(--va-icon-size-current);
+  height: var(--va-icon-size-current);
 
   &[role^="button"][tabindex]:not([tabindex^="-"]) {
     cursor: pointer;
diff --git a/packages/ui/src/components/va-icon/_variables.scss b/packages/ui/src/components/va-icon/_variables.scss
index b2438182ea0..428af32330c 100644
--- a/packages/ui/src/components/va-icon/_variables.scss
+++ b/packages/ui/src/components/va-icon/_variables.scss
@@ -2,4 +2,13 @@
 :host {
   --va-icon-vertical-align: middle;
   --va-icon-user-select: none;
+
+  /* Small */
+  --va-icon-small-size: 14px;
+
+  /* Medium */
+  --va-icon-size: 18px;
+
+  /* Large */
+  --va-icon-large-size: 24px;
 }
diff --git a/packages/ui/src/components/va-icon/const.ts b/packages/ui/src/components/va-icon/const.ts
new file mode 100644
index 00000000000..b602662189a
--- /dev/null
+++ b/packages/ui/src/components/va-icon/const.ts
@@ -0,0 +1,3 @@
+export const variables = [
+  'size',
+] as const
diff --git a/packages/ui/src/components/va-icon/demo/VaIconVue.vue b/packages/ui/src/components/va-icon/demo/VaIconVue.vue
index 68dcf3fd563..1abb51fedb2 100644
--- a/packages/ui/src/components/va-icon/demo/VaIconVue.vue
+++ b/packages/ui/src/components/va-icon/demo/VaIconVue.vue
@@ -36,8 +36,6 @@ export default {
 <style lang="scss">
 .va-icon-vue {
   display: inline-block;
-  width: 55px;
-  height: 47.8px;
 
   .cls-1 {
     fill: #4ae387;
diff --git a/packages/ui/src/components/va-modal/VaModal.vue b/packages/ui/src/components/va-modal/VaModal.vue
index 08c94ad287b..60813e8ba40 100644
--- a/packages/ui/src/components/va-modal/VaModal.vue
+++ b/packages/ui/src/components/va-modal/VaModal.vue
@@ -144,8 +144,7 @@ import {
   useClickOutside,
   useDocument,
   useTeleported,
-  useSizeRef,
-  useIsMounted,
+  useSizeProps,
 } from '../../composables'
 
 import { VaButton } from '../va-button'
@@ -155,6 +154,12 @@ import { useBlur } from './hooks/useBlur'
 import { useZIndex } from '../../composables/useZIndex'
 import { StringWithAutocomplete } from '../../utils/types/prop-type'
 import { defineChildProps, useChildComponents } from '../../composables/useChildComponents'
+</script>
+
+<script lang="ts" setup>
+
+import { variables } from './const'
+import { useComponentVariables } from '../../composables/useComponentVariables'
 
 const WithTransition = defineComponent({
   name: 'ModalElement',
@@ -167,9 +172,7 @@ const WithTransition = defineComponent({
     ? h(Transition, { ...attrs }, slots)
     : slots.default?.(attrs),
 })
-</script>
 
-<script lang="ts" setup>
 defineOptions({
   name: 'VaModal',
   inheritAttrs: false,
@@ -200,22 +203,11 @@ const props = defineProps({
   maxWidth: { type: String, default: '' },
   maxHeight: { type: String, default: '' },
   anchorClass: { type: String },
+  ...useSizeProps,
   size: {
     type: String as PropType<StringWithAutocomplete<'medium' | 'small' | 'large' | 'auto'>>,
     default: 'medium',
   },
-  sizesConfig: {
-    type: Object,
-    default: () => ({
-      defaultSize: 'medium',
-      sizes: {
-        small: 576,
-        medium: 768,
-        large: 992,
-        auto: 'max-content',
-      },
-    }),
-  },
   fixedLayout: { type: Boolean, default: false },
   withoutTransitions: { type: Boolean, default: false },
   overlay: { type: Boolean, default: true },
@@ -271,10 +263,11 @@ const zIndexComputed = computed(() => {
   return zIndexInherited.value
 })
 
-const sizeComputed = useSizeRef(props)
+const variablesComputed = useComponentVariables(variables, props, 'va-modal-dialog')
 
 const computedDialogStyle = computed(() => ({
-  maxWidth: props.maxWidth || sizeComputed.value,
+  ...variablesComputed.value,
+  maxWidth: props.maxWidth,
   maxHeight: props.maxHeight,
   color: textColorComputed.value,
   background: getColor(props.backgroundColor),
@@ -495,6 +488,7 @@ body.va-modal-open {
     border-radius: var(--va-modal-dialog-border-radius, var(--va-block-border-radius));
     margin: var(--va-modal-dialog-margin);
     box-shadow: var(--va-modal-dialog-box-shadow, var(--va-block-box-shadow));
+    max-width: var(--va-modal-dialog-size-current);
     position: relative;
     overflow: auto;
     display: flex;
diff --git a/packages/ui/src/components/va-modal/_variables.scss b/packages/ui/src/components/va-modal/_variables.scss
index 2e69ad330d4..c8921d1a67f 100644
--- a/packages/ui/src/components/va-modal/_variables.scss
+++ b/packages/ui/src/components/va-modal/_variables.scss
@@ -29,6 +29,10 @@
   --va-modal-dialog-border-radius: 0.375rem;
   --va-modal-dialog-margin: 1rem;
   --va-modal-dialog-box-shadow: 0 4px 70px -18px var(--va-shadow);
+  --va-modal-dialog-small-size: 576px;
+  --va-modal-dialog-medium-size: 768px;
+  --va-modal-dialog-large-size: 992px;
+  --va-modal-dialog-auto-size: max-content;
 
   /* Fullscreen */
   --va-modal-overlay-opacity-transition: opacity calc(2 * var(--va-modal-basic-duration) / 3) cubic-bezier(1, 0.5, 0.8, 1);
diff --git a/packages/ui/src/components/va-modal/const.ts b/packages/ui/src/components/va-modal/const.ts
new file mode 100644
index 00000000000..b602662189a
--- /dev/null
+++ b/packages/ui/src/components/va-modal/const.ts
@@ -0,0 +1,3 @@
+export const variables = [
+  'size',
+] as const
diff --git a/packages/ui/src/components/va-progress-circle/VaProgressCircle.demo.vue b/packages/ui/src/components/va-progress-circle/VaProgressCircle.demo.vue
index 2f0bfe23e59..816c6a8f1fb 100644
--- a/packages/ui/src/components/va-progress-circle/VaProgressCircle.demo.vue
+++ b/packages/ui/src/components/va-progress-circle/VaProgressCircle.demo.vue
@@ -50,7 +50,7 @@
       <div>
         30px:
         <VaProgressCircle
-          :size="30"
+          size="30px"
           :modelValue="value"
         />
       </div>
@@ -114,7 +114,7 @@
       </div>
       <div>
         size:
-        <VaConfig :components="{ VaProgressCircle: { size: 30 } }">
+        <VaConfig :components="{ VaProgressCircle: { size: '30px' } }">
           <VaProgressCircle :modelValue="value" />
         </VaConfig>
       </div>
diff --git a/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue b/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
index b2212aa9ddb..41a464d0d05 100644
--- a/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
+++ b/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
@@ -35,7 +35,9 @@
 import { computed } from 'vue'
 import clamp from 'lodash/clamp.js'
 
-import { useComponentPresetProp, useColors, useSize, useSizeProps, useTranslation } from '../../composables'
+import { useComponentPresetProp, useColors, useSizeProps, useTranslation } from '../../composables'
+import { useComponentVariables } from '../../composables/useComponentVariables'
+import { variables } from './const'
 
 defineOptions({
   name: 'VaProgressCircle',
@@ -52,7 +54,6 @@ const props = defineProps({
 })
 
 const { getColor } = useColors()
-const { sizeComputed } = useSize(props)
 
 const cappedThickness = computed(() => clamp(Number(props.thickness), 0, 1) / 2 * 100)
 
@@ -65,10 +66,7 @@ const { tp } = useTranslation()
 
 const infoStyle = computed(() => ({ color: colorComputed.value }))
 
-const rootStyle = computed(() => ({
-  width: sizeComputed.value,
-  height: sizeComputed.value,
-}))
+const rootStyle = useComponentVariables(variables, props)
 
 const rootClass = computed(() => ({
   'va-progress-circle--indeterminate': props.indeterminate,
@@ -88,6 +86,8 @@ const ariaAttributesComputed = computed(() => ({
 .va-progress-circle {
   position: var(--va-progress-circle-position);
   overflow: var(--va-progress-circle-overflow); // Prevents resizing container back and forth.
+  width: var(--va-progress-circle-size-current);
+  height: var(--va-progress-circle-size-current);
   font-family: var(--va-font-family);
 
   &__wrapper {
@@ -98,8 +98,8 @@ const ariaAttributesComputed = computed(() => ({
     right: 0;
     margin: auto;
     transform: rotate(-90deg);
-    width: var(--va-progress-circle-width);
-    height: var(--va-progress-circle-height);
+    width: var(--va-progress-circle-width-current);
+    height: var(--va-progress-circle-height-current);
 
     @include flex-center();
 
@@ -121,7 +121,7 @@ const ariaAttributesComputed = computed(() => ({
   }
 
   &__info {
-    font-size: var(--va-progress-circle-font-size);
+    font-size: var(--va-progress-circle-font-size-current);
     position: absolute;
     left: 50%;
     top: 50%;
diff --git a/packages/ui/src/components/va-progress-circle/_variables.scss b/packages/ui/src/components/va-progress-circle/_variables.scss
index a2c6efd0479..124e466c973 100644
--- a/packages/ui/src/components/va-progress-circle/_variables.scss
+++ b/packages/ui/src/components/va-progress-circle/_variables.scss
@@ -13,4 +13,13 @@
 
   /* Circle Info */
   --va-progress-circle-font-size: 0.75rem;
+
+  /* Small */
+  --va-progress-circle-small-size: 32px;
+
+  /* Medium */
+  --va-progress-circle-size: 48px;
+
+  /* Large */
+  --va-progress-circle-large-size: 64px;
 }
diff --git a/packages/ui/src/components/va-progress-circle/const.ts b/packages/ui/src/components/va-progress-circle/const.ts
new file mode 100644
index 00000000000..3d611d65476
--- /dev/null
+++ b/packages/ui/src/components/va-progress-circle/const.ts
@@ -0,0 +1,6 @@
+export const variables = [
+  'size',
+  'fontSize',
+  'width',
+  'height',
+] as const
diff --git a/packages/ui/src/components/va-rating/VaRating.demo.vue b/packages/ui/src/components/va-rating/VaRating.demo.vue
index 1a4ddbecdc7..5f52cc378be 100644
--- a/packages/ui/src/components/va-rating/VaRating.demo.vue
+++ b/packages/ui/src/components/va-rating/VaRating.demo.vue
@@ -55,8 +55,8 @@
       <va-rating size='small' v-model="value" />
       <va-rating size='medium' v-model="value" />
       <va-rating size='large' v-model="value" />
-      <va-rating :size="40" v-model="value" />
-      <va-rating :size="60" v-model="value" />
+      <va-rating size="40px" v-model="value" />
+      <va-rating size="60px" v-model="value" />
     </VbCard>
     <VbCard title="Disabled">
       <va-rating disabled v-model="value" />
@@ -112,7 +112,7 @@
         v-model="value"
       />
       <va-rating
-        :size="20"
+        size="20px"
         icon="thumb_up"
         empty-icon="thumb_up_empty"
         v-model="value"
@@ -166,8 +166,8 @@
       <va-rating numbers size='small' v-model="value" />
       <va-rating numbers size='medium' v-model="value" />
       <va-rating numbers size='large' v-model="value" />
-      <va-rating numbers :size="40" v-model="value" />
-      <va-rating numbers :size="60" v-model="value" />
+      <va-rating numbers size="40px" v-model="value" />
+      <va-rating numbers size="60px" v-model="value" />
     </VbCard>
     <VbCard title="Disabled">
       <va-rating numbers disabled hover v-model="value" />
diff --git a/packages/ui/src/components/va-rating/VaRating.vue b/packages/ui/src/components/va-rating/VaRating.vue
index d34ebfb2756..e290fbd2747 100644
--- a/packages/ui/src/components/va-rating/VaRating.vue
+++ b/packages/ui/src/components/va-rating/VaRating.vue
@@ -57,7 +57,7 @@ import { useVaRatingColors, useVaRatingColorsProps } from './hooks/useVaRatingCo
 import { RatingValue } from './types'
 import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import VaRatingItem from './components/VaRatingItem/VaRatingItem.vue'
-import VaRatingItemNumberButton from './components/VaRatingItemNumberButton.vue'
+import VaRatingItemNumberButton from './components/VaRatingNumberItem.vue'
 
 const VaRatingItemPropsDeclarations = extractComponentProps(VaRatingItem, ['modelValue', 'itemNumber'])
 const VaRatingItemNumberButtonPropsDeclarations = extractComponentProps(VaRatingItemNumberButton, ['modelValue', 'itemNumber'])
@@ -138,16 +138,6 @@ const VaRatingItemNumberButtonProps = filterComponentProps(VaRatingItemNumberBut
   font-family: var(--va-font-family);
 
   &__number-item {
-    @include normalize-button();
-
-    font-size: var(--va-rating-number-item-font-size);
-    margin: var(--va-rating-number-item-margin);
-    font-weight: var(--va-rating-number-item-font-weight);
-
-    @include flex-center();
-
-    cursor: pointer;
-
     @at-root {
       .va-rating--disabled & {
         @include va-disabled();
diff --git a/packages/ui/src/components/va-rating/_variables.scss b/packages/ui/src/components/va-rating/_variables.scss
index 2fc85a8ab72..86a8e35b5fc 100644
--- a/packages/ui/src/components/va-rating/_variables.scss
+++ b/packages/ui/src/components/va-rating/_variables.scss
@@ -3,11 +3,19 @@
   --va-rating-display: flex;
 
   /* Number item */
-  --va-rating-number-item-font-size: inherit;
   --va-rating-number-item-margin: 0.1em;
   --va-rating-number-item-font-weight: 700;
   --va-rating-number-item-cursor: pointer;
 
   /* Item wrapper */
   --va-rating-item-wrapper-cursor: pointer;
+
+  /* Small */
+  --va-rating-number-item-small-size: 14px;
+
+  /* Medium */
+  --va-rating-number-item-size: 18px;
+
+  /* Large */
+  --va-rating-number-item-large-size: 24px;
 }
diff --git a/packages/ui/src/components/va-rating/components/VaRatingItemNumberButton.vue b/packages/ui/src/components/va-rating/components/VaRatingItemNumberButton.vue
deleted file mode 100644
index 1b85c9b7c38..00000000000
--- a/packages/ui/src/components/va-rating/components/VaRatingItemNumberButton.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <button
-    class="va-rating__number-item"
-    tabindex="-1"
-    aria-hidden="true"
-    :style="{
-      background: backgroundComputed,
-      color: textColorComputed,
-      width: sizeComputed,
-      height: sizeComputed,
-      fontSize: fontSizeComputed,
-      borderRadius: `${parseInt(fontSizeComputed) * 0.125}rem`,
-    }"
-  >
-    {{ itemNumber }}
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { useSize, useSizeProps } from '../../../composables'
-import { useVaRatingColorsProps, useVaRatingColors } from '../hooks/useVaRatingColors'
-
-defineOptions({
-  name: 'VaRatingItemNumberButton',
-})
-
-const props = defineProps({
-  ...useVaRatingColorsProps,
-  ...useSizeProps,
-  itemNumber: { type: Number, required: true },
-  modelValue: { type: Number, required: true },
-})
-
-const {
-  textColorComputed,
-  backgroundComputed,
-} = useVaRatingColors(props)
-
-const {
-  sizeComputed,
-  fontSizeComputed,
-  fontSizeInRem,
-} = useSize(props, 'VaRating')
-</script>
diff --git a/packages/ui/src/components/va-rating/components/VaRatingNumberItem.vue b/packages/ui/src/components/va-rating/components/VaRatingNumberItem.vue
new file mode 100644
index 00000000000..5846acfb987
--- /dev/null
+++ b/packages/ui/src/components/va-rating/components/VaRatingNumberItem.vue
@@ -0,0 +1,61 @@
+<template>
+  <button
+    class="va-rating__number-item"
+    tabindex="-1"
+    aria-hidden="true"
+    :style="{
+      background: backgroundComputed,
+      color: textColorComputed,
+      ...variablesComputed,
+    }"
+  >
+    {{ itemNumber }}
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { useSizeProps } from '../../../composables'
+import { useVaRatingColorsProps, useVaRatingColors } from '../hooks/useVaRatingColors'
+import { useComponentVariables } from '../../../composables/useComponentVariables'
+
+defineOptions({
+  name: 'VaRatingNumberItem',
+})
+
+const props = defineProps({
+  ...useVaRatingColorsProps,
+  ...useSizeProps,
+  itemNumber: { type: Number, required: true },
+  modelValue: { type: Number, required: true },
+})
+
+const {
+  textColorComputed,
+  backgroundComputed,
+} = useVaRatingColors(props)
+
+const variables = ['size', 'fontSize', 'borderRadius', 'fontWeight', 'margin'] as const
+
+const variablesComputed = useComponentVariables(variables, props)
+</script>
+<style lang="scss">
+@import "../../../styles/resources";
+
+.va-rating__number-item {
+  @include normalize-button();
+
+  margin: var(--va-rating-number-item-margin-current);
+  font-weight: var(--va-rating-number-item-font-weight-current);
+
+  @include flex-center();
+
+  cursor: pointer;
+
+  --font-size: max(var(--va-rating-number-item-font-size-current), calc(var(--va-rating-number-item-size-current) * 0.8));
+
+  width: var(--va-rating-number-item-size-current);
+  height: var(--va-rating-number-item-size-current);
+  font-size: var(--font-size);
+  border-radius: var(--va-rating-number-item-border-radius-current, calc(var(--font-size) * 0.125));
+}
+</style>
diff --git a/packages/ui/src/components/va-scroll-container/VaScrollContainer.vue b/packages/ui/src/components/va-scroll-container/VaScrollContainer.vue
index 3625e6762b5..559e0a89cf1 100644
--- a/packages/ui/src/components/va-scroll-container/VaScrollContainer.vue
+++ b/packages/ui/src/components/va-scroll-container/VaScrollContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="va-scroll-container">
+  <div class="va-scroll-container" :style="variablesComputed">
     <div class="va-scroll-container__content">
       <slot />
     </div>
@@ -9,7 +9,8 @@
 <script lang="ts" setup>
 import { computed, PropType } from 'vue'
 
-import { useColors, useSize, useSizeProps } from '../../composables'
+import { useColors, useSizeProps } from '../../composables'
+import { useComponentVariables } from '../../composables/useComponentVariables'
 
 defineOptions({
   name: 'VaScrollContainer',
@@ -22,22 +23,13 @@ const props = defineProps({
   color: { type: String, default: 'secondary' },
   rtl: { type: Boolean, default: false },
   gradient: { type: Boolean, default: false },
-  sizesConfig: {
-    type: Object,
-    default: () => ({
-      defaultSize: 4,
-      sizes: { small: 4, medium: 6, large: 8 },
-    }),
-  },
   size: {
-    type: String as PropType<'small' | 'medium' | 'large'>,
+    type: [String, Number] as PropType<'small' | 'medium' | 'large' | string | number>,
     default: 'small',
-    validator: (v: string) => ['small', 'medium', 'large'].includes(v),
   },
 })
 
 const { getColor } = useColors()
-const { sizeComputed } = useSize(props)
 
 const overflowX = computed(() => props.horizontal ? 'auto' : 'hidden')
 const overflowY = computed(() => props.vertical ? 'auto' : 'hidden')
@@ -47,8 +39,9 @@ const scrollColor = computed(() => {
   return props.gradient ? `linear-gradient(0deg, var(--va-scroll-container-scrollbar-gradient-to) 0%, ${color} 100%)` : color
 })
 
-const scrollbarSize = computed(() => sizeComputed.value)
 const scrollbarPosition = computed(() => props.rtl ? 'rtl' : 'ltr')
+
+const variablesComputed = useComponentVariables(['scrollbarSize'], props)
 </script>
 
 <style lang="scss">
@@ -56,7 +49,7 @@ const scrollbarPosition = computed(() => props.rtl ? 'rtl' : 'ltr')
 @import './variables';
 
 .va-scroll-container {
-  @include va-scroll(v-bind(scrollColor), v-bind(scrollbarSize));
+  @include va-scroll(v-bind(scrollColor), var(--va-scroll-container-scrollbar-size-current));
 
   overflow-x: v-bind(overflowX);
   overflow-y: v-bind(overflowY);
diff --git a/packages/ui/src/components/va-scroll-container/_variables.scss b/packages/ui/src/components/va-scroll-container/_variables.scss
index 5091e4b6796..04fc941a818 100644
--- a/packages/ui/src/components/va-scroll-container/_variables.scss
+++ b/packages/ui/src/components/va-scroll-container/_variables.scss
@@ -1,3 +1,6 @@
 :root {
   --va-scroll-container-scrollbar-gradient-to: var(--va-background-primary);
+  --va-scroll-container-small-scrollbar-size: 4px;
+  --va-scroll-container-scrollbar-size: 6px;
+  --va-scroll-container-large-scrollbar-size: 8px;
 }
diff --git a/packages/ui/src/composables/tests/useSize.spec.ts b/packages/ui/src/composables/tests/useSize.spec.ts
deleted file mode 100644
index d75d2dcc2ba..00000000000
--- a/packages/ui/src/composables/tests/useSize.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { mountWithGlobalConfig } from './../../utils/unit-test-utils'
-import { useSize, useSizeProps } from '../useSize'
-import { describe, it, expect } from 'vitest'
-import { createTestComposable } from './createTestComposable'
-
-const TestComponent = {
-  template: '<p></p>',
-  props: {
-    ...useSizeProps,
-  },
-}
-
-describe('useSize', () => {
-  it.each([
-    [
-      { size: 'medium' },
-      { fontSizeComputed: '1rem', fontSizeInRem: 1, sizeComputed: '48px' },
-    ],
-    [
-      { size: 12 },
-      {
-        fontSizeComputed: '0.25rem',
-        fontSizeInRem: 0.25,
-        sizeComputed: '12px',
-      },
-    ],
-    [
-      { size: '16px' },
-      { fontSizeComputed: '0.5rem', fontSizeInRem: 0.5, sizeComputed: '16px' },
-    ],
-    [
-      { size: '2rem' },
-      { fontSizeComputed: '2rem', fontSizeInRem: 2, sizeComputed: '2rem' },
-    ],
-  ])('props %s should be %s', async (props, expected) => {
-    const wrapper = mountWithGlobalConfig(TestComponent)
-    expect(wrapper.exists()).toBeTruthy()
-
-    await wrapper.setProps(props)
-
-    const { composableWrapper } = createTestComposable(() =>
-      useSize(wrapper.props() as any),
-    )
-    const { sizeComputed, fontSizeComputed, fontSizeInRem } = composableWrapper
-
-    const result = {
-      sizeComputed: sizeComputed.value,
-      fontSizeComputed: fontSizeComputed.value,
-      fontSizeInRem: fontSizeInRem.value,
-    }
-    expect(result).toMatchObject(expected)
-  })
-})
diff --git a/packages/ui/src/composables/useCSSVariables.ts b/packages/ui/src/composables/useCSSVariables.ts
index c0c152fb543..1db936e24d0 100644
--- a/packages/ui/src/composables/useCSSVariables.ts
+++ b/packages/ui/src/composables/useCSSVariables.ts
@@ -1,9 +1,9 @@
 import { computed } from 'vue'
-import kebab from 'lodash/kebabCase.js'
+import { cssVariableName } from '@/utils/css-variables'
 
-export const useCSSVariables = (prefix: string, cb: () => Record<string, string>) => {
-  return computed(() => Object.entries(cb()).reduce((acc, [key, value]) => {
-    acc[`--${prefix}-${kebab(key)}`] = value
+export const useCSSVariables = (componentName: string, cb: () => Record<string, string>) => {
+  return computed(() => Object.entries(cb()).reduce((acc, [property, value]) => {
+    acc[cssVariableName({ componentName, property })] = value
     return acc
   }, {} as Record<string, string>))
 }
diff --git a/packages/ui/src/composables/useColors.ts b/packages/ui/src/composables/useColors.ts
index 8631ff56e44..f53fb5abc88 100644
--- a/packages/ui/src/composables/useColors.ts
+++ b/packages/ui/src/composables/useColors.ts
@@ -13,15 +13,15 @@ import {
   isColor,
   shiftHSLAColor,
   setHSLAColor,
-  isCSSVariable,
   colorToRgba,
   getStateMaskGradientBackground,
   getColorLightness,
-  cssVariableName,
   normalizeColorName,
   type ColorInput,
 } from '../services/color/utils'
 import kebabCase from 'lodash/kebabCase'
+import { cssVariableName } from '../utils/css-variables'
+import { isCSSVariable } from '../utils/css'
 
 /**
  * You can add these props to any component by destructuring them inside props option.
diff --git a/packages/ui/src/composables/useComponentVariables.ts b/packages/ui/src/composables/useComponentVariables.ts
new file mode 100644
index 00000000000..fe00f685f47
--- /dev/null
+++ b/packages/ui/src/composables/useComponentVariables.ts
@@ -0,0 +1,73 @@
+import { cssVariableName } from '../utils/css-variables'
+import { ReadonlyOrPlainArray } from '../utils/types/array'
+import { computed, getCurrentInstance } from 'vue'
+import { isCSSSizeValue, isCSSVariable } from '../utils/css'
+import isNil from 'lodash/isNil'
+import { SizeProps, SizesConfig } from '../services/size'
+
+const sizeToAbsolute = (size: unknown) => {
+  if (typeof size === 'number') { return `${size}px` }
+  return String(size)
+}
+
+const globalVariables = new Set(['fontSize'])
+
+export const renderVariablesFromConfig = <Variables extends string>(sizesConfig: SizesConfig<Variables, string>, componentName: string) => {
+  return Object.entries(sizesConfig).reduce<Record<string, string>>((acc, [size, { variables }]) => {
+    for (const property in variables) {
+      acc[cssVariableName({ componentName, size, property })] = variables[property]
+    }
+
+    return acc
+  }, {})
+}
+
+export const useComponentVariables = <Variables extends string>(variables: ReadonlyOrPlainArray<Variables>, props: SizeProps<SizesConfig<Variables, string>>, componentName = getCurrentInstance()?.type.name) => {
+  if (!componentName) {
+    throw new Error('Component name must be provided!')
+  }
+
+  const variablesFromConfig = computed(() => {
+    const config = props.sizesConfig
+
+    if (!config) {
+      return undefined
+    }
+
+    return renderVariablesFromConfig(config, componentName)
+  })
+
+  const currentVariables = computed(() => {
+    const sizeProp = props.size
+
+    const hasSize = !isNil(sizeProp)
+    const needUseSized = !(typeof sizeProp === 'string' && (isCSSVariable(sizeProp) || isCSSSizeValue(sizeProp)))
+
+    return [...variables].reduce<Record<string, string>>((acc, property) => {
+      const hasGlobalFallback = globalVariables.has(property)
+      const globalFallback = hasGlobalFallback ? `, var(${cssVariableName({ property })})` : ''
+
+      const variableName = cssVariableName({ componentName, property })
+      const baseVariable = `var(${variableName}${globalFallback})`
+
+      if (!hasSize) {
+        acc[`${variableName}-current`] = baseVariable
+      } else if (!needUseSized) {
+        acc[`${variableName}-current`] = property === 'size' ? sizeToAbsolute(sizeProp) : baseVariable
+      } else {
+        const size = String(sizeProp)
+        const sizedName = cssVariableName({ componentName, property, size })
+        const globalSizedFallback = hasGlobalFallback ? `, var(${cssVariableName({ property, size })}${globalFallback})` : ''
+
+        acc[`${variableName}-current`] = `var(${sizedName}, var(${variableName}${globalSizedFallback}))`
+      }
+
+      return acc
+    }, {})
+  })
+
+  return computed(() => ({
+    ...variablesFromConfig.value,
+    ...currentVariables.value,
+  }))
+}
diff --git a/packages/ui/src/composables/useSize.ts b/packages/ui/src/composables/useSize.ts
index 6b6f3ca1d39..2e3105f69a3 100644
--- a/packages/ui/src/composables/useSize.ts
+++ b/packages/ui/src/composables/useSize.ts
@@ -1,32 +1,5 @@
-import { computed, getCurrentInstance, PropType } from 'vue'
-
-import { useGlobalConfig, SizeConfig } from '../services/global-config/global-config'
-import type { VuesticComponentName } from '../services/vue-plugin/types/components'
-import isNil from 'lodash/isNil'
-
-export const sizesConfig: SizeConfig = {
-  defaultSize: 48,
-  sizes: {
-    small: 32,
-    medium: 48,
-    large: 64,
-  },
-}
-
-export const fontSizesConfig: SizeConfig = {
-  defaultSize: 1,
-  sizes: {
-    small: 0.75,
-    medium: 1,
-    large: 1.25,
-  },
-}
-
-interface SizeProps {
-  size: string | number;
-  sizesConfig: Record<string, any>;
-  fontSizesConfig: Record<string, any>;
-}
+import { PropType } from 'vue'
+import { SizesConfig } from '../services/size'
 
 /**
  * You could add these props to any component by destructuring them inside props option.
@@ -37,117 +10,12 @@ interface SizeProps {
 export const useSizeProps = {
   size: {
     type: [String, Number],
-    default: '',
     validator: (size: string | number) => {
       return typeof size === 'string' || typeof size === 'number'
     },
   },
 
   sizesConfig: {
-    type: Object as PropType<Record<string, any>>,
-    default: () => sizesConfig,
-  },
-
-  fontSizesConfig: {
-    type: Object as PropType<Record<string, any>>,
-    default: () => fontSizesConfig,
+    type: Object as PropType<SizesConfig<string, string>>,
   },
 }
-
-const fontRegex = /(?<fontSize>\d+)(?<extension>px|rem)/i
-
-const convertToRem = (px: number) => px / 16 - 0.5
-
-const sizeToAbsolute = (size: unknown) => {
-  if (typeof size === 'number') { return `${size}px` }
-  return String(size)
-}
-
-const doHaveSizesConfig = (props: any): props is { sizesConfig: SizeConfig } => 'sizesConfig' in props
-
-export const useSizeRef = (props: {
-  size: string | number;
-  sizesConfig: Record<string, any>;
-}) => {
-  // TODO: Make sizes config service and use it here
-  const sizePropName = 'size'
-
-  return computed<string>(() => {
-    let sizePropValue = props[sizePropName]
-
-    if (doHaveSizesConfig(props)) {
-      const { defaultSize, sizes } = props.sizesConfig
-
-      if (isNil(sizePropValue)) {
-        sizePropValue = defaultSize
-      }
-
-      if (sizes) {
-        const sizeFromConfig = sizes[sizePropValue]
-        if (sizeFromConfig) { return sizeToAbsolute(sizeFromConfig) }
-      }
-    }
-
-    return sizeToAbsolute(sizePropValue)
-  })
-}
-
-export const useSize = (
-  props: SizeProps,
-  componentName: string | undefined = getCurrentInstance()?.type.name,
-) => {
-  const { getGlobalConfig } = useGlobalConfig()
-
-  const sizesConfigGlobal = computed<SizeConfig>(() => {
-    return componentName
-      ? (getGlobalConfig().components as any)?.[componentName as VuesticComponentName]?.sizesConfig
-      : undefined
-  })
-
-  const sizeComputed = computed<string>(() => {
-    const { defaultSize, sizes } = props.sizesConfig
-    const defaultSizeGlobal = sizesConfigGlobal.value?.defaultSize
-
-    if (!props.size) { return `${defaultSize || defaultSizeGlobal}px` }
-
-    if (typeof props.size === 'string') {
-      const sizeFromGlobalConfig = sizesConfigGlobal.value?.sizes?.[props.size]
-      const sizeFromProps = sizes[props.size]
-
-      if (sizeFromProps) { return `${sizeFromProps}px` }
-      if (sizeFromGlobalConfig) { return `${sizeFromGlobalConfig}px` }
-
-      return props.size
-    }
-
-    return `${props.size}px`
-  })
-
-  const fontSizeInRem = computed<number>(() => {
-    const { defaultSize, sizes } = props.fontSizesConfig
-
-    if (!props.size) { return defaultSize }
-
-    if (typeof props.size === 'string') {
-      if (props.size in sizes) { return sizes[props.size] }
-
-      const fontSizeParsed = props.size.match(fontRegex)
-      if (!fontSizeParsed || !fontSizeParsed.groups) {
-        throw new Error('Size prop should be either valid string or number')
-      }
-
-      const { extension, fontSize } = fontSizeParsed.groups
-      return extension === 'rem' ? +fontSize : convertToRem(+fontSize)
-    }
-
-    return convertToRem(props.size)
-  })
-
-  const fontSizeComputed = computed<string>(() => `${fontSizeInRem.value}rem`)
-
-  return {
-    sizeComputed,
-    fontSizeComputed,
-    fontSizeInRem,
-  }
-}
diff --git a/packages/ui/src/composables/useValidation.ts b/packages/ui/src/composables/useValidation.ts
index 3df5a767aa5..ae6775849e6 100644
--- a/packages/ui/src/composables/useValidation.ts
+++ b/packages/ui/src/composables/useValidation.ts
@@ -16,7 +16,7 @@ import isString from 'lodash/isString.js'
 
 import { useSyncProp } from './useSyncProp'
 import { useFormChild } from './useForm'
-import { type ExtractReadonlyArrayKeys } from '../utils/types/readonly-array-keys'
+import { type ArrayElementType } from 'src/utils/types/array'
 import { watchSetter } from './../utils/watch-setter'
 
 export type ValidationRule<V = any> = ((v: V) => any | string) | Promise<((v: V) => any | string)>
@@ -61,7 +61,7 @@ const isPromise = (value: any): value is Promise<any> => {
 const useDirtyValue = (
   value: Ref<any>,
   props: ExtractPropTypes<typeof useValidationProps>,
-  emit: (event: ExtractReadonlyArrayKeys<typeof useValidationEmits>, ...args: any[]) => void,
+  emit: (event: ArrayElementType<typeof useValidationEmits>, ...args: any[]) => void,
 ) => {
   const isDirty = ref(props.dirty || false)
 
diff --git a/packages/ui/src/services/color/plugin/create-color-config-plugin.ts b/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
index 361e07f266a..3a824d58345 100644
--- a/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
+++ b/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
@@ -2,7 +2,7 @@ import { PartialGlobalConfig } from './../../global-config/types'
 import { ColorVariables } from './../types'
 import { App, watch, computed } from 'vue'
 import { isServer } from '../../../utils/ssr'
-import { cssVariableName } from '../utils'
+import { cssVariableName } from '../../../utils/css-variables'
 import { useColors } from '../../../composables'
 import { generateUniqueId } from '../../../utils/uuid'
 import { addOrUpdateStyleElement } from '../../../utils/dom'
@@ -12,7 +12,7 @@ export const setCSSVariable = (name: string, value: string, root: HTMLElement) =
 }
 
 export const generateCSSVariable = (key: string, value: string) => {
-  return `${cssVariableName(key)}: ${value};\n`
+  return `${cssVariableName(key)}: ${value};`
 }
 
 export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig) => {
@@ -23,10 +23,10 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
     if (!colors) { return }
 
     const colorNames = Object.keys(colors)
-    const renderedColors = colorNames.map((key) => `${cssVariableName(key)}: ${colors[key]}`).join(';')
-    const renderedOnColors = colorNames.map((key) => `${cssVariableName(`on-${key}`)}: ${getColor(getTextColor(colors[key]))}`).join(';')
+    const renderedColors = colorNames.map((key) => generateCSSVariable(key, colors[key]))
+    const renderedOnColors = colorNames.map((key) => generateCSSVariable(`on-${key}`, getColor(getTextColor(colors[key]))))
 
-    return `${renderedColors};${renderedOnColors}`
+    return [...renderedColors, ...renderedOnColors].join(';')
   }
 
   const renderCSSVariablesStyleContent = (colors: ColorVariables = configColors) => {
@@ -34,10 +34,10 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
 
     let result = ':root {\n'
     colorNames.forEach((key) => {
-      result += generateCSSVariable(key, colors[key])
+      result += generateCSSVariable(key, colors[key]) + '\n'
     })
     colorNames.forEach((key) => {
-      result += generateCSSVariable(`on-${key}`, getColor(getTextColor(colors[key])))
+      result += generateCSSVariable(`on-${key}`, getColor(getTextColor(colors[key]))) + '\n'
     })
     result += '}\n'
 
diff --git a/packages/ui/src/services/color/utils.ts b/packages/ui/src/services/color/utils.ts
index 5b526c2d4ad..b974c453068 100644
--- a/packages/ui/src/services/color/utils.ts
+++ b/packages/ui/src/services/color/utils.ts
@@ -15,9 +15,6 @@ const makeColor = (color: ColorInput) => {
     })
   }
 }
-
-export const isCSSVariable = (strColor: string): boolean => /var\(--.+\)/.test(strColor)
-export const cssVariableName = (colorName: string) => `--va-${kebabCase(colorName)}`
 export const normalizeColorName = (colorName: string) => camelCase(colorName)
 
 export const colorToRgba = (color: ColorInput, opacity: number) => {
diff --git a/packages/ui/src/services/component-config/config/default.ts b/packages/ui/src/services/component-config/config/default.ts
index c4bc72b289b..2567c1686ea 100644
--- a/packages/ui/src/services/component-config/config/default.ts
+++ b/packages/ui/src/services/component-config/config/default.ts
@@ -1,28 +1,7 @@
 import { ComponentConfig } from '../types'
 
 export const getComponentsDefaultConfig = (): ComponentConfig =>
-  // TODO: Should be handled in size service
   ({
-    VaIcon: {
-      sizesConfig: {
-        defaultSize: 18,
-        sizes: {
-          small: 14,
-          medium: 18,
-          large: 24,
-        },
-      },
-    },
-    VaRating: {
-      sizesConfig: {
-        defaultSize: 18,
-        sizes: {
-          small: 14,
-          medium: 18,
-          large: 24,
-        },
-      },
-    },
     all: {},
     presets: {
       VaButton: {
diff --git a/packages/ui/src/services/size/index.ts b/packages/ui/src/services/size/index.ts
new file mode 100644
index 00000000000..c9f6f047dc0
--- /dev/null
+++ b/packages/ui/src/services/size/index.ts
@@ -0,0 +1 @@
+export * from './types'
diff --git a/packages/ui/src/services/size/types.ts b/packages/ui/src/services/size/types.ts
new file mode 100644
index 00000000000..24d8463547b
--- /dev/null
+++ b/packages/ui/src/services/size/types.ts
@@ -0,0 +1,10 @@
+export interface SizePreset<Variables extends string> {
+  variables: Record<Variables, string>;
+}
+
+export type SizesConfig<Variables extends string, SizeName extends string> = Record<SizeName, SizePreset<Variables>>;
+
+export interface SizeProps<T extends SizesConfig<string, string>> {
+  size?: (T extends SizesConfig<string, infer SizeName> ? SizeName : never) | string | number;
+  sizesConfig?: T;
+}
diff --git a/packages/ui/src/styles/global/css-variables.scss b/packages/ui/src/styles/global/css-variables.scss
index 661bbc72ce3..c8bfa7d64c9 100644
--- a/packages/ui/src/styles/global/css-variables.scss
+++ b/packages/ui/src/styles/global/css-variables.scss
@@ -55,6 +55,11 @@
   --va-form-element-border-width: 1px;
   --va-form-element-border-radius: 0.25rem;
 
+  /* Font sizes */
+  --va-small-font-size: 0.75rem;
+  --va-font-size: 1rem;
+  --va-large-font-size: 1.25rem;
+
   /* Colors */
   // Accent
   --va-primary: #154ec1;
diff --git a/packages/ui/src/styles/resources/_mixins.scss b/packages/ui/src/styles/resources/_mixins.scss
index 8c5a87e02fc..55e0bf845f3 100644
--- a/packages/ui/src/styles/resources/_mixins.scss
+++ b/packages/ui/src/styles/resources/_mixins.scss
@@ -77,7 +77,6 @@
 }
 
 @mixin normalize-button {
-  font-size: 100%;
   overflow: visible;
   text-transform: none;
   padding: 0;
diff --git a/packages/ui/src/utils/css-variables.ts b/packages/ui/src/utils/css-variables.ts
new file mode 100644
index 00000000000..b65ce144054
--- /dev/null
+++ b/packages/ui/src/utils/css-variables.ts
@@ -0,0 +1,20 @@
+import kebabCase from 'lodash/kebabCase'
+
+interface CSSVariableNameComponents {
+  prefix?: string;
+  componentName?: string;
+  state?: string;
+  nestedElement?: string;
+  size?: string;
+  property: string
+}
+
+export function cssVariableName(property: string): string;
+export function cssVariableName(name: CSSVariableNameComponents): string;
+export function cssVariableName (arg: string | CSSVariableNameComponents) {
+  const { prefix = 'va', componentName, state, nestedElement, size, property }: CSSVariableNameComponents = typeof arg === 'string' ? { property: arg } : arg
+
+  const name = [componentName, state, nestedElement, size, property].map(kebabCase).filter(Boolean).join('-')
+
+  return `--${prefix}-${name.replace(/^va-/, '')}`
+}
diff --git a/packages/ui/src/utils/css.ts b/packages/ui/src/utils/css.ts
index d8e29f2396b..6ac539532df 100644
--- a/packages/ui/src/utils/css.ts
+++ b/packages/ui/src/utils/css.ts
@@ -1,3 +1,11 @@
+const CSS_UNITS = ['em', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch', 'rem', 'vh', 'vw', 'vmin', 'vmax']
+
+const CSS_VALUE_REGEX = new RegExp(`^[\\d]+${CSS_UNITS.join('|')}$`)
+
+export const isCSSSizeValue = (value: string) => CSS_VALUE_REGEX.test(value)
+
+export const isCSSVariable = (strColor: string): boolean => /var\(--.+\)/.test(strColor)
+
 export const safeCSSLength = (length: string | number) => (
   typeof length === 'number' ? `${length}px` : length
 )
diff --git a/packages/ui/src/utils/types/array.ts b/packages/ui/src/utils/types/array.ts
new file mode 100644
index 00000000000..53b24e48c09
--- /dev/null
+++ b/packages/ui/src/utils/types/array.ts
@@ -0,0 +1,3 @@
+export type ReadonlyOrPlainArray<T> = Array<T> | Readonly<Array<T>>;
+
+export type ArrayElementType<T extends ReadonlyOrPlainArray<any>> = T[number];
diff --git a/packages/ui/src/utils/types/readonly-array-keys.ts b/packages/ui/src/utils/types/readonly-array-keys.ts
deleted file mode 100644
index 64e3c2088b2..00000000000
--- a/packages/ui/src/utils/types/readonly-array-keys.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ExtractReadonlyArrayKeys<T extends readonly any[]> = (T) extends readonly (infer P)[] ? P : never
diff --git a/yarn.lock b/yarn.lock
index 6d151a94b05..953653ebefb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16848,12 +16848,12 @@ react-colorful@^5.1.2:
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
 react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
 react-is@^17.0.1:
   version "17.0.2"
@@ -16894,9 +16894,9 @@ react-style-singleton@^2.2.1:
     tslib "^2.0.0"
 
 react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -17755,10 +17755,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"