@shohojdhara/atomix 0.2.1 → 0.2.3

package/src/lib/utils/displacement-generator.ts

@@ -0,0 +1,86 @@
+export interface Vec2 {
+  x: number
+  y: number
+}
+
+export interface ShaderOptions {
+  width: number
+  height: number
+  fragment: (uv: Vec2) => Vec2
+}
+
+function smoothStep(a: number, b: number, t: number): number {
+  t = Math.max(0, Math.min(1, (t - a) / (b - a)))
+  return t * t * (3 - 2 * t)
+}
+
+function length(x: number, y: number): number {
+  return Math.sqrt(x * x + y * y)
+}
+
+function roundedRectSDF(x: number, y: number, width: number, height: number, radius: number): number {
+  const qx = Math.abs(x) - width + radius
+  const qy = Math.abs(y) - height + radius
+  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius
+}
+
+export const fragmentShaders = {
+  liquidGlass: (uv: Vec2): Vec2 => {
+    const ix = uv.x - 0.5
+    const iy = uv.y - 0.5
+    const distanceToEdge = roundedRectSDF(ix, iy, 0.3, 0.2, 0.6)
+    const displacement = smoothStep(0.8, 0, distanceToEdge - 0.15)
+    const scaled = smoothStep(0, 1, displacement)
+    return { x: ix * scaled + 0.5, y: iy * scaled + 0.5 }
+  },
+}
+
+export class ShaderDisplacementGenerator {
+  private canvas: HTMLCanvasElement
+  private context: CanvasRenderingContext2D
+
+  constructor(private options: ShaderOptions) {
+    this.canvas = document.createElement("canvas")
+    this.canvas.width = options.width
+    this.canvas.height = options.height
+    this.canvas.style.display = "none"
+
+    const context = this.canvas.getContext("2d")
+    if (!context) {
+      throw new Error("Could not get 2D context")
+    }
+    this.context = context
+  }
+
+  updateShader(): string {
+    const { width, height } = this.options
+    const imageData = this.context.createImageData(width, height)
+    const data = imageData.data
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const uv: Vec2 = { x: x / width, y: y / height }
+        const pos = this.options.fragment(uv)
+        
+        const dx = pos.x * width - x
+        const dy = pos.y * height - y
+        
+        const r = (dx / 10) + 0.5
+        const g = (dy / 10) + 0.5
+        
+        const pixelIndex = (y * width + x) * 4
+        data[pixelIndex] = Math.max(0, Math.min(255, r * 255))
+        data[pixelIndex + 1] = Math.max(0, Math.min(255, g * 255))
+        data[pixelIndex + 2] = Math.max(0, Math.min(255, g * 255))
+        data[pixelIndex + 3] = 255
+      }
+    }
+
+    this.context.putImageData(imageData, 0, 0)
+    return this.canvas.toDataURL()
+  }
+
+  destroy(): void {
+    this.canvas.remove()
+  }
+}

package/src/styles/01-settings/_index.scss

@@ -27,6 +27,7 @@
 @forward './settings.data-table';
 @forward './settings.dropdown';
 @forward './settings.edge-panel';
+@forward './settings.footer';
 @forward './settings.form';
 @forward './settings.grid';
 @forward './settings.hero';

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

@@ -2,30 +2,31 @@
 @use './settings.border-radius' as radius;
 @use './settings.config' as config;
 @use './settings.spacing' as *;
+@use './settings.colors' as *;
 
-$accordion-width: 100% !default;
-$accordion-padding-x: map.get($spacing-sizes, 5) !default;
-$accordion-padding-y: map.get($spacing-sizes, 4) !default;
+$accordion-width:                           100% !default;
+$accordion-padding-x:                       map.get($spacing-sizes, 5) !default;
+$accordion-padding-y:                       map.get($spacing-sizes, 4) !default;
 
