@shohojdhara/atomix 0.5.6 → 0.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [
@@ -17,7 +17,6 @@
   "sass": "src/styles/index.scss",
   "unpkg": "dist/atomix.umd.min.js",
   "jsdelivr": "dist/atomix.umd.min.js",
-  "browser": "dist/atomix.umd.min.js",
   "bin": {
     "atomix": "scripts/atomix-cli.js"
   },
@@ -115,6 +114,7 @@
       "default": "./dist/heavy.js"
     },
     "./cdn": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/atomix.umd.min.js",
       "require": "./dist/atomix.umd.min.js",
       "default": "./dist/atomix.umd.min.js"
@@ -233,7 +233,7 @@
     "build:types": "rollup -c rollup.config.types.js",
     "build:styles": "rollup -c rollup.config.styles.js",
     "build:themes": "rollup -c rollup/config/themes.js",
-    "build:parallel": "concurrently \"npm:build:js\" \"npm:build:types\" \"npm:build:styles\"",
+    "build:parallel": "concurrently \"npm:build:js\" \"npm:build:types\" \"npm:build:styles\" \"npm:build:umd\"",
     "build:umd": "rollup -c rollup.config.umd.js",
     "build:cli": "rollup -c rollup.config.cli.js",
     "build:cli:dev": "rollup -c rollup.config.cli.js --environment NODE_ENV:development",

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -6,7 +6,6 @@ import React, {
   cloneElement,
   isValidElement,
   ElementType,
-  ComponentType,
   MouseEvent,
   AnchorHTMLAttributes,
 } from 'react';
@@ -58,10 +57,11 @@ interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   to?: string;
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  [key: string]: any;
 }
 
 // Compound Component Props
-export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
+export interface BreadcrumbItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
   /**
    * URL for the breadcrumb item
    */
@@ -85,7 +85,7 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement>
   /**
    * Optional custom link component
    */
