@shohojdhara/atomix 0.2.3 → 0.2.5

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

@@ -1,86 +1,92 @@
 export interface Vec2 {
-  x: number
-  y: number
+  x: number;
+  y: number;
 }
 
 export interface ShaderOptions {
-  width: number
-  height: number
-  fragment: (uv: Vec2) => Vec2
+  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)
+  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)
+  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
+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 }
+    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
+  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"
+    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")
+    const context = this.canvas.getContext('2d');
     if (!context) {
-      throw new Error("Could not get 2D context")
+      throw new Error('Could not get 2D context');
     }
-    this.context = context
+    this.context = context;
   }
 
   updateShader(): string {
-    const { width, height } = this.options
-    const imageData = this.context.createImageData(width, height)
-    const data = imageData.data
+    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
+        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()
+    this.context.putImageData(imageData, 0, 0);
+    return this.canvas.toDataURL();
   }
 
   destroy(): void {
-    this.canvas.remove()
+    this.canvas.remove();
   }
-}
+}

package/src/lib/utils/icons.ts

@@ -35,7 +35,7 @@ export function createPhosphorIcon(name: string, size: number = 16): string {
   const path = ICON_PATHS[name] || '';
 
   if (!path) {
-    console.warn(`Icon "${name}" not found in icon library`);
+    console.warn('Icon not found in icon library:', typeof name === 'string' ? name.replace(/[^a-zA-Z0-9_-]/g, '_') : 'invalid_name');
   }
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" viewBox="0 0 256 256">

package/src/lib/utils/index.ts

@@ -6,18 +6,24 @@ export * from './dom';
 // Export icon utilities
 export * from './icons';
 
+import classNames from 'classnames';
+
 /**
- * Class name utility function to conditionally join classNames together
- * @param {...any} args - Class names or conditional class names
- * @returns {string} - Joined class names
+ * Class name utility function to conditionally join classNames together.
+ * This is a wrapper around the 'classnames' library and supports all its features:
+ * - Strings and numbers
+ * - Arrays (including nested arrays)
+ * - Objects (keys are class names, values are truthy/falsy conditions)
+ * - Mixed types
+ *
+ * @example
+ * cn('foo', 'bar'); // 'foo bar'
+ * cn('foo', { bar: true }); // 'foo bar'
+ * cn({ 'foo-bar': true }); // 'foo-bar'
+ * cn(['foo', { bar: true }]); // 'foo bar'
  */
 export function cn(...args: any[]): string {
-  return args
-    .filter(Boolean)
-    .flat()
-    .map(arg => String(arg).trim())
-    .filter(Boolean)
-    .join(' ');
+  return classNames(...args);
 }
 
 /**
@@ -26,7 +32,7 @@ export function cn(...args: any[]): string {
  * @returns A UUID v4 compatible string
  */
 export function generateUUID(): string {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
     const v = c === 'x' ? r : (r & 0x3) | 0x8;
     return v.toString(16);

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

@@ -4,29 +4,29 @@
 @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}body-bg) !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}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}body-bg) !default;
 
