@shohojdhara/atomix 0.1.30 → 0.2.2

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

@@ -1,35 +1,101 @@
-// src/styles/01-settings/_settings.photoviewer.scss
-
 @use 'settings.config' as config;
+@use 'settings.colors' as *;
+@use 'settings.border-radius' as *;
+@use 'settings.box-shadow' as *;
+@use 'settings.typography' as *;
+// Component spacing and layout
+$photoviewer-component-spacing: 1.5rem !default;
+$photoviewer-component-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-component-background-color: var(--#{config.$prefix}body-bg) !default;
+$component-background-color: var(--#{config.$prefix}body-bg) !default;
 
-// Spacing variables
-$component-spacing: 1.25rem !default;
-$component-border-color: var(--#{config.$prefix}gray-3) !default;
-$component-background-color: transparent !default;
-
-// Modal specific variables
-$modal-background-color: var(--#{config.$prefix}gradient) !default;
-$modal-close-button-color: #fff !default;
+// Modal/backdrop variables
+$photoviewer-modal-background-color: rgba($gray-9, 0.8) !default;
+$photoviewer-modal-backdrop-blur: 12px !default;
+$photoviewer-modal-close-button-color: var(--#{config.$prefix}body-color) !default;
 
 // Panel variables
-$info-panel-width: 320px !default;
-$info-panel-background: var(--#{config.$prefix}gray-1) !default;
+$photoviewer-info-panel-width: 320px !default;
+$photoviewer-info-panel-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-info-panel-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-info-panel-shadow: $box-shadow-lg !default;
 
 // Thumbnail variables
-$thumbnail-active-border-color: var(--#{config.$prefix}brand-border-subtle) !default;
-$thumbnail-size: 56px !default;
-$thumbnail-size-large: 72px !default;
-$thumbnail-gap: 0.5rem !default;
+$photoviewer-thumbnail-active-border-color: var(--#{config.$prefix}primary) !default;
+$photoviewer-thumbnail-size: 64px !default;
+$photoviewer-thumbnail-size-large: 80px !default;
+$photoviewer-thumbnail-gap: 0.75rem !default;
+$photoviewer-thumbnail-border-radius: $border-radius !default;
+$photoviewer-thumbnail-shadow: $box-shadow-sm !default;
+$photoviewer-thumbnail-hover-shadow: $box-shadow-md !default;
 
 // Animation variables
 $photoviewer-transition-duration: 0.3s !default;
 $photoviewer-transition-timing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$photoviewer-fast-transition: 0.15s !default;
 
 // Control variables
-$control-size: 2.75rem !default;
-$control-size-small: 2.25rem !default;
-$control-border-radius: 50% !default;
-$control-background: rgba(255, 255, 255, 0.7) !default;
-$control-background-hover: var(--#{config.$prefix}primary-2) !default;
-$control-color: var(--#{config.$prefix}brand-text-emphasis) !default;
-$control-color-hover: var(--#{config.$prefix}link-hover-color) !default;
+$photoviewer-control-size: 2.75rem !default;
+$photoviewer-control-size-small: 2.25rem !default;
+$photoviewer-control-border-radius: $border-radius-pill !default;
+$photoviewer-control-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-control-background-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$photoviewer-control-color: var(--#{config.$prefix}body-color) !default;
+$photoviewer-control-color-hover: var(--#{config.$prefix}primary) !default;
+$photoviewer-control-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-control-shadow: $box-shadow-sm !default;
+$photoviewer-control-shadow-hover: $box-shadow-md !default;
+
+// Header variables
+$photoviewer-header-height: 4rem !default;
+$photoviewer-header-padding: 1rem !default;
+$photoviewer-header-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-header-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
+$photoviewer-header-shadow: $box-shadow-xs !default;
+
+// Navigation variables
+$photoviewer-nav-button-size: 3rem !default;
+$photoviewer-nav-button-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-nav-button-color: var(--#{config.$prefix}body-color) !default;
+$photoviewer-nav-button-hover-background: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$photoviewer-nav-button-hover-color: var(--#{config.$prefix}primary) !default;
+$photoviewer-nav-button-shadow: $box-shadow-sm !default;
+$photoviewer-nav-button-hover-shadow: $box-shadow-md !default;
+
+// Counter badge variables
+$photoviewer-counter-badge-background: var(--#{config.$prefix}primary) !default;
+$photoviewer-counter-badge-color: var(--#{config.$prefix}white) !default;
+$photoviewer-counter-badge-font-size: $font-size-sm !default;
+$photoviewer-counter-badge-font-weight: $font-weight-medium !default;
+$photoviewer-counter-badge-padding: 0.25rem 0.75rem !default;
+$photoviewer-counter-badge-border-radius: $border-radius-pill !default;
+
+// Image container variables
+$photoviewer-image-container-background: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-image-container-border-radius: $border-radius-lg !default;
+
+// Info panel content variables
+$photoviewer-info-title-font-size: $font-size-lg !default;
+$photoviewer-info-title-font-weight: $font-weight-semibold !default;
+$photoviewer-info-title-color: var(--#{config.$prefix}body-color) !default;
+$photoviewer-info-description-font-size: $font-size-base !default;
+$photoviewer-info-description-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$photoviewer-info-meta-font-size: $font-size-sm !default;
+$photoviewer-info-meta-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$photoviewer-info-spacing: 1rem !default;
+
+// Tag variables
+$photoviewer-tag-background: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$photoviewer-tag-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
+$photoviewer-tag-hover-background: var(--#{config.$prefix}primary-bg-subtle) !default;
+$photoviewer-tag-hover-color: var(--#{config.$prefix}primary) !default;
+$photoviewer-tag-font-size: $font-size-xs !default;
+$photoviewer-tag-font-weight: $font-weight-medium !default;
+$photoviewer-tag-padding: 0.25rem 0.5rem !default;
+$photoviewer-tag-border-radius: $border-radius-sm !default;
+
+// Dark mode support
+$photoviewer-component-background-color-dark: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-modal-background-color-dark: rgba($gray-1, 0.8) !default;
+$photoviewer-control-background-dark: var(--#{config.$prefix}body-bg) !default;
+$photoviewer-control-color-dark: var(--#{config.$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.slider.scss

@@ -0,0 +1,59 @@
+@use 'settings.config' as *;
+@use 'settings.colors' as *;
+@use 'settings.border-radius' as *;
+@use 'settings.spacing' as *;
+@use 'sass:map';
+
+// ============================================================================
+// SLIDER SETTINGS
+// ============================================================================
+
+// Base configuration
+$slider-height: 300px !default;
+$slider-width: 100% !default;
+$slider-speed: 300ms !default;
+$slider-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// Navigation
+$slider-nav-size: map.get($spacing-sizes, 11) !default; // 44px
+$slider-nav-size-mobile: map.get($spacing-sizes, 9) !default; // 36px
+$slider-nav-offset: map.get($spacing-sizes, 4) !default; // 16px
+$slider-nav-offset-mobile: map.get($spacing-sizes, 2) !default; // 8px
+$slider-nav-background: var(--#{$prefix}primary-bg-subtle) !default;
+$slider-nav-background-hover: var(--#{$prefix}secondary-bg-subtle) !default;
+$slider-nav-color: var(--#{$prefix}primary-text) !default;
+$slider-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
+$slider-nav-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2) !default;
+$slider-nav-border-radius: $border-radius-pill !default;
+
+// Pagination
+$slider-pagination-offset: map.get($spacing-sizes, 4) !default; // 16px
+$slider-pagination-offset-mobile: map.get($spacing-sizes, 3) !default; // 12px
+$slider-pagination-bullet-size: map.get($spacing-sizes, 2) !default; // 8px
+$slider-pagination-bullet-gap: map.get($spacing-sizes, 2) !default; // 8px
+$slider-pagination-bullet-background: var(--#{$prefix}tertiary-bg-subtle) !default;
+$slider-pagination-bullet-background-active: var(--#{$prefix}primary) !default;
+$slider-pagination-bullet-background-hover: var(--#{$prefix}secondary-bg-subtle) !default;
+$slider-pagination-bullet-border-radius: $border-radius-pill !default;
+
+// Slide content
+$slider-content-padding: map.get($spacing-sizes, 4) !default; // 16px
+$slider-content-padding-mobile: map.get($spacing-sizes, 3) !default; // 12px
+$slider-content-background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)) !default;
+$slider-content-color: var(--#{$prefix}light-text) !default;
+
+// Empty state
+$slider-empty-background: var(--#{$prefix}secondary-bg-subtle) !default;
+$slider-empty-border: 2px dashed var(--#{$prefix}primary-border-subtle) !default;
+$slider-empty-message-color: var(--#{$prefix}tertiary-text) !default;
+$slider-empty-border-radius: $border-radius-md !default;
+
+// Transitions
+$slider-transition: all 0.2s $slider-easing !default;
+$slider-nav-transition: all 0.2s $slider-easing !default;
+$slider-pagination-transition: all 0.2s $slider-easing !default;
+
+// Z-index layers
+$slider-z-index-base: 1 !default;
+$slider-z-index-slide-active: 2 !default;
+$slider-z-index-controls: 10 !default;

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

@@ -5,18 +5,28 @@ $spacing-sizes: (
   //00px
   1: 0.25rem,
   //04px
+  1.5: 0.375rem,
+  //6px
   2: 0.5rem,
   //08px
+  2.5: 0.625rem,
+  //10px
   3: 0.75rem,
   //12px
+  3.5: 0.875rem,
+  //14px
   4: 1rem,
   //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,
@@ -59,10 +69,12 @@ $spacing-sizes: (
   //288px
   80: 20rem,
   //320px
-  90: 22.5rem, //360px
+  90: 22.5rem,
+  //360px
+  200: 50rem, //800px
 ) !default;
 
-$spacing-important: true !default;
-$enable-negative-margins: false;
+$spacing-important: false !default;
+$enable-negative-margins: false !default;
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacing-sizes), null) !default;

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;
+$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,28 +1,30 @@
+@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;
 $tabs-nav-btn-active-color: var(--#{config.$prefix}body-color) !default;
 $tabs-nav-btn-disabled-color: var(--#{config.$prefix}disabled-text-emphasis) !default;
-$tabs-nav-btn-bg: var(--#{config.$prefix}body-bg);
-$tabs-nav-btn-bg-hover: var(--#{config.$prefix}secondary-bg-subtle);
-$tabs-nav-btn-bg-active: var(--#{config.$prefix}body-bg);
-$tabs-nav-btn-bg-disabled: var(--#{config.$prefix}body-bg);
+$tabs-nav-btn-bg: var(--#{config.$prefix}body-bg) !default;
+$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;

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

@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.typography' as typography;
 @use 'settings.config' as config;
 
 $testimonial-width: 100% !default;
-$testimonial-padding-x: 0px !default;
-$testimonial-padding-y: 0px !default;
-$testimonial-inner-spacer: 20px !default;
+$testimonial-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$testimonial-padding-y: map.get($spacing-sizes, 0) !default; //0px
+$testimonial-inner-spacer: map.get($spacing-sizes, 20) !default; //20px
 $testimonial-bg: null !default;
 $testimonial-quote-font-size: typography.$h3-font-size !default;
 $testimonial-quote-font-size-sm: typography.$font-size-md !default;
@@ -15,4 +17,4 @@ $testimonial-author-font-size: typography.$font-size-base !default;
 $testimonial-author-color: var(--#{config.$prefix}body-color) !default;
 $testimonial-author-role-font-size: typography.$font-size-xs !default;
 $testimonial-author-role-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
-$testimonial-author-inner-spacer: 12px !default;
+$testimonial-author-inner-spacer: map.get($spacing-sizes, 12) !default; //12px

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

@@ -1,8 +1,10 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as borderRadius;
 @use 'settings.typography' as typography;
 
-$toggle-gap: 12px !default;
+$toggle-gap: map.get($spacing-sizes, 3) !default; //12px
 
 $toggle-switch-on-bg: var(--#{config.$prefix}primary) !default;
 $toggle-switch-off-bg: var(--#{config.$prefix}tertiary-bg-subtle) !default;
@@ -31,4 +33,4 @@ $toggle-switch-handle-width: $toggle-switch-handle-width-md !default;
 $toggle-switch-handle-height: $toggle-switch-handle-height-md !default;
 
 $toggle-label-font-size: typography.$font-size-base !default;
-$toggle-label-color: var(--#{config.$prefix}primary-text-emphasis);
+$toggle-label-color: var(--#{config.$prefix}primary-text-emphasis) !default;

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

@@ -1,10 +1,12 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as borderRadius;
 
 $tooltip-max-width: 240px !default;
-$tooltip-padding-x: 12px !default;
-$tooltip-padding-y: 8px !default;
+$tooltip-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$tooltip-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $tooltip-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
 
 $tooltip-font-size: typography.$font-size-xs !default;
@@ -16,4 +18,4 @@ $tooltip-border-width: null !default;
 $tooltip-border-color: null !default;
 $tooltip-box-shadow: null !default;
 
-$tooltip-arrow-size: 12px !default;
+$tooltip-arrow-size: map.get($spacing-sizes, 3) !default; //12px

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

@@ -49,6 +49,8 @@ $font-size-xs: $font-size-base * 0.75 !default; //12px
 $font-size-sm: $font-size-base * 0.875 !default; //14px
 $font-size-md: $font-size-base * 1.125 !default; //18px
 $font-size-lg: $font-size-base * 1.25 !default; //20px
+$font-size-xl: $font-size-base * 1.5 !default; //20px
+$font-size-2xl: $font-size-base * 2 !default; //20px
 
 $h1-font-size: $font-size-base * 2.5 !default; //40px
 $h2-font-size: $font-size-base * 2 !default; //32px