diff --git a/packages/ui/src/components/va-avatar/VaAvatar.vue b/packages/ui/src/components/va-avatar/VaAvatar.vue
index ce02b81fa8e..32d3f64f92d 100644
--- a/packages/ui/src/components/va-avatar/VaAvatar.vue
+++ b/packages/ui/src/components/va-avatar/VaAvatar.vue
@@ -3,6 +3,7 @@
     class="va-avatar"
     :class="classesComputed"
     :style="computedStyle"
+    v-bind="variablesComputed"
   >
     <va-progress-circle
       v-if="$props.loading"
@@ -88,16 +89,13 @@ const backgroundColorComputed = computed(() => {
 
 const { textColorComputed } = useTextColor(backgroundColorComputed)
 
-const variablesComputed = useComponentVariables(variables, props)
+const variablesComputed = useComponentVariables(props)
 
 const computedStyle = computed(() => ({
-  ...variablesComputed.value,
   fontSize: props.fontSize,
 }))
 
-const classesComputed = useBem('va-avatar', () => ({
-  ...pick(props, ['square']),
-}))
+const classesComputed = useBem('va-avatar', () => pick(props, ['square']))
 
 const hasLoadError = ref(false)
 
@@ -126,21 +124,29 @@ defineExpose({
 @import "variables";
 
 .va-avatar {
-  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);
+  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);
   font-family: var(--va-font-family);
   background-color: v-bind(backgroundColorComputed);
   color: v-bind(textColorComputed);
-  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);
+  width: var(--va-avatar-size);
+  min-width: var(--va-avatar-size);  // 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);
+  font-size: var(--va-avatar-font-size);
+
+  &--small {
+    --va-avatar-size: 32px;
+  }
+
+  &--large {
+    --va-avatar-size: 64px;
+  }
 
   &--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 cbe8fbe814b..3479f24c02d 100644
--- a/packages/ui/src/components/va-avatar/_variables.scss
+++ b/packages/ui/src/components/va-avatar/_variables.scss
@@ -10,12 +10,6 @@
   --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-button/VaButton.vue b/packages/ui/src/components/va-button/VaButton.vue
index f549d4d5028..78416afe271 100644
--- a/packages/ui/src/components/va-button/VaButton.vue
+++ b/packages/ui/src/components/va-button/VaButton.vue
@@ -161,6 +161,7 @@ const computedClass = useBem('va-button', () => ({
   iconOnly: isOnlyIcon.value,
   leftIcon: !isOnlyIcon.value && !!props.icon && !props.iconRight,
   rightIcon: !isOnlyIcon.value && !props.icon && !!props.iconRight,
+  ...(props.size && { [props.size]: true }),
 }))
 
 // styles
@@ -182,7 +183,7 @@ const contentColorComputed = useButtonTextColor(
   isHovered,
 )
 
-const variablesComputed = useComponentVariables(variables, props)
+const variablesComputed = useComponentVariables(props)
 
 const computedStyle = computed(() => ({
   borderColor: props.borderColor ? getColor(props.borderColor) : 'transparent',
@@ -202,28 +203,61 @@ defineExpose({
 
 .va-button {
   position: relative;
-  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);
+  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);
   font-family: var(--va-font-family);
-  font-weight: var(--va-button-font-weight-current);
+  font-weight: var(--va-button-font-weight);
   text-decoration: none;
   text-transform: initial;
-  transition: var(--va-button-transition-current);
+  transition: var(--va-button-transition);
   box-sizing: border-box;
-  cursor: var(--va-button-cursor-current);
+  cursor: var(--va-button-cursor);
   z-index: 0;
   vertical-align: top;
+  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);
 
-  --va-progress-circle-small-size: 16px;
   --va-progress-circle-size: 24px;
-  --va-progress-circle-large-size: 32px;
+
+  &--small {
+    --va-button-size: 1.5rem;
+    --va-button-content-py: 0.25rem;
+    --va-button-content-px: 0.375rem;
+    --va-button-only-icon-content-px: 0.25rem;
+    --va-button-font-size: 0.8125rem;
+    --va-button-letter-spacing: 0;
+    --va-button-line-height: 1rem;
+    --va-button-border-radius: 0.125rem;
+    --va-button-icon-side-padding: var(--va-button-content-py);
+    --va-button-icons-spacing: 0.125rem;
+    --va-button-loader-size: 16px;
+    --va-progress-circle-size: 16px;
+  }
+
+  &--large {
+    --va-button-size: 3rem;
+    --va-button-content-py: 0.75rem;
+    --va-button-content-px: 1rem;
+    --va-button-only-icon-content-px: 1rem;
+    --va-button-font-size: 1.05rem;
+    --va-button-letter-spacing: 0;
+    --va-button-line-height: 1.5rem;
+    --va-button-border-radius: 0.5rem;
+    --va-button-icon-side-padding: var(--va-button-content-py);
+    --va-button-icons-spacing: 0.25rem;
+    --va-button-loader-size: 32px;
+    --va-progress-circle-size: 32px;
+  }
 
   &::after,
   &::before {
@@ -258,63 +292,57 @@ defineExpose({
     }
   }
 
-  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);
+    font-size: var(--va-button-font-size);
     padding:
-      var(--va-button-content-py-current)
-      var(--va-button-content-px-current);
-    line-height: var(--va-button-line-height-current);
+      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-current) !important;
-    // height: var(--va-button-line-height-current) !important;
-    // line-height: var(--va-button-line-height-current) !important;
+    // 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-button-icons-spacing-current);
+    margin-right: var(--va-button-icons-spacing);
   }
 
   .va-button__right-icon {
-    margin-left: var(--va-button-icons-spacing-current);
+    margin-left: var(--va-button-icons-spacing);
   }
 
   &--bordered {
-    border-width: var(--va-button-bordered-border-current);
-    border-style: var(--va-button-bordered-style-current);
+    border-width: var(--va-button-bordered-border);
+    border-style: var(--va-button-bordered-style);
 
     .va-button__content {
       padding-top:
         calc(
-          var(--va-button-content-py-current) -
-          var(--va-button-bordered-border-current)
+          var(--va-button-content-py) -
+          var(--va-button-bordered-border)
         );
       padding-bottom:
         calc(
-          var(--va-button-content-py-current) -
-          var(--va-button-bordered-border-current)
+          var(--va-button-content-py) -
+          var(--va-button-bordered-border)
         );
     }
   }
 
   &--left-icon {
     .va-button__content {
-      padding-left: var(--va-button-icon-side-padding-current);
+      padding-left: var(--va-button-icon-side-padding);
     }
   }
 
   &--right-icon {
     .va-button__content {
-      padding-right: var(--va-button-icon-side-padding-current);
+      padding-right: var(--va-button-icon-side-padding);
     }
   }
 
diff --git a/packages/ui/src/components/va-button/_variables.scss b/packages/ui/src/components/va-button/_variables.scss
index 621970f6517..dbdec2e041f 100644
--- a/packages/ui/src/components/va-button/_variables.scss
+++ b/packages/ui/src/components/va-button/_variables.scss
@@ -14,19 +14,6 @@
   --va-button-padding: 0;
   --va-button-cursor: pointer;
 
-  /* Small */
-  --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;
   --va-button-content-py: 0.5rem;
@@ -40,19 +27,6 @@
   --va-button-icons-spacing: var(--va-gap-medium);
   --va-button-loader-size: 24px;
 
-  /* Large */
-  --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;
   --va-button-bordered-style: solid;
diff --git a/packages/ui/src/components/va-icon/VaIcon.vue b/packages/ui/src/components/va-icon/VaIcon.vue
index fe7bb9542fc..d394afea295 100644
--- a/packages/ui/src/components/va-icon/VaIcon.vue
+++ b/packages/ui/src/components/va-icon/VaIcon.vue
@@ -6,7 +6,7 @@
     :style="computedStyle"
     :aria-hidden="ariaHiddenComputed"
     notranslate
-    v-bind="computedAttrs"
+    v-bind="{ ...computedAttrs, ...variablesComputed }"
   >
     <slot>
       <template v-if="iconConfig.content">
@@ -45,7 +45,8 @@ const props = defineProps({
   flip: {
     type: String as PropType<'off' | 'horizontal' | 'vertical' | 'both'>,
     default: 'off',
-    validator: (value: string) => ['off', 'horizontal', 'vertical', 'both'].includes(value),
+    validator: (value: string) =>
+      ['off', 'horizontal', 'vertical', 'both'].includes(value),
   },
 })
 
@@ -54,14 +55,28 @@ const { getIcon } = useIcon()
 
 const iconConfig = computed(() => getIcon(props.name))
 
-const computedTag = computed(() => props.component || props.tag || iconConfig.value.component || iconConfig.value.tag || 'i')
+const computedTag = computed(
+  () =>
+    props.component ||
+    props.tag ||
+    iconConfig.value.component ||
+    iconConfig.value.tag ||
+    'i',
+)
 
 const attrs = useAttrs()
-const computedAttrs = computed(() => ({ ...iconConfig.value.attrs, ...omit(attrs, ['class']) }))
+const computedAttrs = computed(() => ({
+  ...iconConfig.value.attrs,
+  ...omit(attrs, ['class']),
+}))
 
 const getSpinClass = (spin?: string | boolean) => {
-  if (spin === undefined || spin === false) { return }
-  return spin === 'counter-clockwise' ? 'va-icon--spin-reverse' : 'va-icon--spin'
+  if (spin === undefined || spin === false) {
+    return
+  }
+  return spin === 'counter-clockwise'
+    ? 'va-icon--spin-reverse'
+    : 'va-icon--spin'
 }
 
 const computedClass = computed(() => [
@@ -72,36 +87,49 @@ const computedClass = computed(() => [
 const transformStyle = computed(() => {
   const rotation = props.rotation ? `rotate(${props.rotation}deg)` : ''
 
-  const flipY = (props.flip === 'vertical' || props.flip === 'both') ? -1 : 1
-  const flipX = (props.flip === 'horizontal' || props.flip === 'both') ? -1 : 1
+  const flipY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1
+  const flipX = props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1
   const scale = props.flip === 'off' ? '' : `scale(${flipY}, ${flipX})`
 
   return `${scale} ${rotation}`.trim()
 })
 
-const variablesComputed = useComponentVariables(variables, props)
+const variablesComputed = useComponentVariables(props)
 
 const computedStyle = computed(() => ({
   transform: transformStyle.value,
   cursor: attrs.onClick ? 'pointer' : null,
-  color: props.color ? getColor(props.color, undefined, true) : iconConfig.value.color,
-  ...variablesComputed.value,
+  color: props.color
+    ? getColor(props.color, undefined, true)
+    : iconConfig.value.color,
 }))
 
-const tabindexComputed = computed(() => attrs.tabindex as number | undefined ?? -1)
-const ariaHiddenComputed = computed(() => attrs.role !== 'button' || tabindexComputed.value < 0)
+const tabindexComputed = computed(
+  () => (attrs.tabindex as number | undefined) ?? -1,
+)
+const ariaHiddenComputed = computed(
+  () => attrs.role !== 'button' || tabindexComputed.value < 0,
+)
 </script>
 
 <style lang="scss">
 @import "variables";
-@import '../../styles/resources';
+@import "../../styles/resources";
 
 .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);
+  font-size: var(--va-icon-size);
+  line-height: var(--va-icon-size);
+  height: var(--va-icon-size);
+
+  &--small {
+    --va-icon-size: 14px;
+  }
+
+  &--large {
+    --va-icon-size: 24px;
+  }
 
   &[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 428af32330c..f270caa35cb 100644
--- a/packages/ui/src/components/va-icon/_variables.scss
+++ b/packages/ui/src/components/va-icon/_variables.scss
@@ -3,12 +3,6 @@
   --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-modal/VaModal.vue b/packages/ui/src/components/va-modal/VaModal.vue
index 60813e8ba40..6562f4151c3 100644
--- a/packages/ui/src/components/va-modal/VaModal.vue
+++ b/packages/ui/src/components/va-modal/VaModal.vue
@@ -28,6 +28,7 @@
           class="va-modal"
           role="dialog"
           aria-modal="true"
+          v-bind="variablesComputed"
         >
           <div
             v-if="$props.overlay"
@@ -145,6 +146,7 @@ import {
   useDocument,
   useTeleported,
   useSizeProps,
+  useBem,
 } from '../../composables'
 
 import { VaButton } from '../va-button'
@@ -158,8 +160,8 @@ import { defineChildProps, useChildComponents } from '../../composables/useChild
 
 <script lang="ts" setup>
 
-import { variables } from './const'
 import { useComponentVariables } from '../../composables/useComponentVariables'
+import pick from 'lodash/pick'
 
 const WithTransition = defineComponent({
   name: 'ModalElement',
@@ -245,12 +247,7 @@ const { getColor } = useColors()
 const { textColorComputed } = useTextColor(toRef(props, 'backgroundColor'))
 const { valueComputed } = useStateful(props, emit)
 
-const computedClass = computed(() => ({
-  'va-modal--fullscreen': props.fullscreen,
-  'va-modal--mobile-fullscreen': props.mobileFullscreen,
-  'va-modal--fixed-layout': props.fixedLayout,
-  'va-modal--no-padding': props.noPadding,
-}))
+const computedClass = useBem('va-modal', () => pick(props, ['fullscreen', 'mobileFullscreen', 'fixedLayout', 'noPadding']))
 
 const {
   zIndex: zIndexInherited,
@@ -263,19 +260,18 @@ const zIndexComputed = computed(() => {
   return zIndexInherited.value
 })
 
-const variablesComputed = useComponentVariables(variables, props, 'va-modal-dialog')
+const variablesComputed = useComponentVariables(props)
 
 const computedDialogStyle = computed(() => ({
-  ...variablesComputed.value,
   maxWidth: props.maxWidth,
   maxHeight: props.maxHeight,
   color: textColorComputed.value,
   background: getColor(props.backgroundColor),
 }))
 
-const computedOverlayClass = computed(() => ({
-  'va-modal__overlay--lowest': isLowestLevelModal.value,
-  'va-modal__overlay--top': isTopLevelModal.value,
+const computedOverlayClass = useBem('va-modal__overlay', () => ({
+  lowest: isLowestLevelModal.value,
+  top: isTopLevelModal.value,
 }))
 
 const getOverlayOpacity = () => {
@@ -488,7 +484,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);
+    max-width: var(--va-modal-dialog-size);
     position: relative;
     overflow: auto;
     display: flex;
@@ -507,6 +503,22 @@ body.va-modal-open {
     will-change: opacity;
   }
 
+  &--small {
+    --va-modal-dialog-size: 576px;
+  }
+
+  &--medium {
+    --va-modal-dialog-size: 768px;
+  }
+
+  &--large {
+    --va-modal-dialog-size: 992px;
+  }
+
+  &--auto {
+    --va-modal-dialog-size: max-content;
+  }
+
   &-enter-from,
   &-leave-to {
     .va-modal__overlay--lowest {
diff --git a/packages/ui/src/components/va-modal/_variables.scss b/packages/ui/src/components/va-modal/_variables.scss
index c8921d1a67f..2e69ad330d4 100644
--- a/packages/ui/src/components/va-modal/_variables.scss
+++ b/packages/ui/src/components/va-modal/_variables.scss
@@ -29,10 +29,6 @@
   --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
deleted file mode 100644
index b602662189a..00000000000
--- a/packages/ui/src/components/va-modal/const.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const variables = [
-  'size',
-] as const
diff --git a/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue b/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
index 41a464d0d05..b27d76e4ef6 100644
--- a/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
+++ b/packages/ui/src/components/va-progress-circle/VaProgressCircle.vue
@@ -1,14 +1,10 @@
 <template>
   <div
     class="va-progress-circle"
-    :style="rootStyle"
     :class="rootClass"
-    v-bind="ariaAttributesComputed"
+    v-bind="{ ...ariaAttributesComputed, ...variablesComputed }"
   >
-    <svg
-      class="va-progress-circle__wrapper"
-      viewBox="0 0 40 40"
-    >
+    <svg class="va-progress-circle__wrapper" viewBox="0 0 40 40">
       <circle
         class="va-progress-circle__overlay"
         cx="50%"
@@ -35,9 +31,16 @@
 import { computed } from 'vue'
 import clamp from 'lodash/clamp.js'
 
-import { useComponentPresetProp, useColors, useSizeProps, useTranslation } from '../../composables'
+import {
+  useComponentPresetProp,
+  useColors,
+  useSizeProps,
+  useTranslation,
+  useBem,
+} from '../../composables'
 import { useComponentVariables } from '../../composables/useComponentVariables'
 import { variables } from './const'
+import pick from 'lodash/pick'
 
 defineOptions({
   name: 'VaProgressCircle',
@@ -55,21 +58,25 @@ const props = defineProps({
 
 const { getColor } = useColors()
 
-const cappedThickness = computed(() => clamp(Number(props.thickness), 0, 1) / 2 * 100)
+const cappedThickness = computed(
+  () => (clamp(Number(props.thickness), 0, 1) / 2) * 100,
+)
 
-const radius = computed(() => 20 - (20 * cappedThickness.value / 100))
+const radius = computed(() => 20 - (20 * cappedThickness.value) / 100)
 const dasharray = computed(() => 2 * Math.PI * radius.value)
-const dashoffset = computed(() => dasharray.value * (1 - clamp(Number(props.modelValue), 0, 100) / 100))
+const dashoffset = computed(
+  () => dasharray.value * (1 - clamp(Number(props.modelValue), 0, 100) / 100),
+)
 const colorComputed = computed(() => getColor(props.color, undefined, true))
 
 const { tp } = useTranslation()
 
 const infoStyle = computed(() => ({ color: colorComputed.value }))
 
-const rootStyle = useComponentVariables(variables, props)
+const variablesComputed = useComponentVariables(props)
 
-const rootClass = computed(() => ({
-  'va-progress-circle--indeterminate': props.indeterminate,
+const rootClass = useBem('va-progress-circle', () => ({
+  ...pick(props, ['indeterminate']),
 }))
 
 const ariaAttributesComputed = computed(() => ({
@@ -85,9 +92,13 @@ 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);
+  overflow:
+    var(
+      --va-progress-circle-overflow
+    ); // Prevents resizing container back and forth.
+
+  width: var(--va-progress-circle-size);
+  height: var(--va-progress-circle-size);
   font-family: var(--va-font-family);
 
   &__wrapper {
@@ -98,8 +109,8 @@ const ariaAttributesComputed = computed(() => ({
     right: 0;
     margin: auto;
     transform: rotate(-90deg);
-    width: var(--va-progress-circle-width-current);
-    height: var(--va-progress-circle-height-current);
+    width: var(--va-progress-circle-width);
+    height: var(--va-progress-circle-height);
 
     @include flex-center();
 
@@ -115,18 +126,28 @@ const ariaAttributesComputed = computed(() => ({
 
     @at-root {
       .va-progress-circle--indeterminate & {
-        animation: va-progress-circle__overlay--indeterminate 2s ease-in-out infinite;
+        animation:
+          va-progress-circle__overlay--indeterminate 2s ease-in-out
+          infinite;
       }
     }
   }
 
   &__info {
-    font-size: var(--va-progress-circle-font-size-current);
+    font-size: var(--va-progress-circle-font-size);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
   }
+
+  &--small {
+    --va-progress-circle-size: 32px;
+  }
+
+  &--large {
+    --va-progress-circle-size: 64px;
+  }
 }
 
 @keyframes va-progress-circle__wrapper--indeterminate {
diff --git a/packages/ui/src/components/va-progress-circle/_variables.scss b/packages/ui/src/components/va-progress-circle/_variables.scss
index 124e466c973..f6dd37e636a 100644
--- a/packages/ui/src/components/va-progress-circle/_variables.scss
+++ b/packages/ui/src/components/va-progress-circle/_variables.scss
@@ -14,12 +14,6 @@
   /* 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
index 3d611d65476..087e118f437 100644
--- a/packages/ui/src/components/va-progress-circle/const.ts
+++ b/packages/ui/src/components/va-progress-circle/const.ts
@@ -1,6 +1,9 @@
 export const variables = [
-  'size',
-  'fontSize',
+  'position',
+  'overflow',
   'width',
   'height',
+  'overlayTransition',
+  'size',
+  'fontSize',
 ] as const
diff --git a/packages/ui/src/components/va-rating/VaRating.vue b/packages/ui/src/components/va-rating/VaRating.vue
index e290fbd2747..c37f8c2e2d6 100644
--- a/packages/ui/src/components/va-rating/VaRating.vue
+++ b/packages/ui/src/components/va-rating/VaRating.vue
@@ -3,6 +3,7 @@
     class="va-rating"
     :class="rootClass"
     :aria-label="tp($props.ariaLabel, { max: $props.max, value: $props.modelValue })"
+    v-bind="variablesComputed"
   >
     <div
       class="va-rating__item-wrapper"
@@ -56,6 +57,8 @@ import { useVaRatingColors, useVaRatingColorsProps } from './hooks/useVaRatingCo
 
 import { RatingValue } from './types'
 import { useComponentPresetProp } from '../../composables/useComponentPreset'
+
+import { useComponentVariables } from '../../composables/useComponentVariables'
 import VaRatingItem from './components/VaRatingItem/VaRatingItem.vue'
 import VaRatingItemNumberButton from './components/VaRatingNumberItem.vue'
 
@@ -88,6 +91,9 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const { computedClasses: rootClass } = useFormField('va-rating', props)
+
+const variablesComputed = useComponentVariables(props)
+
 const {
   visibleValue,
   modelValue: vModel,
@@ -182,5 +188,15 @@ const VaRatingItemNumberButtonProps = filterComponentProps(VaRatingItemNumberBut
   &__text-wrapper {
     padding-left: 10px;
   }
+
+  &--small {
+    --va-rating-number-item-size: 14px;
+    --va-rating-number-item-font-size: var(--va-small-font-size);
+  }
+
+  &--large {
+    --va-rating-number-item-size: 24px;
+    --va-rating-number-item-font-size: var(--va-large-font-size);
+  }
 }
 </style>
diff --git a/packages/ui/src/components/va-rating/_variables.scss b/packages/ui/src/components/va-rating/_variables.scss
index 86a8e35b5fc..24a9a282150 100644
--- a/packages/ui/src/components/va-rating/_variables.scss
+++ b/packages/ui/src/components/va-rating/_variables.scss
@@ -4,18 +4,13 @@
 
   /* Number item */
   --va-rating-number-item-margin: 0.1em;
+  --va-rating-number-item-font-size: var(--va-font-size);
   --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/VaRatingNumberItem.vue b/packages/ui/src/components/va-rating/components/VaRatingNumberItem.vue
index 5846acfb987..4da22ff6888 100644
--- a/packages/ui/src/components/va-rating/components/VaRatingNumberItem.vue
+++ b/packages/ui/src/components/va-rating/components/VaRatingNumberItem.vue
@@ -6,7 +6,6 @@
     :style="{
       background: backgroundComputed,
       color: textColorComputed,
-      ...variablesComputed,
     }"
   >
     {{ itemNumber }}
@@ -16,7 +15,6 @@
 <script lang="ts" setup>
 import { useSizeProps } from '../../../composables'
 import { useVaRatingColorsProps, useVaRatingColors } from '../hooks/useVaRatingColors'
-import { useComponentVariables } from '../../../composables/useComponentVariables'
 
 defineOptions({
   name: 'VaRatingNumberItem',
@@ -33,10 +31,6 @@ 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";
@@ -44,18 +38,19 @@ const variablesComputed = useComponentVariables(variables, props)
 .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);
+  margin: var(--va-rating-number-item-margin);
+  font-weight: var(--va-rating-number-item-font-weight);
 
   @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));
+  --size: var(--va-rating-size, var(--va-rating-number-item-size));
+  --font-size: max(var(--va-rating-number-item-font-size), calc(var(--size) * 0.8));
 
-  width: var(--va-rating-number-item-size-current);
-  height: var(--va-rating-number-item-size-current);
+  width: var(--size);
+  height: var(--size);
   font-size: var(--font-size);
-  border-radius: var(--va-rating-number-item-border-radius-current, calc(var(--font-size) * 0.125));
+  border-radius: var(--va-rating-number-item-border-radius, calc(var(--font-size) * 0.125));
 }
 </style>
diff --git a/packages/ui/src/components/va-rating/const.ts b/packages/ui/src/components/va-rating/const.ts
new file mode 100644
index 00000000000..3edf806b189
--- /dev/null
+++ b/packages/ui/src/components/va-rating/const.ts
@@ -0,0 +1,12 @@
+const variables = [
+  'display',
+  'numberItemMargin',
+  'numberItemFontWeight',
+  'numberItemCursor',
+  'itemWrapperCursor',
+  'size',
+  'fontSize',
+  'borderRadius',
+  'fontWeight',
+  'margin',
+] as const
diff --git a/packages/ui/src/components/va-scroll-container/VaScrollContainer.demo.vue b/packages/ui/src/components/va-scroll-container/VaScrollContainer.demo.vue
index 314e0ba83aa..9676ac0239b 100644
--- a/packages/ui/src/components/va-scroll-container/VaScrollContainer.demo.vue
+++ b/packages/ui/src/components/va-scroll-container/VaScrollContainer.demo.vue
@@ -23,6 +23,12 @@
         <div style="width: 600px; height: 600px; background: var(--va-primary);" />
       </VaScrollContainer>
     </VbCard>
+
+    <VbCard title="Size">
+      <VaScrollContainer style="width: 300px; height: 300px;" horizontal vertical size="large">
+        <div style="width: 600px; height: 600px; background: var(--va-primary);" />
+      </VaScrollContainer>
+    </VbCard>
   </VbDemo>
 </template>
 
diff --git a/packages/ui/src/components/va-scroll-container/VaScrollContainer.vue b/packages/ui/src/components/va-scroll-container/VaScrollContainer.vue
index 559e0a89cf1..17f794f6734 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" :style="variablesComputed">
+  <div class="va-scroll-container" v-bind="variablesComputed">
     <div class="va-scroll-container__content">
       <slot />
     </div>
@@ -41,7 +41,7 @@ const scrollColor = computed(() => {
 
 const scrollbarPosition = computed(() => props.rtl ? 'rtl' : 'ltr')
 
-const variablesComputed = useComponentVariables(['scrollbarSize'], props)
+const variablesComputed = useComponentVariables(props)
 </script>
 
 <style lang="scss">
@@ -49,7 +49,7 @@ const variablesComputed = useComponentVariables(['scrollbarSize'], props)
 @import './variables';
 
 .va-scroll-container {
-  @include va-scroll(v-bind(scrollColor), var(--va-scroll-container-scrollbar-size-current));
+  @include va-scroll(v-bind(scrollColor), var(--va-scroll-container-scrollbar-size));
 
   overflow-x: v-bind(overflowX);
   overflow-y: v-bind(overflowY);
@@ -57,6 +57,14 @@ const variablesComputed = useComponentVariables(['scrollbarSize'], props)
   height: 100%;
   direction: v-bind(scrollbarPosition);
 
+  &--small {
+    --va-scroll-container-scrollbar-size: 4px;
+  }
+
+  &--large {
+    --va-scroll-container-scrollbar-size: 8px;
+  }
+
   &__content {
     height: stretch;
     width: stretch;
diff --git a/packages/ui/src/components/va-scroll-container/_variables.scss b/packages/ui/src/components/va-scroll-container/_variables.scss
index 04fc941a818..97d879eb225 100644
--- a/packages/ui/src/components/va-scroll-container/_variables.scss
+++ b/packages/ui/src/components/va-scroll-container/_variables.scss
@@ -1,6 +1,4 @@
 :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/components/va-scroll-container/const.ts b/packages/ui/src/components/va-scroll-container/const.ts
new file mode 100644
index 00000000000..65db168b37c
--- /dev/null
+++ b/packages/ui/src/components/va-scroll-container/const.ts
@@ -0,0 +1,4 @@
+export const variables = [
+  'scrollbarGradientTo',
+  'scrollbarSize',
+] as const
diff --git a/packages/ui/src/composables/useBem.ts b/packages/ui/src/composables/useBem.ts
index 31590ba3929..79fa530f8c0 100644
--- a/packages/ui/src/composables/useBem.ts
+++ b/packages/ui/src/composables/useBem.ts
@@ -44,7 +44,7 @@ export const useBem = <ModifierKey extends string, Prefix extends string>(
     return Object
       .entries(unref(modifiersList))
       .reduce((classesObj: Record<string, boolean>, [modifierName, value]) => {
-        if (value) { classesObj[`${prefix}--${kebab(modifierName)}`] = true }
+        if (value) { classesObj[`${prefix.split('__').map(kebab).join('__')}--${kebab(modifierName)}`] = true }
         return classesObj
       }, {})
   })
diff --git a/packages/ui/src/composables/useComponentVariables.ts b/packages/ui/src/composables/useComponentVariables.ts
index fe00f685f47..42ed713cfaa 100644
--- a/packages/ui/src/composables/useComponentVariables.ts
+++ b/packages/ui/src/composables/useComponentVariables.ts
@@ -4,14 +4,13 @@ import { computed, getCurrentInstance } from 'vue'
 import { isCSSSizeValue, isCSSVariable } from '../utils/css'
 import isNil from 'lodash/isNil'
 import { SizeProps, SizesConfig } from '../services/size'
+import { useBem } from './useBem'
 
 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) {
@@ -22,52 +21,51 @@ export const renderVariablesFromConfig = <Variables extends string>(sizesConfig:
   }, {})
 }
 
-export const useComponentVariables = <Variables extends string>(variables: ReadonlyOrPlainArray<Variables>, props: SizeProps<SizesConfig<Variables, string>>, componentName = getCurrentInstance()?.type.name) => {
+export const useComponentVariables = <Variables extends string>(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
+  const computedClass = useBem(componentName, () => {
+    const size = props.size
 
-    if (!config) {
-      return undefined
+    if (size && !(typeof size === 'string' && (isCSSVariable(size) || isCSSSizeValue(size)))) {
+      return {
+        [size]: true,
+      }
     }
 
-    return renderVariablesFromConfig(config, componentName)
+    return {}
   })
 
-  const currentVariables = computed(() => {
-    const sizeProp = props.size
+  const computedStyle = computed(() => {
+    const size = props.size
 
-    const hasSize = !isNil(sizeProp)
-    const needUseSized = !(typeof sizeProp === 'string' && (isCSSVariable(sizeProp) || isCSSSizeValue(sizeProp)))
+    if (isNil(size)) {
+      return undefined
+    }
 
-    return [...variables].reduce<Record<string, string>>((acc, property) => {
-      const hasGlobalFallback = globalVariables.has(property)
-      const globalFallback = hasGlobalFallback ? `, var(${cssVariableName({ property })})` : ''
+    const sizePreset = props.sizesConfig?.[size]
 
-      const variableName = cssVariableName({ componentName, property })
-      const baseVariable = `var(${variableName}${globalFallback})`
+    if (!sizePreset) {
+      if (typeof size === 'number' || isCSSVariable(size) || isCSSSizeValue(size)) {
+        return {
+          [cssVariableName({ componentName, property: 'size' })]: sizeToAbsolute(size),
+        }
+      }
 
-      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})` : ''
+      return undefined
+    }
 
-        acc[`${variableName}-current`] = `var(${sizedName}, var(${variableName}${globalSizedFallback}))`
-      }
+    return Object.entries<string>(sizePreset.variables).reduce<Record<string, string>>((acc, [property, value]) => {
+      acc[cssVariableName({ componentName, property })] = value
 
       return acc
     }, {})
   })
 
   return computed(() => ({
-    ...variablesFromConfig.value,
-    ...currentVariables.value,
+    class: computedClass,
+    style: computedStyle.value,
   }))
 }