-$accordion-header-bg-hover:                 var(--#{config.$prefix}body-bg) !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

@@ -4,21 +4,21 @@
 
 // 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
@@ -31,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

@@ -1,10 +1,7 @@
 // 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

@@ -23,4 +23,4 @@ $breadcrumb-divider-color: var(--#{config.$prefix}tertiary-text-emphasis) !defau
 $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.card.scss

@@ -36,4 +36,4 @@ $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

@@ -164,8 +164,71 @@ $chart-bar-opacity-hover: 0.85 !default;
 // Chart Candlestick
 $chart-candlestick-wick-stroke-width: 1 !default;
 $chart-candlestick-wick-opacity: 0.8 !default;
+$chart-candlestick-wick-color: var(--atomix-tertiary-text-emphasis) !default;
+$chart-candlestick-candle-border-width: 1 !default;
+$chart-candlestick-candle-border-color: var(--atomix-border-color) !default;
+$chart-candlestick-candle-border-radius: $border-radius-sm !default;
+$chart-candlestick-transition-duration: $chart-transition-duration !default;
 $chart-volume-bar-opacity: 0.3 !default;
 $chart-volume-bar-opacity-hover: 0.6 !default;
+$chart-volume-bar-spacing: map.get($spacing-sizes, 1) !default;
+
+// Chart Treemap
+$chart-treemap-node-border-width: 1 !default;
+$chart-treemap-node-border-color: var(--atomix-border-color) !default;
+$chart-treemap-node-border-radius: $border-radius-sm !default;
+$chart-treemap-node-transition-duration: $chart-transition-duration !default;
+$chart-treemap-node-hover-scale: 1.02 !default;
+$chart-treemap-node-hover-shadow: $box-shadow-md !default;
+$chart-treemap-node-selected-border-width: 2 !default;
+$chart-treemap-node-selected-border-color: var(--atomix-primary-border-subtle) !default;
+$chart-treemap-node-selected-shadow: $box-shadow-lg !default;
+$chart-treemap-label-font-size: $font-size-sm !default;
+$chart-treemap-label-font-weight: $font-weight-medium !default;
+$chart-treemap-label-color: var(--atomix-text-primary) !default;
+$chart-treemap-label-padding: map.get($spacing-sizes, 2) !default;
+$chart-treemap-label-min-size: 1000 !default; // Minimum area to show label
+
+// Chart Funnel
+$chart-funnel-segment-border-width: 1 !default;
+$chart-funnel-segment-border-color: var(--atomix-border-color) !default;
+$chart-funnel-segment-border-radius: $border-radius-sm !default;
+$chart-funnel-segment-transition-duration: $chart-transition-duration !default;
+$chart-funnel-segment-gap: map.get($spacing-sizes, 1) !default;
+$chart-funnel-segment-hover-opacity: 0.9 !default;
+$chart-funnel-segment-hover-shadow: $box-shadow-sm !default;
+$chart-funnel-label-font-size: $font-size-sm !default;
+$chart-funnel-label-font-weight: $font-weight-medium !default;
+$chart-funnel-label-color: var(--atomix-text-primary) !default;
+$chart-funnel-label-padding: map.get($spacing-sizes, 2) !default;
+$chart-funnel-conversion-font-size: $font-size-xs !default;
+$chart-funnel-conversion-font-weight: $font-weight-semibold !default;
+$chart-funnel-conversion-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-funnel-conversion-spacing: map.get($spacing-sizes, 1) !default;
+
+// Chart Heatmap
+$chart-heatmap-cell-border-width: 1 !default;
+$chart-heatmap-cell-border-color: var(--atomix-border-color) !default;
+$chart-heatmap-cell-border-radius: $border-radius-sm !default;
+$chart-heatmap-cell-transition-duration: $chart-transition-duration !default;
+$chart-heatmap-cell-hover-scale: 1.05 !default;
+$chart-heatmap-cell-hover-shadow: $box-shadow-sm !default;
+$chart-heatmap-cell-hover-border-width: 2 !default;
+$chart-heatmap-cell-spacing: map.get($spacing-sizes, 1) !default;
+$chart-heatmap-label-font-size: $font-size-xs !default;
+$chart-heatmap-label-font-weight: $font-weight-normal !default;
+$chart-heatmap-label-color: var(--atomix-text-primary) !default;
+$chart-heatmap-axis-label-font-size: $font-size-xs !default;
+$chart-heatmap-axis-label-font-weight: $font-weight-medium !default;
+$chart-heatmap-axis-label-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-heatmap-axis-label-spacing: map.get($spacing-sizes, 2) !default;
+$chart-heatmap-legend-title-font-size: $font-size-sm !default;
+$chart-heatmap-legend-title-font-weight: $font-weight-semibold !default;
+$chart-heatmap-legend-title-color: var(--atomix-text-primary) !default;
+$chart-heatmap-legend-label-font-size: $font-size-xs !default;
+$chart-heatmap-legend-label-font-weight: $font-weight-normal !default;
+$chart-heatmap-legend-label-color: var(--atomix-secondary-text-emphasis) !default;
+$chart-heatmap-legend-spacing: map.get($spacing-sizes, 3) !default;
 
 // Chart Scatter
 $chart-scatter-point-radius: 4 !default;
@@ -180,7 +243,7 @@ $chart-brush-selection-opacity: 0.3 !default;
 
 // Chart Animations
 $chart-animation-duration: 1s !default;
-$chart-animation-delay: 0.1s !default;
+$chart-animation-delay: 1s !default;
 $chart-animation-easing: ease-out !default;
 $chart-real-time-pulse-duration: 2s !default;
 
@@ -190,7 +253,7 @@ $chart-max-data-points: 500 !default;
 $chart-debounce-delay: 100ms !default;
 
 // Chart Accessibility
-$chart-focus-outline-width: calc(var(--#{$prefix}border-width) * 2) !default;  //2px
+$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.dropdown.scss

@@ -36,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:  map.get($spacing-sizes, 2) !default; //8px
+$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

@@ -11,7 +11,7 @@ $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;
-$edge-panel-backdrop-bg: var(--#{config.$prefix}invert-bg-subtle) !default;
+$edge-panel-backdrop-bg: var(--#{config.$prefix}dark-bg-subtle) !default;
 $edge-panel-backdrop-opacity: 0.5 !default;
 $edge-panel-backdrop-blur: 10px !default;
 $edge-panel-animation-duration: 300 !default;

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

@@ -8,10 +8,10 @@
 $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-bg: var(--#{$prefix}primary-bg) !default;
+$footer-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-border-width: 1px !default;
-$footer-border-color: var(--#{$prefix}border) !default;
+$footer-border-color: var(--#{$prefix}primary-border-subtle) !default;
 
 // 2. Footer Brand Settings
 $footer-brand-margin-bottom: 1.5rem !default;
@@ -19,28 +19,32 @@ $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-name-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-brand-description-font-size: 0.875rem !default;
-$footer-brand-description-color: var(--#{$prefix}text-muted) !default;
+$footer-brand-description-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $footer-brand-description-margin-top: 0.5rem !default;
+$footer-brand-logo-margin-bottom: 1rem !default;
+$footer-brand-logo-hover-opacity: 0.8 !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-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-section-title-margin-bottom: 1rem !default;
 $footer-section-content-gap: 0.5rem !default;
+$footer-section-header-gap: 0.5rem !default;
+$footer-section-toggle-padding: 0.75rem 0 !default;
 
 // 4. Footer Link Settings
-$footer-link-color: var(--#{$prefix}text) !default;
+$footer-link-color: var(--#{$prefix}primary-text-emphasis) !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-disabled-color: var(--#{$prefix}disabled-text-emphasis) !default;
 $footer-link-text-decoration: none !default;
-$footer-link-hover-text-decoration: underline !default;
+$footer-link-hover-text-decoration: none !default;
 $footer-link-padding: 0.25rem 0 !default;
-$footer-link-transition: color 0.15s ease-in-out !default;
+$footer-link-transition: all 0.15s ease-in-out !default;
 
 // 5. Footer Social Settings
 $footer-social-gap: 0.75rem !default;
@@ -48,55 +52,55 @@ $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-bg: var(--#{$prefix}secondary-bg-subtle) !default;
+$footer-social-link-color: var(--#{$prefix}primary-text-emphasis) !default;
 $footer-social-link-hover-bg: var(--#{$prefix}primary) !default;
-$footer-social-link-hover-color: var(--#{$prefix}primary-contrast) !default;
+$footer-social-link-hover-color: var(--#{$prefix}component-active-color) !default;
 $footer-social-link-border-radius: 50% !default;
-$footer-social-link-transition: all 0.15s ease-in-out !default;
+$footer-social-link-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 // 6. Footer Newsletter Settings
-$footer-newsletter-bg: var(--#{$prefix}surface-variant) !default;
+$footer-newsletter-bg: var(--#{$prefix}secondary-bg-subtle) !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-color: var(--#{$prefix}primary-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-color: var(--#{$prefix}secondary-text-emphasis) !default;
 $footer-newsletter-description-margin-bottom: 1rem !default;
-$footer-newsletter-input-border: 1px solid var(--#{$prefix}border) !default;
+$footer-newsletter-input-border: 1px solid var(--#{$prefix}primary-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-bg: var(--#{$prefix}primary-bg-subtle) !default;
+$footer-newsletter-input-color: var(--#{$prefix}primary-text-emphasis) !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-bg: var(--#{$prefix}brand-bg-subtle) !default;
+$footer-newsletter-button-color: var(--#{$prefix}brand-text-emphasis) !default;
+$footer-newsletter-button-hover-bg: var(--#{$prefix}secondary-bg-subtle) !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;
+$footer-newsletter-button-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !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-bottom-border-top: 1px solid var(--#{$prefix}primary-border-subtle) !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-copyright-color: var(--#{$prefix}tertiary-text-emphasis) !default;
+$footer-back-to-top-color: var(--#{$prefix}primary-text-emphasis) !default;
+$footer-back-to-top-hover-color: var(--#{$prefix}secondary-text-emphasis) !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;
+$footer-back-to-top-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !default;
 
 // 8. Footer Divider Settings
 $footer-divider-margin: 2rem 0 !default;
-$footer-divider-border: 1px solid var(--#{$prefix}border) !default;
+$footer-divider-border: 1px solid var(--#{$prefix}primary-border-subtle) !default;
 $footer-divider-opacity: 0.5 !default;
 
 // 9. Footer Size Variants
@@ -110,16 +114,5 @@ $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-z-index: 100 !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.input.scss

@@ -24,7 +24,7 @@ $input-padding-y-lg: map.get($spacing-sizes, 3) !default; //12px
 
 $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-hover-border-color: $input-border-color !default;
 $input-focus-border-color: $input-hover-border-color !default;
 
 $input-invalid-border-color: var(--#{$prefix}error) !default;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use './settings.spacing'as *;
+@use './settings.spacing' as *;
 @use './settings.config' as *;
 @use './settings.typography' as *;
 

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

@@ -3,7 +3,7 @@
 @use 'settings.config' as config;
 
 $rating-star-size: map.get($spacing-sizes, 8) !default; //32px
-$rating-star-size-sm:map.get($spacing-sizes, 4) !default; //16px
+$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;