@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/styles/01-settings/_settings.hero.scss

@@ -1,9 +1,11 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 
-$hero-padding-x: 0px !default;
-$hero-padding-y: 40px !default;
-$hero-spacer-y: 64px !default;
+$hero-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$hero-padding-y: map.get($spacing-sizes, 10) !default; //40px
+$hero-spacer-y: map.get($spacing-sizes, 16) !default; //64px
 
 $hero-bg: var(--#{config.$prefix}body-bg) !default;
 $hero-overlay: var(--#{config.$prefix}brand-bg-subtle) !default;
@@ -21,10 +23,10 @@ $hero-subtitle-font-weight: typography.$font-weight-normal !default;
 $hero-title-font-weight: typography.$font-weight-bold !default;
 $hero-text-font-weight: typography.$font-weight-normal !default;
 
-$hero-subtitle-margin-bottom: 12px !default;
-$hero-text-margin-top: 12px !default;
-$hero-actions-margin-top: 24px !default;
-$hero-actions-inner-gap: 12px !default;
+$hero-subtitle-margin-bottom: map.get($spacing-sizes, 3) !default; //12px
+$hero-text-margin-top: map.get($spacing-sizes, 3) !default; //12px
+$hero-actions-margin-top: map.get($spacing-sizes, 6) !default; //24px
+$hero-actions-inner-gap: map.get($spacing-sizes, 3) !default; //12px
 
 $hero-grid-gutter: 64px !default;
 $hero-content-width: 800px !default;

package/src/styles/01-settings/_settings.input.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 @use './settings.border-radius' as *;
@@ -13,14 +15,14 @@ $input-line-height-md: 20px !default;
 $input-line-height-sm: 20px !default;
 $input-line-height-lg: 24px !default;
 
-$input-padding-x: 12px !default;
-$input-padding-y: 10px !default;
-$input-padding-x-sm: 12px !default;
-$input-padding-y-sm: 6px !default;
-$input-padding-x-lg: 12px !default;
-$input-padding-y-lg: 12px !default;
+$input-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$input-padding-y: map.get($spacing-sizes, 2.5) !default; //10px
+$input-padding-x-sm: map.get($spacing-sizes, 3) !default; //12px
+$input-padding-y-sm: map.get($spacing-sizes, 1.5) !default; //6px
+$input-padding-x-lg: map.get($spacing-sizes, 3) !default; //12px
+$input-padding-y-lg: map.get($spacing-sizes, 3) !default; //12px
 
-$input-border-width: 1px !default;
+$input-border-width: var(--#{$prefix}border-width) !default;
 $input-border-color: var(--#{$prefix}primary-border-subtle) !default;
 $input-hover-border-color: var(--#{$prefix}secondary-border-subtle) !default;
 $input-focus-border-color: $input-hover-border-color !default;

package/src/styles/01-settings/_settings.list-group.scss

@@ -1,14 +1,16 @@
+@use 'sass:map';
 @use './settings.typography' as *;
 @use './settings.config' as *;
+@use './settings.spacing' as *;
 
 $list-group-width: 100% !default;
 $list-group-bg: null !default;
 
-$list-group-item-padding-y: 12px !default;
+$list-group-item-padding-y: map.get($spacing-sizes, 3) !default; //12px
 $list-group-item-padding-x: $list-group-item-padding-y !default;
 $list-group-item-font-size: $font-size-base !default;
 $list-group-item-color: var(--#{$prefix}body-color) !default;
 $list-group-item-disabled-color: var(--#{$prefix}disabled-text-emphasis) !default;
 $list-group-item-border-color: var(--#{$prefix}primary-border-subtle) !default;
-$list-group-item-border-width: 1px !default;
+$list-group-item-border-width: var(--#{$prefix}border-width) !default;
 $list-group-item-bg: var(--#{$prefix}body-bg) !default;

package/src/styles/01-settings/_settings.list.scss

@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use './settings.spacing'as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 
 $list-color: var(--#{$prefix}body-color) !default;
 $list-font-size: $font-size-base !default;
 $list-font-weight: $font-weight-normal !default;
-$list-item-gap: 4px !default;
-$list-padding-left: 20px !default;
+$list-item-gap: map.get($spacing-sizes, 1) !default; //4px
+$list-padding-left: map.get($spacing-sizes, 5) !default; //20px
 $list-item-dash-width: 12px !default;
 $list-item-dash-height: 2px !default;

package/src/styles/01-settings/_settings.menu.scss

@@ -1,35 +1,37 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 @use './settings.border-radius' as *;
 
 $menu-min-width: 160px !default;
 $menu-container-width: 1600px !default;
-$menu-padding-x: 8px !default;
+$menu-padding-x: map.get($spacing-sizes, 2) !default; //8px
 $menu-padding-y: $menu-padding-x !default;
 
 $menu-bg: var(--#{$prefix}body-bg) !default;
 $menu-border-radius: $border-radius-xxl !default;
 $menu-box-shadow: var(--#{$prefix}box-shadow) !default;
-$menu-items-gap: 4px !default;
+$menu-items-gap: map.get($spacing-sizes, 1) !default; //4px
 
-$menu-item-padding-x: 8px !default;
+$menu-item-padding-x: map.get($spacing-sizes, 2) !default; //8px
 $menu-item-padding-y: $menu-item-padding-x !default;
-$menu-item-inner-gap: 8px !default;
+$menu-item-inner-gap: map.get($spacing-sizes, 2) !default; //8px
 $menu-item-color: var(--#{$prefix}primary-text-emphasis) !default;
 $menu-item-font-size: $font-size-base !default;
 $menu-item-font-weight: $font-weight-bold !default;
 $menu-item-bg: var(--#{$prefix}body-bg) !default;
 $menu-item-bg-hover: var(--#{$prefix}secondary-bg-subtle) !default;
 $menu-item-bg-active: var(--#{$prefix}brand-bg-subtle) !default;
-$menu-item-icon-size: 20px !default;
+$menu-item-icon-size: map.get($spacing-sizes, 5) !default; //20px
 
 $menu-subitem-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $menu-subitem-color-active: var(--#{$prefix}brand-text-emphasis) !default;
 $menu-subitem-font-weight: $font-weight-normal !default;
 $menu-subitem-font-weight-active: $font-weight-medium !default;
 
-$menu-mega-padding-x: 64px !default;
-$menu-mega-padding-y: 28px !default;
-$menu-mega-grid-gap: 40px !default;
+$menu-mega-padding-x: map.get($spacing-sizes, 16) !default; //64px
+$menu-mega-padding-y: map.get($spacing-sizes, 7) !default; //28px
+$menu-mega-grid-gap: map.get($spacing-sizes, 10) !default; //40px
 $menu-mega-header-title-font-size: $font-size-lg !default;
 $menu-mega-header-title-font-weight: $font-weight-medium !default;

package/src/styles/01-settings/_settings.messages.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.border-radius' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
@@ -5,27 +7,27 @@
 
 $messages-width: 100%;
 
-$messages-padding-x: 32px !default;
+$messages-padding-x: map.get($spacing-sizes, 8) !default; //32px
 $messages-padding-y: $messages-padding-x !default;
 $messages-border-radius: $border-radius-xl !default;
 $messages-border-width: 0px !default;
 $messages-border-color: null !default;
 $messages-bg: var(--#{$prefix}secondary-bg-subtle) !default;
 
-$messages-content-margin-top: 32px !default;
+$messages-content-margin-top: map.get($spacing-sizes, 8) !default; //32px
 
-$messages-avatar-margin: 12px !default;
+$messages-avatar-margin: map.get($spacing-sizes, 3) !default; //12px
 
-$messages-items-padding-x: 0px !default;
-$messages-items-padding-y: 0px !default;
+$messages-items-padding-x: map.get($spacing-sizes, 0) !default; //0
+$messages-items-padding-y: map.get($spacing-sizes, 0) !default; //0
 $messages-items-width: 479px !default;
 $messages-items-border-width: 0px !default;
 $messages-items-border-color: transparent !default;
 $messages-items-border-radius: null !default;
-$messages-items-gap: 4px !default;
+$messages-items-gap: map.get($spacing-sizes, 1) !default; //4px
 
-$messages-text-padding-x: 12px !default;
-$messages-text-padding-y: 12px !default;
+$messages-text-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$messages-text-padding-y: map.get($spacing-sizes, 3) !default; //12px
 $messages-text-font-size: $font-size-sm !default;
 $messages-text-primary-color: var(--#{$prefix}body-color) !default;
 $messages-text-secondary-color: var(--#{$prefix}body-color) !default;
@@ -38,10 +40,10 @@ $messages-file-padding-y: $messages-text-padding-y !default;
 $messages-file-text-font-size: $messages-text-font-size !default;
 $messages-file-text-primary-color: $messages-text-primary-color !default;
 $messages-file-text-secondary-color: $messages-text-secondary-color !default;
-$messages-file-icon-size: 40px !default;
+$messages-file-icon-size: map.get($spacing-sizes, 10) !default; //40px
 $messages-file-icon-bg: $primary-2 !default;
 $messages-file-icon-bg-dark: $primary-7 !default;
-$messages-file-icon-margin-right: 8px !default;
+$messages-file-icon-margin-right: map.get($spacing-sizes, 2) !default; //8px
 $messages-file-info-font-size: $font-size-xs !default;
 $messages-file-info-color: var(--#{$prefix}tertiary-text-emphasis) !default;
 $messages-file-primary-bg: $messages-text-primary-bg !default;
@@ -52,12 +54,12 @@ $messages-image-width: 400px !default;
 $messages-image-height: 260px !default;
 $messages-image-border-radius: $border-radius-xxl !default;
 
-$messages-form-margin-top: 32px !default;
-$messages-form-row-gap: 8px !default;
-$messages-form-submit-icon-size: 24px !default;
+$messages-form-margin-top: map.get($spacing-sizes, 8) !default; //32px
+$messages-form-row-gap: map.get($spacing-sizes, 2) !default; //8px
+$messages-form-submit-icon-size: map.get($spacing-sizes, 6) !default; //24px
 
-$messages-input-padding-x: 12px !default;
-$messages-input-padding-y: 12px !default;
+$messages-input-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$messages-input-padding-y: map.get($spacing-sizes, 3) !default; //12px
 $messages-input-font-size: $font-size-base !default;
 $messages-input-color: var(--#{$prefix}body-color) !default;
 $messages-input-placeholder-color: var(--#{$prefix}tertiary-text-emphasis) !default;
@@ -65,7 +67,7 @@ $messages-input-border-width: 1px !default;
 $messages-input-border-color: var(--#{$prefix}secondary-border-subtle) !default;
 $messages-input-border-radius: $border-radius-xl !default;
 
-$messages-input-options-icons-size: 24px !default;
-$messages-input-options-row-gap: 8px !default;
+$messages-input-options-icons-size: map.get($spacing-sizes, 6) !default; //24px
+$messages-input-options-row-gap: map.get($spacing-sizes, 2) !default; //8px
 
 $messages-body-height: calc(100vh - 600px) !default;

package/src/styles/01-settings/_settings.modal.scss

@@ -1,22 +1,24 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 @use './settings.border-radius' as *;
 @use './settings.colors' as *;
 
-$modal-inner-padding: 16px !default;
+$modal-inner-padding: map.get($spacing-sizes, 4) !default; //16px
 
 $modal-content-color: null !default;
 $modal-content-bg: var(--#{$prefix}body-bg) !default;
 $modal-content-border-radius: $border-radius-xl !default;
 $modal-content-box-shadow: var(--#{$prefix}box-shadow) !default;
 
-$modal-header-padding-bottom: 12px !default;
+$modal-header-padding-bottom: map.get($spacing-sizes, 3) !default; //12px
 $modal-title-font-size: $font-size-lg !default;
-$modal-sub-margin-top: 4px !default;
+$modal-sub-margin-top: map.get($spacing-sizes, 1) !default; //4px
 $modal-sub-font-size: $font-size-sm !default;
 $modal-sub-color: var(--#{$prefix}tertiary-text-emphasis) !default;
 
-$modal-footer-items-gap: 8px !default;
+$modal-footer-items-gap: map.get($spacing-sizes, 8) !default; //8px
 
 $modal-backdrop-bg: var(--#{$prefix}invert-bg-subtle) !default;
 $modal-backdrop-opacity: 0.5 !default;

package/src/styles/01-settings/_settings.nav.scss

@@ -1,18 +1,20 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 @use './settings.border-radius' as *;
 @use './settings.colors' as *;
 
-$nav-item-gap-x: 8px !default;
+$nav-item-gap-x: map.get($spacing-sizes, 2) !default; //8px
 
-$nav-link-padding-x: 12px !default;
-$nav-link-padding-y: 8px !default;
+$nav-link-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$nav-link-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $nav-link-font-size: $font-size-base !default;
 $nav-link-font-weight: $font-weight-medium !default;
 $nav-link-color: var(--#{$prefix}body-color) !default;
 $nav-link-hover-color: $nav-link-color !default;
 $nav-link-bg: var(--#{$prefix}body-bg) !default;
 $nav-link-hover-bg: var(--#{$prefix}secondary-bg-subtle) !default;
-$nav-link-inner-gap: 8px !default;
+$nav-link-inner-gap: map.get($spacing-sizes, 2) !default; //8px
 
 $nav-icon-size: 20px !default;

package/src/styles/01-settings/_settings.navbar.scss

@@ -1,21 +1,24 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 @use './settings.colors' as *;
+@use './settings.border-radius' as *;
 
 // Navbar container and layout
-$navbar-padding-x: 64px !default;
-$navbar-padding-y: 8px !default;
+$navbar-padding-x: map.get($spacing-sizes, 16) !default; //64px
+$navbar-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $navbar-container-max-width: 1600px !default;
 $navbar-height: 56px !default;
 
 // Navbar appearance
 $navbar-bg: var(--#{$prefix}body-bg) !default;
-$navbar-border-width: 1px !default;
+$navbar-border-width: var(--#{$prefix}border-width) !default;
 $navbar-border-color: var(--#{$prefix}primary-border-subtle) !default;
 $navbar-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
 
 // Brand/logo
-$navbar-brand-margin-end: 30px !default;
+$navbar-brand-margin-end: map.get($spacing-sizes, 7.5) !default; //30px
 $navbar-brand-font-size: $font-size-lg !default;
 $navbar-brand-font-weight: $font-weight-bold !default;
 $navbar-brand-color: var(--#{$prefix}body-color) !default;
@@ -25,7 +28,7 @@ $navbar-toggler-size: 30px !default;
 $navbar-toggler-color: var(--#{$prefix}body-color) !default;
 $navbar-toggler-bg: transparent !default;
 $navbar-toggler-border: 0 !default;
-$navbar-toggler-border-radius: 4px !default;
+$navbar-toggler-border-radius: $border-radius-sm !default;
 $navbar-toggler-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !default;
 
 // Collapse/mobile menu

package/src/styles/01-settings/_settings.pagination.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 @use './settings.colors' as *;
@@ -7,8 +9,8 @@ $pagination-size: 32px !default;
 $pagination-size-sm: 24px !default;
 $pagination-size-lg: 40px !default;
 
-$pagination-padding-x: 8px !default;
-$pagination-padding-y: 8px !default;
+$pagination-padding-x: map.get($spacing-sizes, 2) !default; //8px
+$pagination-padding-y: map.get($spacing-sizes, 2) !default; //8px
 
 $pagination-font-size: $font-size-sm !default;
 
@@ -16,7 +18,7 @@ $pagination-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $pagination-bg: var(--#{$prefix}body-bg) !default;
 $pagination-border-radius: $border-radius-pill !default;
 
-$pagination-focus-border-width: 2px !default;
+$pagination-focus-border-width: calc(var(--#{$prefix}border-width) * 2) !default;
 $pagination-focus-border-color: var(--#{$prefix}brand-border-subtle) !default;
 
 $pagination-hover-color: var(--#{$prefix}body-color) !default;

package/src/styles/01-settings/_settings.popover.scss

@@ -1,13 +1,15 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as border-radius;
 
 $popover-max-width: 300px !default;
-$popover-padding-x: 16px !default;
+$popover-padding-x: map.get($spacing-sizes, 4) !default; //16px
 $popover-padding-y: $popover-padding-x !default;
-$popover-inner-gap-x: 12px !default;
-$popover-inner-gap-y: 16px !default;
+$popover-inner-gap-x: map.get($spacing-sizes, 3) !default; //12px
+$popover-inner-gap-y: map.get($spacing-sizes, 4) !default; //16px
 $popover-bg: var(--#{config.$prefix}body-bg) !default;
 $popover-border-radius: border-radius.$border-radius-xl !default;
 $popover-box-shadow: var(--#{config.$prefix}box-shadow) !default;
-$popover-arrow-size: 12px !default;
+$popover-arrow-size: map.get($spacing-sizes, 3) !default; //12px
 $popover-arrow-offset: 6px !default;

package/src/styles/01-settings/_settings.rating.scss

@@ -1,8 +1,10 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 
-$rating-star-size: 32px !default;
-$rating-star-size-sm: 16px !default;
-$rating-star-size-lg: 48px !default;
+$rating-star-size: map.get($spacing-sizes, 8) !default; //32px
+$rating-star-size-sm:map.get($spacing-sizes, 4) !default; //16px
+$rating-star-size-lg: map.get($spacing-sizes, 12) !default; //48px
 $rating-star-bg: var(--#{config.$prefix}primary) !default;
 $rating-star-half-bg: $rating-star-bg !default;
 $rating-stars-gap: 2px !default;

package/src/styles/01-settings/_settings.river.scss

@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.colors' as colors;
 
 $river-width: 100% !default;
-$river-padding-x: 0px !default;
-$river-padding-y: 40px !default;
+$river-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$river-padding-y: map.get($spacing-sizes, 10) !default; //40px
 $river-border-radius: 0px;
 $river-bg: var(--#{config.$prefix}body-bg) !default;
 $river-overlay: colors.$dark !default;
@@ -19,14 +21,14 @@ $river-text-font-weight: typography.$font-weight-normal !default;
 $river-title-color: var(--#{config.$prefix}body-color) !default;
 $river-text-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
 
-$river-text-margin-top: 12px !default;
-$river-actions-margin-top: 12px !default;
-$river-actions-spacing-x: 12px !default;
+$river-text-margin-top: map.get($spacing-sizes, 3) !default; //12px
+$river-actions-margin-top: map.get($spacing-sizes, 3) !default; //12px
+$river-actions-spacing-x: map.get($spacing-sizes, 3) !default; //12px
 
 $river-image-border-radius: 0px !default;
 $river-image-box-shadow: null !default;
 
-$river-spacing-inner: 64px !default;
+$river-spacing-inner: map.get($spacing-sizes, 16) !default; //64px
 
 $river-content-max-width: 536px !default;
 

package/src/styles/01-settings/_settings.sectionintro.scss

@@ -1,8 +1,10 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.typography' as typography;
 @use 'settings.config' as config;
 
-$sectionintro-padding-x: 0px !default;
-$sectionintro-padding-y: 40px !default;
+$sectionintro-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$sectionintro-padding-y: map.get($spacing-sizes, 10) !default; //40px
 
 $sectionintro-title-font-size: typography.$h1-font-size !default;
 $sectionintro-text-font-size: typography.$font-size-base !default;
@@ -13,9 +15,9 @@ $sectionintro-text-color: var(--#{config.$prefix}body-color) !default;
 $sectionintro-title-font-weight: typography.$font-weight-bold !default;
 $sectionintro-text-font-weight: typography.$font-weight-normal !default;
 
-$sectionintro-label-margin-bottom: 12px !default;
-$sectionintro-text-margin-top: 12px !default;
-$sectionintro-actions-margin-top: 23px !default;
-$sectionintro-actions-inner-gap: 12px !default;
+$sectionintro-label-margin-bottom: map.get($spacing-sizes, 3) !default; //12px
+$sectionintro-text-margin-top: map.get($spacing-sizes, 3) !default; //12px
+$sectionintro-actions-margin-top: map.get($spacing-sizes, 3) !default; //12px
+$sectionintro-actions-inner-gap: map.get($spacing-sizes, 3) !default; //12px
 
 $sectionintro-width: 648px !default;

package/src/styles/01-settings/_settings.select.scss

@@ -1,14 +1,16 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as border-radius;
 
 $select-width: 300px !default;
-$select-padding-x: 12px !default;
+$select-padding-x: map.get($spacing-sizes, 3) !default; //12px
 $select-padding-y: $select-padding-x !default;
 $select-color: var(--#{config.$prefix}body-color) !default;
 $select-font-size: typography.$font-size-sm !default;
 $select-font-size-lg: typography.$font-size-base !default;
-$select-icon-toggle-size: 20px !default;
+$select-icon-toggle-size: map.get($spacing-sizes, 5) !default; //20px
 $select-icon-toggle-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
 $select-placeholder-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $select-bg: var(--#{config.$prefix}body-bg) !default;
@@ -16,9 +18,9 @@ $select-expanded-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
 $select-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $select-border-color-hover: var(--#{config.$prefix}secondary-border-subtle) !default;
 $select-border-radius: border-radius.$border-radius-xl !default;
-$select-inner-spacer: 8px !default;
-$select-dropdown-icon-size: 24px !default;
-$select-panel-padding-x: 8px !default;
+$select-inner-spacer: map.get($spacing-sizes, 2) !default; //8px
+$select-dropdown-icon-size: map.get($spacing-sizes, 6) !default; //24px
+$select-panel-padding-x: map.get($spacing-sizes, 2) !default; //8px
 $select-panel-padding-y: $select-panel-padding-x !default;
 $select-panel-spacer-y: $select-panel-padding-y !default;
 $select-panel-bg: var(--#{config.$prefix}body-bg) !default;

package/src/styles/01-settings/_settings.side-menu.scss

@@ -1,14 +1,16 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as border-radius;
 @use 'settings.typography' as typography;
 @use 'settings.colors' as *;
 
 // Side menu container
-$side-menu-padding-x: 20px !default;
-$side-menu-padding-y: 24px !default;
+$side-menu-padding-x: map.get($spacing-sizes, 5) !default; //20px
+$side-menu-padding-y: map.get($spacing-sizes, 6) !default; //24px
 $side-menu-bg: var(--#{config.$prefix}body-bg) !default;
 $side-menu-border-radius: border-radius.$border-radius-xl !default;
-$side-menu-border-width: 1px !default;
+$side-menu-border-width: var(--#{config.$prefix}border-width) !default;
 $side-menu-border-color: var(--#{config.$prefix}border-color) !default;
 $side-menu-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
 
@@ -16,19 +18,19 @@ $side-menu-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
 $side-menu-title-font-size: typography.$font-size-base !default;
 $side-menu-title-font-weight: typography.$font-weight-medium !default;
 $side-menu-title-color: var(--#{config.$prefix}body-color) !default;
-$side-menu-title-spacer-y: 8px !default;
+$side-menu-title-spacer-y: map.get($spacing-sizes, 2) !default; //8px
 
 // Side menu toggler
-$side-menu-toggler-padding-x: 12px !default;
-$side-menu-toggler-padding-y: 8px !default;
+$side-menu-toggler-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$side-menu-toggler-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $side-menu-toggler-bg: transparent !default;
 $side-menu-toggler-hover-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
 $side-menu-toggler-border-radius: border-radius.$border-radius-md !default;
 $side-menu-toggler-transition: all 0.2s ease-in-out !default;
 
 // Side menu items
-$side-menu-item-padding-x: 12px !default;
-$side-menu-item-padding-y: 8px !default;
+$side-menu-item-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$side-menu-item-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $side-menu-item-font-size: typography.$font-size-sm !default;
 $side-menu-item-font-weight: typography.$font-weight-normal !default;
 $side-menu-item-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
@@ -41,19 +43,19 @@ $side-menu-item-active-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 $side-menu-item-disabled-bg: transparent !default;
 $side-menu-item-border-radius: border-radius.$border-radius-md !default;
 $side-menu-item-transition: all 0.2s ease-in-out !default;
-$side-menu-item-gap: 8px !default;
+$side-menu-item-gap: map.get($spacing-sizes, 2) !default; //8px
 
 // Side menu list
-$side-menu-list-margin-bottom: 12px !default;
+$side-menu-list-margin-bottom: map.get($spacing-sizes, 3) !default; //12px
 $side-menu-list-gap: 2px !default;
 
 // Side menu wrapper (for mobile animation)
 $side-menu-wrapper-transition: height 0.3s ease-in-out !default;
-$side-menu-inner-padding-top: 20px !default;
+$side-menu-inner-padding-top: map.get($spacing-sizes, 5) !default; //20px
 
 // Mobile responsive
-$side-menu-mobile-padding-x: 16px !default;
-$side-menu-mobile-padding-y: 12px !default;
+$side-menu-mobile-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$side-menu-mobile-padding-y: map.get($spacing-sizes, 4) !default; //16px
 
 // Dark mode variants
 $side-menu-bg-dark: var(--#{config.$prefix}gray-9) !default;

package/src/styles/01-settings/_settings.spacing.scss

@@ -19,10 +19,14 @@ $spacing-sizes: (
   //16px
   5: 1.25rem,
   //20px
+  5.5: 1.375rem,
+  //22px
   6: 1.5rem,
   //24px
   7: 1.75rem,
   //28px
+  7.5: 1.875rem,
+  //30px
   8: 2rem,
   //32px
   9: 2.25rem,

package/src/styles/01-settings/_settings.steps.scss

@@ -1,9 +1,11 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as border-radius;
 
-$steps-padding-x: 0px !default;
-$steps-padding-y: 0px !default;
+$steps-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$steps-padding-y: map.get($spacing-sizes, 0) !default; //0px
 
 $steps-item-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $steps-item-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
@@ -12,15 +14,15 @@ $steps-item-active-bg: var(--#{config.$prefix}primary) !default;
 $steps-item-number-bg: $steps-item-bg !default;
 $steps-item-number-color: $steps-item-color !default;
 $steps-item-number-active-color: var(--#{config.$prefix}gray-1) !default;
-$steps-item-number-size: 28px !default;
+$steps-item-number-size: map.get($spacing-sizes, 7) !default; //24px
 $steps-item-number-font-size: typography.$font-size-sm !default;
 $steps-item-number-border-radius: border-radius.$border-radius-pill !default;
 $steps-item-font-size: typography.$font-size-sm !default;
-$steps-item-content-gap: 8px !default;
+$steps-item-content-gap: map.get($spacing-sizes, 2) !default; //8px
 
 $steps-line-height: 1px !default;
 $steps-line-width: 40px !default;
-$steps-gap: 12px !default;
+$steps-gap: map.get($spacing-sizes, 3) !default; //12px
 
 $steps-line-height-vertical: 40px !default;
 $steps-line-width-vertical: 1px !default;

package/src/styles/01-settings/_settings.tabs.scss

@@ -1,11 +1,13 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'sass:math';
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.grid' as grid;
 
 $tabs-width: 100% !default;
-$tabs-nav-btn-padding-x: 8px !default;
-$tabs-nav-btn-padding-y: 12px !default;
+$tabs-nav-btn-padding-x: map.get($spacing-sizes, 2) !default; //8px
+$tabs-nav-btn-padding-y: map.get($spacing-sizes, 3) !default; //12px
 $tabs-nav-btn-font-size: typography.$font-size-base !default;
 $tabs-nav-btn-font-weight: typography.$font-weight-medium !default;
 $tabs-nav-btn-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
@@ -16,13 +18,13 @@ $tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
 $tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg) !default;
 $tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg) !default;
 $tabs-nav-btn-border-radius: 0px !default;
-$tabs-nav-btn-border-width: 2px !default;
+$tabs-nav-btn-border-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
 $tabs-nav-btn-border-color: transparent !default;
 $tabs-nav-btn-border-active-color: var(--#{config.$prefix}brand-border-subtle) !default;
 $tabs-nav-btn-border-disabled-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $tabs-nav-btns-gap: 0px !default;
-$tabs-nav-btn-inner-gap: 8px !default;
-$tab-nav-btn-icon-size: 20px !default;
+$tabs-nav-btn-inner-gap:map.get($spacing-sizes, 2) !default; //8px
+$tab-nav-btn-icon-size: map.get($spacing-sizes, 5) !default; //20px
 
 $tabs-panel-padding-x: math.div(grid.$grid-gutter-width, 2) !default;
 $tabs-panel-padding-y: $tabs-panel-padding-x !default;