@shohojdhara/atomix 0.1.30 → 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.grid.scss

@@ -1,8 +1,8 @@
 @use 'settings.breakpoints' as breakpoints;
 
-$enable-grid-classes: true;
-$grid-columns: 12;
-$grid-gutter-width: 16px;
+$enable-grid-classes: true !default;
+$grid-columns: 12 !default;
+$grid-gutter-width: 16px !default;
 
 // Use breakpoints from the breakpoints module
 $container-max-widths: (

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: 536px !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;
+$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.maps.scss

@@ -89,14 +89,14 @@ $theme-colors-border-subtle-dark: (
 
 // Main theme colors map
 $theme-colors: (
-  'primary': $primary-6,
-  'secondary': $gray-6,
-  'success': $green-6,
-  'info': $blue-6,
-  'warning': $yellow-6,
-  'error': $red-6,
-  'light': $gray-1,
-  'dark': $gray-7,
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'error': $error,
+  'light': $light,
+  'dark': $dark,
 ) !default;
 
 $theme-colors-dark: (
@@ -145,6 +145,19 @@ $grays: (
   '10': $gray-10,
 ) !default;
 
+$primarys: (
+  '1': $primary-1,
+  '2': $primary-2,
+  '3': $primary-3,
+  '4': $primary-4,
+  '5': $primary-5,
+  '6': $primary-6,
+  '7': $primary-7,
+  '8': $primary-8,
+  '9': $primary-9,
+  '10': $primary-10,
+) !default;
+
 // Typography Maps
 
 $theme-font-size: (
@@ -276,3 +289,25 @@ $shadows-dark: (
   'shadow-xl': var(--#{config.$prefix}box-shadow-xl-dark),
   'shadow-inset': var(--#{config.$prefix}box-shadow-inset-dark),
 ) !default;
+
+$gradient-colors: (
+  'primary': $gradient-primary,
+  'secondary': $gradient-secondary,
+  'light': $gradient-light,
+  'dark': $gradient-dark,
+  'success': $gradient-success,
+  'info': $gradient-info,
+  'warning': $gradient-warning,
+  'error': $gradient-error,
+);
+
+$gradient-colors-dark: (
+  'primary': $gradient-primary-dark,
+  'secondary': $gradient-secondary-dark,
+  'light': $gradient-light-dark,
+  'dark': $gradient-dark-dark,
+  'success': $gradient-success-dark,
+  'info': $gradient-info-dark,
+  'warning': $gradient-warning-dark,
+  'error': $gradient-error-dark,
+);

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-font-size: $font-size-sm;
+$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;