-$accordion-border-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
-$accordion-border-color: transparent !default;
-$accordion-border-radius: radius.$border-radius-sm !default;
+$accordion-border-width:                    calc(var(--#{config.$prefix}border-width) * 2) !default;
+$accordion-border-color:                    transparent !default;
+$accordion-border-radius:                   radius.$border-radius-sm !default;
 
-$accordion-body-padding-x: $accordion-padding-x !default;
-$accordion-body-padding-y: map.get($spacing-sizes, 2) !default;
-$accordion-body-color: var(--#{config.$prefix}body-color) !default;
-$accordion-body-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$accordion-body-padding-x:                  $accordion-padding-x !default;
+$accordion-body-padding-y:                  map.get($spacing-sizes, 2) !default;
+$accordion-body-color:                      var(--#{config.$prefix}body-color) !default;
+$accordion-body-bg:                         var(--#{config.$prefix}body-bg) !default;
 
-$accordion-header-padding-x: $accordion-padding-x !default;
-$accordion-header-padding-y: $accordion-padding-y !default;
-$accordion-header-color: var(--#{config.$prefix}body-color) !default;
-$accordion-header-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
+$accordion-header-padding-x:                $accordion-padding-x !default;
+$accordion-header-padding-y:                $accordion-padding-y !default;
+$accordion-header-color:                    var(--#{config.$prefix}body-color) !default;
+$accordion-header-bg:                       var(--#{config.$prefix}body-bg)!default;
 
-$accordion-header-bg-hover: var(--#{config.$prefix}tertiary-bg-subtle) !default;
+$accordion-header-bg-hover:                 var(--#{config.$prefix}body-bg) !default;
 
-$accordion-icon-size: map.get($spacing-sizes, 5) !default;
-$accordion-icon-color: var(--#{config.$prefix}body-color) !default;
+$accordion-icon-size:                       map.get($spacing-sizes, 5) !default;
+$accordion-icon-color:                      var(--#{config.$prefix}body-color) !default;
 
-$accordion-icon-transform: 180deg !default;
+$accordion-icon-transform:                  180deg !default;
 
-$accordion-disable-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
+$accordion-disable-color:                   var(--#{config.$prefix}tertiary-text-emphasis) !default;

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

@@ -1,7 +1,7 @@
-$transition-duration: 0.3s !default;
-$easing: cubic-bezier(0.23, 1, 0.32, 1) !default;
+$transition-duration:               0.3s !default;
+$easing:                            cubic-bezier(0.23, 1, 0.32, 1) !default;
 
 // Transition variables
-$transition-base: all $transition-duration $easing !default;
-$transition-fast: all 0.15s $easing !default;
-$transition-slow: all 0.5s $easing !default;
+$transition-base:                   all $transition-duration $easing !default;
+$transition-fast:                   all 0.15s $easing !default;
+$transition-slow:                   all 0.5s $easing !default;

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

@@ -20,4 +20,4 @@ $avatar-group-more-border-color: var(--#{config.$prefix}primary-border-subtle) !
 
 // Avatar group transitions
 $avatar-group-transition-duration: 0.2s !default;
-$avatar-group-transition-timing: ease-in-out !default;
+$avatar-group-transition-timing: ease-in-out !default;

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

@@ -1,25 +1,24 @@
 @use './settings.border-radius' as radius;
-@use './settings.colors' as colors;
 @use './settings.config' as config;
 @use './settings.typography' as fonts;
 
 // Avatar sizes
 $avatar-size: (
-  xs: 24px,
-  sm: 32px,
-  md: 40px,
-  lg: 48px,
-  xl: 56px,
+        xs: 24px,
+        sm: 32px,
+        md: 40px,
+        lg: 48px,
+        xl: 56px,
 ) !default;
 
 // Avatar border radius
 $avatar-border-radius: (
-  xs: radius.$border-radius-sm,
-  sm: radius.$border-radius-sm,
-  md: radius.$border-radius,
-  lg: radius.$border-radius,
-  xl: radius.$border-radius,
-  circle: 50%,
+        xs: radius.$border-radius-sm,
+        sm: radius.$border-radius-sm,
+        md: radius.$border-radius,
+        lg: radius.$border-radius,
+        xl: radius.$border-radius,
+        circle: 50%,
 ) !default;
 
 // Avatar colors
@@ -32,15 +31,15 @@ $avatar-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $avatar-fit: cover !default;
 $avatar-initials-font-weight: fonts.$font-weight-medium !default;
 $avatar-initials-font-size: (
-  xs: fonts.$font-size-xs,
-  sm: fonts.$font-size-xs,
-  md: fonts.$font-size-sm,
-  lg: fonts.$font-size-base,
-  xl: fonts.$font-size-base,
+        xs: fonts.$font-size-xs,
+        sm: fonts.$font-size-xs,
+        md: fonts.$font-size-sm,
+        lg: fonts.$font-size-base,
+        xl: fonts.$font-size-base,
 ) !default;
 
 // Interactive states
 $avatar-hover-opacity: 0.8 !default;
 $avatar-focus-ring-width: calc(var(--#{config.$prefix}border-width) * 2) !default;
 $avatar-focus-ring-color: var(--#{config.$prefix}primary-border-subtle) !default;
-$avatar-disabled-opacity: 0.5 !default;
+$avatar-disabled-opacity: 0.5 !default;

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

@@ -0,0 +1,10 @@
+// Global effect toggles
+$background-enable-backdrop-filter: false !default;
+$background-enable-gradient-overlay: false !default;
+$background-transparency-enable: false !default;
+$background-enable-with-shadow: false !default;
+
+// Core transparency levels (used in dynamic-background-core defaults)
+$background-transparency: 0.5 !default;
+// Core blur levels (used in dynamic-background-core defaults)
+$background-blur: 2 !default;

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

@@ -15,4 +15,4 @@ $badge-border-radius: radius.$border-radius-pill !default;
 
 $badge-icon-size: map.get($spacing-sizes, 4) !default; //16px
 
-$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px
+$badge-inner-items-gap: map.get($spacing-sizes, 1.5) !default; //6px

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

@@ -4,17 +4,23 @@
 @use 'settings.typography' as fonts;
 
 $breadcrumb-font-size: fonts.$font-size-sm !default;
+
 $breadcrumb-link-padding-y: map.get(spacing.$spacing-sizes, 1) !default;
 $breadcrumb-link-padding-x: map.get(spacing.$spacing-sizes, 0) !default;
 $breadcrumb-link-border-width: map.get(spacing.$spacing-sizes, 2) !default;
+
 $breadcrumb-items-gap: map.get(spacing.$spacing-sizes, 3) !default;
+
 $breadcrumb-margin-bottom: map.get(spacing.$spacing-sizes, 4) !default;
+
+$breadcrumb-bg: null !default;
+
 $breadcrumb-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $breadcrumb-hover-color: var(--#{config.$prefix}body-color) !default;
 $breadcrumb-active-color: var(--#{config.$prefix}body-color) !default;
-$breadcrumb-bg: null !default;
+
 $breadcrumb-divider-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $breadcrumb-divider-active-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $breadcrumb-divider: '\203A' !default; // Unicode character for '›'
 $breadcrumb-divider-size: map.get(spacing.$spacing-sizes, 4) !default;
-$breadcrumb-divider-gap: map.get(spacing.$spacing-sizes, 3) !default;
+$breadcrumb-divider-gap: map.get(spacing.$spacing-sizes, 3) !default;

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

@@ -17,33 +17,33 @@ $callout-padding-y: map.get($spacing-sizes, 4) !default; //16px
 
 $callout-tost-padding-x: map.get($spacing-sizes, 4) !default; //16px
 $callout-tost-padding-y: map.get($spacing-sizes, 4) !default; //16px
-$callout-toast-bg: $white !default;
+$callout-toast-bg: var(--#{config.$prefix}body-bg) !default;
 
-$callout-bg: $white !default;
+$callout-bg: var(--#{config.$prefix}body-bg) !default;
 
 $callout-border-radius: map.get($spacing-sizes, 2) !default; //8px
-$callout-border-color: $gray-3 !default;
+$callout-border-color: var(--#{config.$prefix}border-color) !default;
 $callout-border-width: var(--#{config.$prefix}border-width) !default; //1px
 
 $callout-title-font-size: map.get($spacing-sizes, 4) !default; //16px
 $callout-title-font-weight: 600 !default;
-$callout-title-color: $gray-9 !default;
+$callout-title-color: var(--#{config.$prefix}body-color) !default;
 
 $callout-text-font-size: map.get($spacing-sizes, 3.5) !default; //14px
 $callout-text-font-weight: 400 !default;
-$callout-text-color: $gray-7 !default;
+$callout-text-color: var(--#{config.$prefix}body-color) !default;
 
 $callout-message-spacer: map.get($spacing-sizes, 3) !default; //12px
 
 $callout-icon-size: map.get($spacing-sizes, 5) !default; //20px
-$callout-icon-color: $primary !default;
+$callout-icon-color: var(--#{config.$prefix}primary) !default;
 
 $callout-close-btn-size: map.get($spacing-sizes, 5) !default; //20px
 
 $callout-actions-spacer: map.get($spacing-sizes, 2) !default; //8px
 $callout-actions-spacer-y: map.get($spacing-sizes, 3) !default; //12px
 
-$callout-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1) !default;
+$callout-box-shadow: var(--#{config.$prefix}box-shadow) !default;
 
 // Toast positions
 $callout-toast-positions: (

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

@@ -30,10 +30,10 @@ $card-bg: var(--#{config.$prefix}primary-bg-subtle) !default;
 $card-bg-hover: var(--#{config.$prefix}secondary-bg-subtle) !default;
 
 $card-icon-size: map.get($spacing-sizes, 5) !default; //20px
-$card-icon-padding: map.get($spacing-sizes, 2.5) !default; //10px
+$card-icon-padding: map.get($spacing-sizes, 1.5) !default; //10px
 $card-icon-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 $card-icon-color: var(--#{config.$prefix}brand-text-emphasis) !default;
 
 $card-width: 100% !default;
 
-$card-hover: false !default;
+$card-hover: false !default;

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

@@ -10,7 +10,7 @@
 // =============================================================================
 
 // Chart Base Settings
-$chart-border-width: 1px !default;
+$chart-border-width: var(--#{$prefix}border-width) !default; //1px
 $chart-border-color: var(--atomix-border-color) !default;
 $chart-bg: var(--atomix-body-bg) !default;
 $chart-border-radius: $border-radius-lg !default;
@@ -99,12 +99,12 @@ $chart-warning-hover: var(--atomix-warning-hover) !default;
 $chart-info-hover: var(--atomix-info-hover) !default;
 
 // Chart Effects
-$chart-backdrop-blur: 8px !default;
-$chart-header-backdrop-blur: 12px !default;
-$chart-tooltip-backdrop-blur: 16px !default;
+$chart-backdrop-blur: map.get($spacing-sizes, 2) !default; //8px
+$chart-header-backdrop-blur: map.get($spacing-sizes, 3) !default; //12px
+$chart-tooltip-backdrop-blur: map.get($spacing-sizes, 4) !default; //16px
 $chart-glassmorphism-opacity: 0.6 !default;
 $chart-pattern-opacity: 0.03 !default;
-$chart-pattern-size: 20px !default;
+$chart-pattern-size: map.get($spacing-sizes, 5) !default; //20px
 
 // Chart Transitions
 $chart-transition-duration: 0.3s !default;
@@ -113,7 +113,7 @@ $chart-hover-transform: translateY(-1px) !default;
 $chart-active-transform: translateY(0) !default;
 
 // Chart Focus
-$chart-focus-ring-width: 3px !default;
+$chart-focus-ring-width: calc(var(--#{$prefix}border-width) * 3) !default; //3px
 
 // Chart Elements
 $chart-legend-color-size: map.get($spacing-sizes, 3) !default;
@@ -190,7 +190,7 @@ $chart-max-data-points: 500 !default;
 $chart-debounce-delay: 100ms !default;
 
 // Chart Accessibility
-$chart-focus-outline-width: 2px !default;
+$chart-focus-outline-width: calc(var(--#{$prefix}border-width) * 2) !default;  //2px
 $chart-focus-outline-color: var(--atomix-focus-border-color) !default;
 $chart-keyboard-nav-highlight: var(--atomix-primary-bg-subtle) !default;
 

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

@@ -1,2 +1,5 @@
-$checkbox-group-items-spacer-y: 8px !default;
-$checkbox-group-items-spacer-x: 16px !default;
+@use 'sass:map';
+@use './settings.spacing' as *;
+
+$checkbox-group-items-spacer-y: map.get($spacing-sizes, 2) !default; //8px
+$checkbox-group-items-spacer-x: map.get($spacing-sizes, 4) !default; //16px

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

@@ -1,19 +1,25 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as fonts;
 
-$checkbox-width: 20px !default;
-$checkbox-height: 20px !default;
-$checkbox-spacer: 8px !default;
+$checkbox-width: map.get($spacing-sizes, 5) !default; //20px
+$checkbox-height: map.get($spacing-sizes, 5) !default; //20px
+
+$checkbox-spacer: map.get($spacing-sizes, 2) !default; //8px
+
 $checkbox-font-size: fonts.$font-size-base !default;
 $checkbox-text-color: var(--#{config.$prefix}body-color) !default;
 $checkbox-checked-text-color: $checkbox-text-color !default;
 $checkbox-text-color-disabled: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $checkbox-checked-text-color-disabled: var(--#{config.$prefix}disabled-text-emphasis) !default;
+
 $checkbox-bg: var(--#{config.$prefix}body-bg) !default;
 $checkbox-checked-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
 $checkbox-checked-bg-hover: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $checkbox-checked-bg-disabled: var(--#{config.$prefix}disabled-text-emphasis) !default;
-$checkbox-border-width: 1px !default;
+
+$checkbox-border-width: var(--#{config.$prefix}border-width) !default;
 $checkbox-border-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $checkbox-border-color-hover: var(--#{config.$prefix}primary-text-emphasis) !default;
 $checkbox-border-color-disabled: var(--#{config.$prefix}disabled-text-emphasis) !default;

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

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use './settings.spacing' as *;
 @use 'settings.config' as config;
 @use 'settings.typography' as typography;
 @use 'settings.border-radius' as border-radius;
@@ -9,7 +11,7 @@ $countdown-focused-time-font-size: typography.$font-size-lg !default;
 $countdown-focused-label-font-size: typography.$font-size-xs !default;
 $countdown-focused-border-radius: border-radius.$border-radius !default;
 $countdown-focused-bg: var(--#{config.$prefix}secondary-bg-subtle) !default;
-$countdown-item-padding-x: 12px !default;
-$countdown-item-padding-y: 8px !default;
-$countdown-items-gap: 4px !default;
-$countdown-focused-items-gap: 8px !default;
+$countdown-item-padding-x: map.get($spacing-sizes, 3) !default; //12px
+$countdown-item-padding-y: map.get($spacing-sizes, 2) !default; //8px
+$countdown-items-gap: map.get($spacing-sizes, 1) !default; //4px
+$countdown-focused-items-gap: map.get($spacing-sizes, 2) !default; //8px

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

@@ -1,6 +1,8 @@
+@use 'sass:map';
 @use 'settings.typography' as typography;
 @use 'settings.config' as config;
 @use 'settings.border-radius' as border-radius;
+@use './settings.spacing' as *;
 
 $dropdown-min-width: 180px !default;
 $dropdown-font-size: typography.$font-size-base !default;
@@ -8,14 +10,14 @@ $dropdown-color: var(--#{config.$prefix}body-color) !default;
 $dropdown-bg: var(--#{config.$prefix}body-bg) !default;
 $dropdown-border-color: var(--#{config.$prefix}primary-border-subtle) !default;
 $dropdown-border-radius: border-radius.$border-radius !default;
-$dropdown-border-width: 1px !default;
-$dropdown-padding-x: 0 !default;
-$dropdown-padding-y: 8px !default;
-$dropdown-spacer: 4px !default;
+$dropdown-border-width: var(--#{config.$prefix}border-width) !default;
+$dropdown-padding-x: map.get($spacing-sizes, 0) !default; //0px
+$dropdown-padding-y: map.get($spacing-sizes, 2) !default; //8px
+$dropdown-spacer: map.get($spacing-sizes, 1) !default; //4px
 $dropdown-box-shadow: var(--#{config.$prefix}box-shadow) !default;
 
-$dropdown-item-padding-x: 16px !default;
-$dropdown-item-padding-y: 8px !default;
+$dropdown-item-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$dropdown-item-padding-y: map.get($spacing-sizes, 2) !default; //8px
 $dropdown-item-hover-color: var(--#{config.$prefix}secondary-text-emphasis) !default;
 $dropdown-item-hover-bg: var(--#{config.$prefix}brand-bg-subtle) !default;
 
@@ -34,5 +36,5 @@ $dropdown-link-border-radius: border-radius.$border-radius !default;
 $dropdown-header-color: var(--#{config.$prefix}tertiary-text-emphasis) !default;
 $dropdown-header-padding: $dropdown-item-padding-y $dropdown-item-padding-x !default;
 
-$dropdown-divider-margin-y: 8px !default;
+$dropdown-divider-margin-y:  map.get($spacing-sizes, 2) !default; //8px
 $dropdown-divider-bg: var(--#{config.$prefix}primary-border-subtle) !default;

package/src/styles/01-settings/_settings.edge-panel.scss

@@ -1,12 +1,13 @@
 @use 'sass:map';
 @use 'settings.z-layers' as z-layers;
 @use 'settings.config' as config;
+@use './settings.spacing' as *;
 
 $edge-panel-zindex: map.get(z-layers.$z-layers, 5) !default;
 $edge-panel-width: 240px !default;
 $edge-panel-height: 30vh !default;
-$edge-panel-padding-x: 16px !default;
-$edge-panel-padding-y: 16px !default;
+$edge-panel-padding-x: map.get($spacing-sizes, 4) !default; //16px
+$edge-panel-padding-y: map.get($spacing-sizes, 4) !default; //16px
 $edge-panel-bg: var(--#{config.$prefix}body-bg) !default;
 $edge-panel-color: var(--#{config.$prefix}body-color) !default;
 $edge-panel-shadow: var(--#{config.$prefix}box-shadow) !default;

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