-  linkAs?: ComponentType<LinkComponentProps>;
+  linkAs?: ElementType;
 
   /**
    * Link props to pass to the underlying anchor or linkComponent

package/src/lib/config/loader.ts

@@ -354,8 +354,11 @@ export function loadAtomixConfig(
  */
 function loadConfigAtPath(path: string, required: boolean, defaultConfig: AtomixConfig): AtomixConfig {
     try {
-        // Use dynamic import for ESM compatibility
-        const configModule = require(path);
+        // Use dynamic requirement to hide from bundlers
+        const req = typeof require !== 'undefined' ? require : undefined;
+        if (!req) return defaultConfig;
+        
+        const configModule = req(path);
         const config = configModule.default || configModule;
         
         // Validate it's an AtomixConfig
@@ -391,10 +394,28 @@ export function resolveConfigPath(configPath?: string): string | null {
         return null;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { existsSync } = require('fs') as typeof import('fs');
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { join } = require('path') as typeof import('path');
+    // Use dynamic requirement to hide from bundlers like Turbopack/Webpack
+    let nodeFs: any;
+    let nodePath: any;
+
+    try {
+        // Using a dynamic string and eval-like approach to prevent static analysis
+        // This is safe here because we've already checked for window (browser)
+        const req = typeof require !== 'undefined' ? require : undefined;
+        if (req) {
+            nodeFs = req(['f', 's'].join(''));
+            nodePath = req(['p', 'a', 't', 'h'].join(''));
+        }
+    } catch (e) {
+        return null;
+    }
+
+    if (!nodeFs || !nodePath) {
+        return null;
+    }
+
+    const { existsSync } = nodeFs;
+    const { join } = nodePath;
 
     // If a specific config path is provided, check if it exists
     if (configPath) {

package/src/lib/theme/config/configLoader.ts

@@ -29,7 +29,9 @@ export function loadThemeFromConfigSync(options?: { configPath?: string; require
   
   try {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { loadAtomixConfig: loader } = require('../../config/loader');
+    const req = typeof require !== 'undefined' ? require : undefined;
+    if (!req) throw new Error('require is not available');
+    const { loadAtomixConfig: loader } = req('../../config/loader');
     loadAtomixConfig = loader;
   } catch (error) {
     if (options?.required !== false) {
@@ -214,7 +216,10 @@ export async function loadThemeFromConfig(options?: { configPath?: string; requi
   let config: any;
   try {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const { loadAtomixConfig } = require('../../config/loader');
+    const req = typeof require !== 'undefined' ? require : undefined;
+    if (!req) throw new Error('require is not available');
+    const { loadAtomixConfig: loader } = req('../../config/loader');
+    loadAtomixConfig = loader;
     config = loadAtomixConfig({ configPath: options?.configPath, required: options?.required !== false });
   } catch (error) {
     // If loadAtomixConfig is not available (e.g., in browser bundle), provide helpful error

package/src/lib/theme/config/loader.ts

@@ -72,7 +72,8 @@ export function loadThemeConfig(
     // In ESM environments, require might be undefined.
     let nodeRequire: any;
     try {
-      nodeRequire = require;
+      // Use eval('require') or similar to hide from bundlers
+      nodeRequire = typeof require !== 'undefined' ? require : undefined;
     } catch {
       // require is not defined
     }
@@ -94,8 +95,8 @@ export function loadThemeConfig(
     
     // If a specific config path is provided, try to use it
     if (configPath && configPath !== DEFAULT_ATOMIX_CONFIG_PATH) {
-      const path = nodeRequire('path') as typeof import('path');
-      const fs = nodeRequire('fs') as typeof import('fs');
+      const path = nodeRequire(['p', 'a', 't', 'h'].join('')) as typeof import('path');
+      const fs = nodeRequire(['f', 's'].join('')) as typeof import('fs');
       const fullPath = path.resolve(process.cwd(), configPath);
       
       if (fs.existsSync(fullPath)) {
@@ -109,8 +110,8 @@ export function loadThemeConfig(
         'atomix.config.json'
       ];
       
-      const path = nodeRequire('path') as typeof import('path');
-      const fs = nodeRequire('fs') as typeof import('fs');
+      const path = nodeRequire(['p', 'a', 't', 'h'].join('')) as typeof import('path');
+      const fs = nodeRequire(['f', 's'].join('')) as typeof import('fs');
       
       for (const fileName of possiblePaths) {
         const fullPath = path.resolve(process.cwd(), fileName);
@@ -131,7 +132,7 @@ export function loadThemeConfig(
 
     // Handle JSON files differently
     if (resolvedConfigPath.endsWith('.json')) {
-      const fs = nodeRequire('fs') as typeof import('fs');
+      const fs = nodeRequire(['f', 's'].join('')) as typeof import('fs');
       configModule = JSON.parse(fs.readFileSync(resolvedConfigPath, 'utf8'));
     } else {
       // Use require (Node.js/CommonJS) for JS/TS files

package/src/styles/06-components/_components.avatar-group.scss

@@ -36,14 +36,12 @@
     color: var(--#{$prefix}avatar-group-more-color);
     font-size: var(--#{$prefix}avatar-group-more-font-size);
     font-weight: var(--#{$prefix}avatar-group-more-font-weight);
-    @include dynamic-background(var(--#{$prefix}avatar-group-more-bg));
     border: var(--#{$prefix}avatar-group-more-border-width) solid
       var(--#{$prefix}avatar-group-more-border-color);
-
-    // Inherit size and shape from avatars
     width: var(--#{$prefix}avatar-size);
     height: var(--#{$prefix}avatar-size);
     border-radius: var(--#{$prefix}avatar-border-radius);
+    @include dynamic-background(var(--#{$prefix}avatar-group-more-bg));
   }
 
   // Stacked variant

package/src/styles/06-components/_components.avatar.scss

@@ -32,12 +32,12 @@
   justify-content: center;
   @include square(var(--#{$prefix}avatar-size));
   border-radius: var(--#{$prefix}avatar-border-radius);
-  @include dynamic-background(var(--#{$prefix}avatar-bg));
   color: var(--#{$prefix}avatar-color);
   border: var(--#{$prefix}avatar-border-width) solid var(--#{$prefix}avatar-border-color);
   overflow: hidden;
   user-select: none;
   @include basic-transition(opacity);
+  @include dynamic-background(var(--#{$prefix}avatar-bg));
 
   // Size variants
   @each $size, $value in $avatar-size {

package/src/styles/06-components/_components.badge.scss

@@ -26,8 +26,8 @@
   line-height: 1;
   padding: var(--#{$prefix}tag-padding-y) var(--#{$prefix}tag-padding-x);
   border-radius: var(--#{$prefix}tag-border-radius);
-  @include dynamic-background(var(--#{$prefix}tag-bg-color));
   user-select: none;
+  @include dynamic-background(var(--#{$prefix}tag-bg-color));
 
   &__icon {
     font-size: var(--#{$prefix}tag-icon-size);
@@ -44,12 +44,12 @@
   }
 
   &--glass {
+    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 50%, transparent);
     @include dynamic-background(
       var(--#{$prefix}tag-bg-color),
       $enable-transparency: true,
       $transparency: 0.2
     );
-    border: 1px solid color-mix(in srgb, var(--#{$prefix}tag-color) 50%, transparent);
 
     // // Outer depth and glass effect
     // 0 1px 3px rgba(0, 0, 0, 0.2),

package/src/styles/06-components/_components.button.scss

@@ -44,12 +44,12 @@
   text-decoration: if(colors.$link-decoration == none, null, none);
   white-space: button.$btn-white-space;
   vertical-align: middle;
-  @include dynamic-background(var(--#{config.$prefix}btn-bg));
   cursor: if(button.$enable-button-pointers, pointer, null);
   user-select: none;
   border: var(--#{config.$prefix}btn-border-width) solid var(--#{config.$prefix}btn-border-color);
   border-radius: var(--#{config.$prefix}btn-border-radius);
   transition: button.$btn-transition;
+  @include dynamic-background(var(--#{config.$prefix}btn-bg));
 
   &__icon {
     font-size: var(--#{config.$prefix}btn-icon-size);
@@ -58,8 +58,8 @@
   &:hover {
     color: var(--#{config.$prefix}btn-hover-color);
     text-decoration: if(colors.$link-hover-decoration == underline, none, null);
-    @include dynamic-background(var(--#{config.$prefix}btn-hover-bg));
     border-color: var(--#{config.$prefix}btn-hover-border-color);
+    @include dynamic-background(var(--#{config.$prefix}btn-hover-bg));
   }
 
   @each $color, $value in color-maps.$theme-colors {
@@ -216,11 +216,11 @@
   fieldset:disabled & {
     color: var(--#{config.$prefix}btn-disabled-color);
     pointer-events: none;
-    @include dynamic-background(var(--#{config.$prefix}btn-disabled-bg));
     background-image: if(button.$enable-gradients, none, null);
     border-color: var(--#{config.$prefix}btn-disabled-border-color);
     opacity: var(--#{config.$prefix}btn-disabled-opacity);
     cursor: not-allowed;
+    @include dynamic-background(var(--#{config.$prefix}btn-disabled-bg));
 
     &:focus-visible {
       outline: none;

package/src/styles/06-components/_components.callout.scss

@@ -41,7 +41,6 @@
   max-width: var(--#{config.$prefix}callout-width);
   gap: var(--#{config.$prefix}callout-actions-spacer);
   padding: var(--#{config.$prefix}callout-padding-y) var(--#{config.$prefix}callout-padding-x);
-  @include dynamic-background(var(--#{config.$prefix}callout-bg));
   border-radius: var(--#{config.$prefix}callout-border-radius);
   border: var(--#{config.$prefix}callout-border-witdh) solid
     var(--#{config.$prefix}callout-border-color);
@@ -50,6 +49,7 @@
       var(--#{config.$prefix}callout-transition-timing),
     transform var(--#{config.$prefix}callout-transition-duration)
       var(--#{config.$prefix}callout-transition-timing);
+  @include dynamic-background(var(--#{config.$prefix}callout-bg));
 
   &__content {
     width: 100%;
@@ -145,9 +145,9 @@
     align-items: flex-start;
     justify-content: flex-start;
     border: none;
-    @include dynamic-background(var(--#{config.$prefix}callout-toast-bg));
     box-shadow: var(--#{config.$prefix}callout-box-shadow);
     animation: calloutToastIn 0.3s var(--#{config.$prefix}callout-transition-timing) forwards;
+    @include dynamic-background(var(--#{config.$prefix}callout-toast-bg));
 
     #{$root} {
       &__content {
@@ -235,13 +235,13 @@
 
     // Glass effect for toast variant
     &#{$root}--toast {
+      box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.1),
+        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
       @include dynamic-background(
         var(--#{config.$prefix}callout-bg),
         $enable-transparency: true
       );
-      box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.1),
-        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     }
   }
 

package/src/styles/06-components/_components.card.scss

@@ -42,14 +42,11 @@
   padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
   border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
   border-radius: var(--#{$prefix}card-border-radius);
-  @include basic-transition();
-
-  @include dynamic-background(var(--#{$prefix}card-bg));
-
-  // Link card support - ensure anchor elements behave like block elements
   display: block;
   text-decoration: none;
   color: inherit;
+  @include basic-transition();
+  @include dynamic-background(var(--#{$prefix}card-bg));
 
   // Reset anchor element default styles when card is used as a link
   // This needs higher specificity to override global link styles

package/src/styles/06-components/_components.checkbox.scss

@@ -34,7 +34,6 @@
   &__input {
     position: relative;
     appearance: none;
-    @include dynamic-background(var(--#{$prefix}checkbox-bg));
     width: var(--#{$prefix}checkbox-width);
     height: var(--#{$prefix}checkbox-height);
     color: currentColor;
@@ -42,6 +41,7 @@
     border-radius: var(--#{$prefix}checkbox-border-radius);
     overflow: hidden;
     @include basic-transition();
+    @include dynamic-background(var(--#{$prefix}checkbox-bg));
 
     &[type='radio'] {
       border-radius: $border-radius-pill;

package/src/styles/06-components/_components.data-table.scss

@@ -33,8 +33,8 @@
   width: 100%;
   margin-bottom: 0;
   color: var(--#{config.$prefix}data-table-color);
-  @include dynamic-background(var(--#{config.$prefix}data-table-bg));
   border-collapse: collapse;
+  @include dynamic-background(var(--#{config.$prefix}data-table-bg));
 
   // Header
   &__header {

package/src/styles/06-components/_components.datepicker.scss

@@ -106,10 +106,10 @@
     z-index: map.get($z-layers, 5);
     width: var(--#{$prefix}datepicker-width);
     padding: var(--#{$prefix}datepicker-padding-y) var(--#{$prefix}datepicker-padding-x);
-    @include dynamic-background(var(--#{$prefix}datepicker-bg));
     border-radius: var(--#{$prefix}datepicker-border-radius);
     box-shadow: var(--#{$prefix}datepicker-box-shadow);
     margin-top: rem(4px);
+    @include dynamic-background(var(--#{$prefix}datepicker-bg));
 
     // Calendar placements
     &--top-start,

package/src/styles/06-components/_components.dropdown.scss

@@ -186,17 +186,17 @@
     list-style: none;
     @include mb(0);
     border: 1px solid rgba(255, 255, 255, 0.08);
-    @include dynamic-background(var(--#{$prefix}dropdown-bg));
     border-radius: var(--#{$prefix}dropdown-border-radius);
     box-shadow: var(--#{$prefix}dropdown-box-shadow);
     overflow: hidden;
+    @include dynamic-background(var(--#{$prefix}dropdown-bg));
 
     &--glass {
+      box-shadow: var(--#{$prefix}dropdown-box-shadow);
       @include dynamic-background(
         var(--#{$prefix}dropdown-bg),
         $enable-transparency: true
       );
-      box-shadow: var(--#{$prefix}dropdown-box-shadow);
     }
   }
 
@@ -217,9 +217,9 @@
     &:hover,
     &:focus {
       color: var(--#{$prefix}dropdown-link-hover-color);
-      @include dynamic-background(var(--#{$prefix}dropdown-link-hover-bg));
       outline: none;
       padding-left: calc(var(--#{$prefix}dropdown-item-padding-x) + 3px);
+      @include dynamic-background(var(--#{$prefix}dropdown-link-hover-bg));
     }
 
     &.is-active {

package/src/styles/06-components/_components.edge-panel.scss

@@ -35,10 +35,10 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    @include dynamic-background(var(--#{$prefix}edge-panel-backdrop-bg));
     opacity: 0;
     z-index: map.get($z-layers, 1);
     transition: opacity var(--#{$prefix}edge-panel-animation-duration) ease;
+    @include dynamic-background(var(--#{$prefix}edge-panel-backdrop-bg));
 
     &.is-animating {
       animation: fadeIn 0.3s ease forwards;
@@ -55,12 +55,12 @@
     color: var(--#{$prefix}edge-panel-color);
     width: var(--#{$prefix}edge-panel-width);
     height: 100%;
-    @include dynamic-background(var(--#{$prefix}edge-panel-bg));
     box-shadow: var(--#{$prefix}edge-panel-shadow);
     z-index: map.get($z-layers, 2);
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    @include dynamic-background(var(--#{$prefix}edge-panel-bg));
 
     &.is-animating {
       animation: slideIn var(--#{$prefix}edge-panel-animation-duration)
@@ -371,10 +371,7 @@
     padding: 0;
     border-radius: inherit;
     transition: opacity 0.3s ease;
-    @include dynamic-background(
-      var(--#{$prefix}edge-panel-bg),
-      $enable-transparency: true
-    );
+    @include dynamic-background(var(--#{$prefix}edge-panel-bg), $enable-transparency: true);
   }
 
   .c-edge-panel__header {
@@ -404,13 +401,12 @@
   }
 
   .c-edge-panel__backdrop {
+    animation: fadeIn 0.3s ease forwards;
+    z-index: map.get($z-layers, 1);
     @include dynamic-background(
       var(--#{$prefix}edge-panel-backdrop-bg),
       $enable-transparency: true
     );
-    animation: fadeIn 0.3s ease forwards;
-    z-index: map.get($z-layers, 1);
-
     &.is-animating-out {
       animation: fadeOut 0.3s ease forwards;
     }

package/src/styles/06-components/_components.footer.scss

@@ -33,11 +33,11 @@
   --#{$prefix}disabled-opacity: 0.6;
 
   // Base Styles
-  @include dynamic-background(var(--#{$prefix}footer-bg));
   color: var(--#{$prefix}footer-color);
   border-top: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}footer-border-color);
   padding: var(--#{$prefix}footer-padding-y) 0;
   position: relative;
+  @include dynamic-background(var(--#{$prefix}footer-bg));
 
   &--glass {
     padding: 0;
@@ -47,10 +47,10 @@
     background: transparent;
 
     #{$root}__glass {
-      @include dynamic-background(rgba(var(--#{$prefix}footer-bg-rgb), 0.5, true));
       color: var(--#{$prefix}footer-color);
       border-top: var(--#{$prefix}footer-border-width) solid var(--#{$prefix}footer-border-color);
       padding: var(--#{$prefix}footer-padding-y) 0;
+      @include dynamic-background(rgba(var(--#{$prefix}footer-bg-rgb), 0.5, true));
     }
   }
 
@@ -333,13 +333,13 @@
       justify-content: center;
       width: #{$footer-social-link-size};
       height: #{$footer-social-link-size};
-      @include dynamic-background(#{$footer-social-link-bg});
       color: #{$footer-social-link-color};
       border-radius: #{$footer-social-link-border-radius};
       text-decoration: none;
       transition: #{$footer-social-link-transition};
       position: relative;
       overflow: hidden;
+      @include dynamic-background(#{$footer-social-link-bg});
 
       &::before {
         content: '';
@@ -357,10 +357,10 @@
 
       &:hover,
       &:focus {
-        @include dynamic-background(#{$footer-social-link-hover-bg});
         color: #{$footer-social-link-hover-color};
         transform: translateY(-3px) scale(1.05);
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        @include dynamic-background(#{$footer-social-link-hover-bg});
 
         &::before {
           transform: translateX(100%);
@@ -438,15 +438,14 @@
 
   // Newsletter
   &__newsletter {
-    @include dynamic-background(
-      linear-gradient(135deg, #{$footer-newsletter-bg}, rgba(#{$footer-newsletter-bg}, 0.8))
-    );
     padding: #{$footer-newsletter-padding};
     border-radius: #{$footer-newsletter-border-radius};
     border: 1px solid var(--#{$prefix}border-subtle);
     position: relative;
     overflow: hidden;
-
+    @include dynamic-background(
+      linear-gradient(135deg, #{$footer-newsletter-bg}, rgba(#{$footer-newsletter-bg}, 0.8))
+    );
     &::before {
       content: '';
       position: absolute;
@@ -503,13 +502,13 @@
       flex: 1;
       padding: #{$footer-newsletter-input-padding};
       font-size: #{$footer-newsletter-input-font-size};
-      @include dynamic-background(#{$footer-newsletter-input-bg});
       color: #{$footer-newsletter-input-color};
       border: #{$footer-newsletter-input-border};
       border-radius: #{$footer-newsletter-input-border-radius};
       outline: none;
       transition: all 0.3s ease;
       box-sizing: border-box;
+      @include dynamic-background(#{$footer-newsletter-input-bg});
 
       &:focus {
         border-color: #{$footer-newsletter-input-focus-border-color};
@@ -529,7 +528,6 @@
 
     &-button {
       padding: #{$footer-newsletter-button-padding};
-      @include dynamic-background(#{$footer-newsletter-button-bg});
       color: #{$footer-newsletter-button-color};
       border: none;
       border-radius: #{$footer-newsletter-button-border-radius};
@@ -539,6 +537,7 @@
       white-space: nowrap;
       position: relative;
       overflow: hidden;
+      @include dynamic-background(#{$footer-newsletter-button-bg});
 
       &::before {
         content: '';
@@ -556,9 +555,9 @@
 
       &:hover,
       &:focus {
-        @include dynamic-background(#{$footer-newsletter-button-hover-bg});
         transform: translateY(-2px);
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+        @include dynamic-background(#{$footer-newsletter-button-hover-bg});
 
         &::before {
           transform: translateX(100%);
@@ -611,7 +610,6 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1.25rem;
-    @include dynamic-background(var(--#{$prefix}secondary-bg));
     border: 1px solid var(--#{$prefix}border-subtle);
     color: #{$footer-back-to-top-color};
     font-size: #{$footer-back-to-top-font-size};
@@ -623,6 +621,7 @@
     overflow: hidden;
     text-decoration: none;
     outline: none;
+    @include dynamic-background(var(--#{$prefix}secondary-bg));
 
     &::before {
       content: '';
@@ -641,10 +640,10 @@
     &:hover,
     &:focus {
       color: #{$footer-back-to-top-hover-color};
-      @include dynamic-background(var(--#{$prefix}primary));
       border-color: var(--#{$prefix}primary);
       transform: translateY(-3px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+      @include dynamic-background(var(--#{$prefix}primary));
 
       &::before {
         transform: translateX(100%);

package/src/styles/06-components/_components.hero.scss

@@ -36,8 +36,8 @@
   display: grid;
   place-items: center;
   padding: var(--#{$prefix}hero-padding-y) var(--#{$prefix}hero-padding-x);
-  @include dynamic-background(var(--#{$prefix}hero-bg));
   overflow: hidden;
+  @include dynamic-background(var(--#{$prefix}hero-bg));
 
   &__bg {
     position: absolute;
@@ -58,9 +58,9 @@
   &__overlay {
     position: absolute;
     inset: 0;
-    @include dynamic-background(var(--#{$prefix}hero-overlay));
     opacity: var(--#{$prefix}hero-overlay-opacity);
     z-index: 1;
+    @include dynamic-background(var(--#{$prefix}hero-overlay));
   }
 
   &__container {

package/src/styles/06-components/_components.input.scss

@@ -31,8 +31,8 @@
   border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
   border-radius: var(--#{$prefix}input-border-radius);
   outline: none;
-  @include dynamic-background(var(--#{$prefix}input-bg));
   @include basic-transition();
+  @include dynamic-background(var(--#{$prefix}input-bg));
 
   &:focus,
   &:hover {
@@ -108,11 +108,11 @@
 
   // Glass morphism effect styles
   &--glass {
-    @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
     box-shadow:
       0 8px 32px rgba(0, 0, 0, 0.1),
       0 0 0 1px rgba(255, 255, 255, 0.1) inset;
     border-color: color-mix(in srgb, var(--#{$prefix}input-border-color) 50%, transparent);
+    @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
 
     &:focus,
     &:hover {
@@ -130,8 +130,8 @@
     // Glass disabled state
     &:disabled,
     &.is-disabled {
-      @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
       opacity: 0.6;
+      @include dynamic-background(var(--#{$prefix}input-bg), $enable-transparency: true);
     }
   }
 }

package/src/styles/06-components/_components.list.scss

@@ -43,8 +43,8 @@
         left: 0;
         width: var(--#{config.$prefix}list-item-dash-width);
         height: var(--#{config.$prefix}list-item-dash-height);
-        @include dynamic-background(var(--#{config.$prefix}list-color));
         transform: translateY(-50%);
+        @include dynamic-background(var(--#{config.$prefix}list-color));
       }
     }
   }