@shohojdhara/atomix 0.2.1 → 0.2.2

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

@@ -0,0 +1,125 @@
+@use 'settings.config' as *;
+
+// ============================================================================
+// FOOTER SETTINGS
+// ============================================================================
+
+// 1. Footer Base Settings
+$footer-padding-y: 3rem !default;
+$footer-padding-x: 1rem !default;
+$footer-container-max-width: 1200px !default;
+$footer-bg: var(--#{$prefix}surface) !default;
+$footer-color: var(--#{$prefix}text) !default;
+$footer-border-width: 1px !default;
+$footer-border-color: var(--#{$prefix}border) !default;
+
+// 2. Footer Brand Settings
+$footer-brand-margin-bottom: 1.5rem !default;
+$footer-brand-logo-max-width: 200px !default;
+$footer-brand-logo-max-height: 60px !default;
+$footer-brand-name-font-size: 1.5rem !default;
+$footer-brand-name-font-weight: 600 !default;
+$footer-brand-name-color: var(--#{$prefix}text-emphasis) !default;
+$footer-brand-description-font-size: 0.875rem !default;
+$footer-brand-description-color: var(--#{$prefix}text-muted) !default;
+$footer-brand-description-margin-top: 0.5rem !default;
+
+// 3. Footer Section Settings
+$footer-section-margin-bottom: 2rem !default;
+$footer-section-title-font-size: 1.125rem !default;
+$footer-section-title-font-weight: 600 !default;
+$footer-section-title-color: var(--#{$prefix}text-emphasis) !default;
+$footer-section-title-margin-bottom: 1rem !default;
+$footer-section-content-gap: 0.5rem !default;
+
+// 4. Footer Link Settings
+$footer-link-color: var(--#{$prefix}text) !default;
+$footer-link-hover-color: var(--#{$prefix}primary) !default;
+$footer-link-active-color: var(--#{$prefix}primary) !default;
+$footer-link-disabled-color: var(--#{$prefix}text-disabled) !default;
+$footer-link-text-decoration: none !default;
+$footer-link-hover-text-decoration: underline !default;
+$footer-link-padding: 0.25rem 0 !default;
+$footer-link-transition: color 0.15s ease-in-out !default;
+
+// 5. Footer Social Settings
+$footer-social-gap: 0.75rem !default;
+$footer-social-margin-top: 1rem !default;
+$footer-social-link-size: 2.5rem !default;
+$footer-social-link-size-sm: 2rem !default;
+$footer-social-link-size-lg: 3rem !default;
+$footer-social-link-bg: var(--#{$prefix}surface-variant) !default;
+$footer-social-link-color: var(--#{$prefix}text) !default;
+$footer-social-link-hover-bg: var(--#{$prefix}primary) !default;
+$footer-social-link-hover-color: var(--#{$prefix}primary-contrast) !default;
+$footer-social-link-border-radius: 50% !default;
+$footer-social-link-transition: all 0.15s ease-in-out !default;
+
+// 6. Footer Newsletter Settings
+$footer-newsletter-bg: var(--#{$prefix}surface-variant) !default;
+$footer-newsletter-padding: 1.5rem !default;
+$footer-newsletter-border-radius: 0.5rem !default;
+$footer-newsletter-title-font-size: 1.125rem !default;
+$footer-newsletter-title-font-weight: 600 !default;
+$footer-newsletter-title-color: var(--#{$prefix}text-emphasis) !default;
+$footer-newsletter-title-margin-bottom: 0.5rem !default;
+$footer-newsletter-description-font-size: 0.875rem !default;
+$footer-newsletter-description-color: var(--#{$prefix}text-muted) !default;
+$footer-newsletter-description-margin-bottom: 1rem !default;
+$footer-newsletter-input-border: 1px solid var(--#{$prefix}border) !default;
+$footer-newsletter-input-border-radius: 0.375rem !default;
+$footer-newsletter-input-padding: 0.75rem 1rem !default;
+$footer-newsletter-input-font-size: 0.875rem !default;
+$footer-newsletter-input-bg: var(--#{$prefix}surface) !default;
+$footer-newsletter-input-color: var(--#{$prefix}text) !default;
+$footer-newsletter-input-focus-border-color: var(--#{$prefix}primary) !default;
+$footer-newsletter-input-focus-box-shadow: 0 0 0 0.125rem rgba(var(--#{$prefix}primary-rgb), 0.25) !default;
+$footer-newsletter-button-bg: var(--#{$prefix}primary) !default;
+$footer-newsletter-button-color: var(--#{$prefix}primary-contrast) !default;
+$footer-newsletter-button-hover-bg: var(--#{$prefix}primary-hover) !default;
+$footer-newsletter-button-padding: 0.75rem 1.5rem !default;
+$footer-newsletter-button-border-radius: 0.375rem !default;
+$footer-newsletter-button-font-weight: 500 !default;
+$footer-newsletter-button-transition: background-color 0.15s ease-in-out !default;
+
+// 7. Footer Bottom Settings
+$footer-bottom-padding-top: 1.5rem !default;
+$footer-bottom-margin-top: 2rem !default;
+$footer-bottom-border-top: 1px solid var(--#{$prefix}border) !default;
+$footer-copyright-font-size: 0.875rem !default;
+$footer-copyright-color: var(--#{$prefix}text-muted) !default;
+$footer-back-to-top-color: var(--#{$prefix}text) !default;
+$footer-back-to-top-hover-color: var(--#{$prefix}primary) !default;
+$footer-back-to-top-font-size: 0.875rem !default;
+$footer-back-to-top-font-weight: 500 !default;
+$footer-back-to-top-transition: color 0.15s ease-in-out !default;
+
+// 8. Footer Divider Settings
+$footer-divider-margin: 2rem 0 !default;
+$footer-divider-border: 1px solid var(--#{$prefix}border) !default;
+$footer-divider-opacity: 0.5 !default;
+
+// 9. Footer Size Variants
+$footer-padding-sm: 2rem !default;
+$footer-padding-md: 3rem !default;
+$footer-padding-lg: 4rem !default;
+
+// 10. Footer Responsive Settings
+$footer-mobile-padding-y: 2rem !default;
+$footer-mobile-section-margin-bottom: 1.5rem !default;
+$footer-mobile-brand-margin-bottom: 1rem !default;
+
+// 11. Footer Sticky Settings
+$footer-sticky-z-index: 10 !default;
+$footer-sticky-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !default;
+
+// 12. Dark Mode Settings
+$footer-bg-dark: var(--#{$prefix}surface-dark) !default;
+$footer-color-dark: var(--#{$prefix}text-dark) !default;
+$footer-border-color-dark: var(--#{$prefix}border-dark) !default;
+$footer-brand-name-color-dark: var(--#{$prefix}text-emphasis-dark) !default;
+$footer-brand-description-color-dark: var(--#{$prefix}text-muted-dark) !default;
+$footer-section-title-color-dark: var(--#{$prefix}text-emphasis-dark) !default;
+$footer-link-color-dark: var(--#{$prefix}text-dark) !default;
+$footer-link-hover-color-dark: var(--#{$prefix}primary-dark) !default;
+$footer-copyright-color-dark: var(--#{$prefix}text-muted-dark) !default;

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 
@@ -5,7 +7,7 @@ $input-group-width: 100% !default;
 $input-group-label-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $input-group-label-font-size: $font-size-sm !default;
 $input-group-label-font-size-sm: $font-size-xs !default;
-$input-group-label-margin-bottom: 8px !default;
+$input-group-label-margin-bottom: map.get($spacing-sizes, 2) !default; //8px
 $input-group-helper-text-color: var(--#{$prefix}tertiary-text-emphasis) !default;
 $input-group-helper-text-font-size: $font-size-xs !default;
 $input-group-helper-text-margin-top: $input-group-label-margin-bottom !default;

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

@@ -1,6 +1,8 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as *;
 
 $form-width: 100% !default;
-$form-items-spacer-y: 32px !default;
-$form-items-spacer-x: 12px !default;
+$form-items-spacer-y: map.get($spacing-sizes, 8) !default; //32px
+$form-items-spacer-x: map.get($spacing-sizes, 3) !default; //12px

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;