@app-studio/web 0.8.82 → 0.8.83

package/dist/web.umd.development.js

@@ -2792,71 +2792,70 @@
    * Get theme styles for different alert variants based on theme mode
    */
   var getThemes = themeMode => {
-    var isDarkMode = themeMode === 'dark';
     return {
       default: {
         container: {
-          backgroundColor: isDarkMode ? 'color.gray.800' : 'color.gray.50',
-          borderColor: isDarkMode ? 'color.gray.700' : 'color.gray.200',
-          boxShadow: isDarkMode ? '0 1px 2px rgba(0, 0, 0, 0.2)' : '0 1px 2px rgba(0, 0, 0, 0.05)'
+          backgroundColor: 'color.gray.50',
+          borderColor: 'color.gray.200',
+          boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)'
         },
         content: {
-          color: isDarkMode ? 'color.gray.300' : 'color.gray.700'
+          color: 'color.gray.700'
         },
         icon: {
-          color: isDarkMode ? 'color.gray.400' : 'color.gray.500'
+          color: 'color.gray.500'
         }
       },
       info: {
         container: {
-          backgroundColor: isDarkMode ? 'color.blue.900' : 'color.blue.50',
-          borderColor: isDarkMode ? 'color.blue.800' : 'color.blue.200',
-          boxShadow: isDarkMode ? '0 1px 2px rgba(59, 130, 246, 0.2)' : '0 1px 2px rgba(59, 130, 246, 0.05)'
+          backgroundColor: 'color.blue.50',
+          borderColor: 'color.blue.200',
+          boxShadow: '0 1px 2px rgba(59, 130, 246, 0.05)'
         },
         content: {
-          color: isDarkMode ? 'color.blue.300' : 'color.blue.700'
+          color: 'color.blue.700'
         },
         icon: {
-          color: isDarkMode ? 'color.blue.400' : 'color.blue.500'
+          color: 'color.blue.500'
         }
       },
       success: {
         container: {
-          backgroundColor: isDarkMode ? 'color.green.900' : 'color.green.50',
-          borderColor: isDarkMode ? 'color.green.800' : 'color.green.200',
-          boxShadow: isDarkMode ? '0 1px 2px rgba(34, 197, 94, 0.2)' : '0 1px 2px rgba(34, 197, 94, 0.05)'
+          backgroundColor: 'color.green.50',
+          borderColor: 'color.green.200',
+          boxShadow: '0 1px 2px rgba(34, 197, 94, 0.05)'
         },
         content: {
-          color: isDarkMode ? 'color.green.300' : 'color.green.700'
+          color: 'color.green.700'
         },
         icon: {
-          color: isDarkMode ? 'color.green.400' : 'color.green.500'
+          color: 'color.green.500'
         }
       },
       error: {
         container: {
-          backgroundColor: isDarkMode ? 'color.red.900' : 'color.red.50',
-          borderColor: isDarkMode ? 'color.red.800' : 'color.red.200',
-          boxShadow: isDarkMode ? '0 1px 2px rgba(239, 68, 68, 0.2)' : '0 1px 2px rgba(239, 68, 68, 0.05)'
+          backgroundColor: 'color.red.50',
+          borderColor: 'color.red.200',
+          boxShadow: '0 1px 2px rgba(239, 68, 68, 0.05)'
         },
         content: {
-          color: isDarkMode ? 'color.red.300' : 'color.red.700'
+          color: 'color.red.700'
         },
         icon: {
-          color: isDarkMode ? 'color.red.400' : 'color.red.500'
+          color: 'color.red.500'
         }
       },
       warning: {
         container: {
-          backgroundColor: isDarkMode ? 'color.orange.900' : 'color.orange.50',
-          borderColor: isDarkMode ? 'color.orange.800' : 'color.orange.200',
-          boxShadow: isDarkMode ? '0 1px 2px rgba(249, 115, 22, 0.2)' : '0 1px 2px rgba(249, 115, 22, 0.05)'
+          backgroundColor: 'color.orange.50',
+          borderColor: 'color.orange.200',
+          boxShadow: '0 1px 2px rgba(249, 115, 22, 0.05)'
         },
         content: {
-          color: isDarkMode ? 'color.orange.300' : 'color.orange.700'
+          color: 'color.orange.700'
         },
         icon: {
-          color: isDarkMode ? 'color.orange.400' : 'color.orange.500'
+          color: 'color.orange.500'
         }
       }
     };
@@ -2879,8 +2878,7 @@
     var {
       themeMode
     } = appStudio.useTheme();
-    var currentThemeMode = elementMode || themeMode;
-    var themes = getThemes(currentThemeMode);
+    var themes = getThemes();
     // Select the appropriate icon based on the variant
     var getIcon = () => {
       var _views$icon$color, _views$icon;
@@ -3209,11 +3207,10 @@
    * Get badge variants with consistent styling based on theme mode
    */
   var getBadgeVariants = themeMode => {
-    var isDarkMode = themeMode === 'dark';
     return {
       filled: {
         backgroundColor: 'theme.primary',
-        color: isDarkMode ? 'color.gray.900' : 'color.white',
+        color: 'color.white',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'transparent',
@@ -3239,7 +3236,7 @@
       },
       ghost: {
         backgroundColor: 'transparent',
-        color: isDarkMode ? 'color.gray.400' : 'color.gray.500',
+        color: 'color.gray.500',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'transparent',
@@ -3267,8 +3264,7 @@
     var {
       themeMode
     } = appStudio.useTheme();
-    var currentThemeMode = elementMode || themeMode;
-    var variantStyles = getBadgeVariants(currentThemeMode)[variant];
+    var variantStyles = getBadgeVariants()[variant];
     // Combine styles for the badge
     var combinedStyles = Object.assign({
       // Base styles
@@ -3530,7 +3526,9 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
+    var colorStyle = getColor(color, {
+      themeMode: elementMode ? elementMode : themeMode
+    });
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -3577,7 +3575,9 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
+    var colorStyle = getColor(color, {
+      themeMode: elementMode ? elementMode : themeMode
+    });
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -3623,7 +3623,9 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var colorStyle = getColor(color, elementMode ? elementMode : themeMode);
+    var colorStyle = getColor(color, {
+      themeMode: elementMode ? elementMode : themeMode
+    });
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
     var [angle, setAngle] = React.useState(0);
     React.useEffect(() => {
@@ -3690,9 +3692,10 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  var _excluded$a = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "views", "colorScheme"],
+  var _excluded$a = ["icon", "shadow", "children", "ariaLabel", "to", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered", "isExternal", "themeMode", "views", "color", "backgroundColor"],
     _excluded2$3 = ["_hover", "_active"],
     _excluded3$3 = ["height"];
+  // Using require for contrast as it seems to be a common pattern in your code
   var contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -3714,13 +3717,16 @@
         onClick = () => {},
         loaderProps = {},
         loaderPosition = 'left',
-        effect = 'default',
-        isHovered,
+        effect = 'default' // 'default', 'hover', 'reverse'
+        ,
         setIsHovered = () => {},
         isExternal = false,
         themeMode: elementMode,
+        // Allow overriding themeMode for this element
         views,
-        colorScheme = 'theme.primary'
+        color,
+        // Text color prop
+        backgroundColor = 'theme.primary' // Background color prop
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     var {
@@ -3732,83 +3738,170 @@
     var defaultNativeProps = {
       disabled: !isActive
     };
-    var buttonColor = isActive ? colorScheme : 'theme.disabled';
-    var hovering = isHovered && effect === 'hover';
-    var reverse = isHovered && effect === 'reverse';
-    // Determine if the button color is light or dark for proper contrast
-    var buttonMode = elementMode ? elementMode : themeMode;
-    var reverseMode = reverse && buttonMode == 'light' ? 'dark' : "light"; // Slightly darker
-    var isLight = contrast(getColor(buttonColor, buttonMode)) == 'light';
-    // Define button variants with effect support
-    var ButtonVariants = {
-      filled: {
-        backgroundColor: reverse ? 'transparent' : buttonColor,
-        color: reverse ? isLight ? 'white' : buttonColor : isLight ? buttonColor : 'white',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: reverse ? buttonColor : 'transparent',
-        _hover: {
-          themeMode: reverse && buttonMode == 'light' ? 'light' : "dark",
-          transform: 'translateY(-1px)',
-          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)'
+    // Determine the base background color key/value, considering disabled state
+    var buttonBackgroundColorKey = isActive ? backgroundColor : 'theme.disabled';
+    // --- Provided Color Logic ---
+    // Determine the effective theme mode for this button
+    var mode = elementMode != null ? elementMode : themeMode; // effective mode
+    // Resolve the base background color string
+    var bg = getColor(buttonBackgroundColorKey, {
+      themeMode: mode
+    });
+    // Resolve the background color string in the opposite theme mode (for reverse effect, though not directly used for ghost/outline text contrast)
+    // const bgHover = getColor(buttonBackgroundColorKey, {
+    //   themeMode: mode === 'light' ? 'dark' : 'light',
+    // }); // bgHover is not strictly needed for the text contrast logic below
+    // Check contrast of base background
+    var isBgLight = contrast(bg) === mode;
+    // Determine contrasting text color key for the base background
+    var txtOnBgKey = isBgLight ? 'color.black' : 'color.white';
+    // --- End Provided Color Logic ---
+    // Determine the default text color key/value if 'color' prop is not provided
+    // For filled buttons, default text color should contrast with the background (use txtOnBgKey).
+    // For outline/link/ghost, a theme-appropriate text color is usually better (e.g., theme.text or theme.primary).
+    var defaultTextColorKey;
+    if (variant === 'filled') {
+      defaultTextColorKey = txtOnBgKey; // Use the calculated contrasting color key
+    } else {
+      // For non-filled variants, default to theme's text color or primary color
+      defaultTextColorKey = 'theme.primary'; // Or 'theme.primary' depending on design system
+    }
+    // Determine the actual key/value for the base text color
+    // Use the provided 'color' prop if available, otherwise use the calculated default
+    var baseTextColorKey = color || defaultTextColorKey;
+    // Resolve the actual base text color string
+    var resolvedBaseTextColor = getColor(baseTextColorKey, {
+      themeMode: mode
+    });
+    // Resolve the contrasting color string for the base background (used for text in outline/ghost reverse)
+    var contrastingColorForBg = getColor(txtOnBgKey, {
+      themeMode: mode
+    });
+    // Resolve the contrasting color string for the base text color (used for text in ghost reverse)
+    var isBaseTextLight = contrast(resolvedBaseTextColor) === 'light';
+    var contrastingColorForBaseText = getColor(isBaseTextLight ? 'color.black' : 'color.white', {
+      themeMode: mode
+    });
+    // --- Button Variant Styles Function ---
+    // This function calculates the styles based on the current state (base, hover, active)
+    var getButtonVariantStyles = _ref2 => {
+      var {
+        currentVariant,
+        currentEffect,
+        resolvedBg,
+        // Resolved base background color string (bg)
+        resolvedBaseTextColor,
+        // Resolved base text color string
+        contrastingColorForBg,
+        // Resolved contrasting color string for resolvedBg
+        contrastingColorForBaseText,
+        // Resolved contrasting color string for resolvedBaseTextColor
+        resolvedBorderColor
+      } = _ref2;
+      // Define the base styles for each variant
+      var baseStyles = {
+        filled: {
+          backgroundColor: resolvedBg,
+          color: resolvedBaseTextColor,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: 'transparent'
         },
-        _active: {
-          themeMode: reverse && buttonMode == 'light' ? 'light' : "dark",
-          transform: 'translateY(0)',
-          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
-        }
-      },
-      outline: {
-        backgroundColor: reverse ? buttonColor : 'transparent',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: reverse ? buttonColor : colorScheme,
-        color: reverse ? 'white' : buttonColor,
-        _hover: {
-          themeMode: reverse ? reverseMode : buttonMode,
-          transform: 'translateY(-1px)',
-          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.05)'
+        outline: {
+          backgroundColor: 'transparent',
+          color: resolvedBaseTextColor,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: resolvedBorderColor
         },
-        _active: {
-          themeMode: reverse ? reverseMode : buttonMode,
-          transform: 'translateY(0)',
-          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
-        }
-      },
-      link: {
-        backgroundColor: 'transparent',
-        borderWidth: 0,
-        borderStyle: 'none',
-        borderColor: 'transparent',
-        color: buttonColor,
-        textDecoration: reverse ? 'none' : 'underline',
-        _hover: {
-          opacity: 0.8,
-          textDecorationThickness: '2px'
+        link: {
+          backgroundColor: 'transparent',
+          color: resolvedBg,
+          borderWidth: 0,
+          borderStyle: 'none',
+          borderColor: 'transparent',
+          textDecoration: 'underline'
         },
-        _active: {
-          opacity: 0.8,
-          textDecorationThickness: '2px'
+        ghost: {
+          backgroundColor: 'transparent',
+          color: resolvedBaseTextColor,
+          borderWidth: 0,
+          borderStyle: 'none',
+          borderColor: 'transparent'
         }
-      },
-      ghost: {
-        backgroundColor: reverse ? buttonColor : 'transparent',
-        color: reverse ? 'white' : buttonColor,
-        borderWidth: 0,
-        borderStyle: 'none',
-        borderColor: 'transparent',
-        _hover: {
-          themeMode: reverse ? reverseMode : buttonMode,
-          transform: 'translateY(-1px)'
+      };
+      // Define the styles applied on hover/active when effect is 'reverse'
+      var reverseHoverActiveStyles = {
+        filled: {
+          backgroundColor: 'transparent',
+          color: resolvedBg,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: resolvedBg
         },
-        _active: {
-          themeMode: reverse ? reverseMode : buttonMode,
-          transform: 'translateY(0)'
+        outline: {
+          backgroundColor: resolvedBg,
+          color: contrastingColorForBg,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: 'transparent'
+        },
+        link: {
+          backgroundColor: 'transparent',
+          color: resolvedBg,
+          borderWidth: 0,
+          borderStyle: 'none',
+          borderColor: 'transparent',
+          textDecoration: 'none'
+        },
+        ghost: {
+          backgroundColor: resolvedBg,
+          color: contrastingColorForBaseText,
+          borderWidth: 0,
+          borderStyle: 'none',
+          borderColor: 'transparent'
         }
-      }
+      };
+      // General hover/active effects (transform, shadow, opacity, etc.)
+      var generalHoverStyles = {
+        transform: 'translateY(2px)',
+        boxShadow: currentVariant === 'link' ? undefined : '0 4px 8px rgba(0, 0, 0, 0.1)',
+        // opacity: currentVariant === 'link' ? 0.8 : undefined,
+        textDecorationThickness: currentVariant === 'link' ? '2px' : undefined
+      };
+      var generalActiveStyles = {
+        transform: 'translateY(-1px)',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        opacity: currentVariant === 'link' ? 0.8 : undefined,
+        textDecorationThickness: currentVariant === 'link' ? '2px' : undefined
+      };
+      // Combine base styles with conditional hover/active overrides
+      return Object.assign({}, baseStyles[currentVariant], {
+        _hover: Object.assign({}, currentEffect === 'reverse' ? reverseHoverActiveStyles[currentVariant] : {}, currentEffect === 'hover' ? {
+          filter: 'brightness(0.85)'
+        } : {}, generalHoverStyles),
+        _active: Object.assign({}, currentEffect === 'reverse' ? reverseHoverActiveStyles[currentVariant] : {}, currentEffect === 'hover' ? {
+          filter: 'brightness(0.7)'
+        } : {}, generalActiveStyles)
+      });
     };
+    // Get the calculated variant styles for the current state
+    var buttonVariantStyles = getButtonVariantStyles({
+      currentVariant: variant,
+      currentEffect: effect,
+      resolvedBg: bg,
+      resolvedBaseTextColor: resolvedBaseTextColor,
+      contrastingColorForBg: contrastingColorForBg,
+      contrastingColorForBaseText: contrastingColorForBaseText,
+      resolvedBorderColor: bg
+    });
+    // Extract hover and active styles from the calculated styles
+    var {
+        _hover,
+        _active
+      } = buttonVariantStyles,
+      baseButtonVariantStyles = _objectWithoutPropertiesLoose(buttonVariantStyles, _excluded2$3);
     var buttonSizeStyles = ButtonSizes[size];
-    var buttonVariant = ButtonVariants[variant];
     var scaleWidth = {
       width: isAuto === true ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width
     };
@@ -3821,62 +3914,68 @@
       alignItems: "center",
       justifyContent: "center"
     }, views == null ? void 0 : views.container), isLoading && loaderPosition === 'left' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
-      size: size === 'xs' || size === 'sm' ? 'sm' : 'md'
+      size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
+      color: baseButtonVariantStyles.color
     }, loaderProps))), icon && ['left', 'top'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      color: baseButtonVariantStyles.color
     }, views == null ? void 0 : views.icon), icon)), children, icon && ['right', 'bottom'].includes(iconPosition) && !isLoading && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      color: baseButtonVariantStyles.color
     }, views == null ? void 0 : views.icon), icon)), isLoading && loaderPosition === 'right' && (/*#__PURE__*/React__default.createElement(Loader, Object.assign({
-      size: size === 'xs' || size === 'sm' ? 'sm' : 'md'
+      size: size === 'xs' || size === 'sm' ? 'sm' : 'md',
+      color: baseButtonVariantStyles.color
     }, loaderProps))));
-    // Extract hover and active styles from buttonVariant
-    var _ref2 = buttonVariant || {},
-      {
-        _hover,
-        _active
-      } = _ref2,
-      baseButtonVariant = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+    // Determine if the button should render as a Link or a button Element
+    var isLink = variant === 'link' && to;
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       gap: 8,
-      as: "button",
-      type: "button",
+      as: isLink ? 'div' : 'button',
+      type: isLink ? undefined : 'button',
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       "aria-label": ariaLabel,
-      backgroundColor: "transparent",
+      // backgroundColor="transparent" // Remove this unless it's intended to override variant styles
       borderRadius: ButtonShapes[shape],
       onClick: (_props$onClick = props.onClick) != null ? _props$onClick : onClick,
       onMouseEnter: () => handleHover(true),
       onMouseLeave: () => handleHover(false),
-      cursor: isActive ? 'pointer' : 'default',
-      filter: hovering && effect === 'hover' ? 'brightness(0.85)' : 'brightness(1)',
+      cursor: isActive ? isLink ? 'pointer' : 'pointer' : 'default',
       transition: "all 0.2s ease",
-      transform: hovering && effect === 'hover' && !isDisabled ? 'translateY(-5px)' : '',
-      // Apply consistent styling according to design guidelines
+      // filter and transform are now handled within _hover/_active styles
       // Apply shadow if provided
       boxShadow: shadow ? shadow : undefined
     }, defaultNativeProps, (_ref3 => {
       var rest = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
       return rest;
-    })(props), buttonSizeStyles, baseButtonVariant, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, {
+    })(props), buttonSizeStyles, baseButtonVariantStyles, scaleWidth, props.padding || props.paddingHorizontal || props.paddingVertical || props.paddingLeft || props.paddingRight || props.paddingTop || props.paddingBottom ? {} : changePadding, {
       // Apply hover and active styles
       _hover: _hover,
       _active: _active
-    }, views == null ? void 0 : views.container), variant === 'link' && to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+    }), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
       to: to,
-      textDecorationColor: colorScheme,
-      textDecorationThickness: "1px",
+      isExternal: isExternal,
+      // Link styles should inherit from the button's calculated styles or be defined here
+      // Let's apply relevant styles from the button variant to the Link
+      color: baseButtonVariantStyles.color,
+      textDecoration: baseButtonVariantStyles.textDecoration,
+      textDecorationColor: baseButtonVariantStyles.color,
+      textDecorationThickness: "1px" // Base thickness
+      ,
       textUnderlineOffset: "2px",
       transition: "all 0.2s ease",
-      isExternal: isExternal,
-      _hover: {
+      // Apply Link-specific hover/active styles if needed, or let Element's _hover/_active handle it
+      _hover: Object.assign({}, _hover, {
         textDecorationThickness: '2px'
-      }
+      }),
+      _active: Object.assign({}, _active, {
+        textDecorationThickness: '2px'
+      })
     }, views == null ? void 0 : views.link), content)) : content);
   };
 
@@ -3929,30 +4028,29 @@
    * Get card variants with consistent styling based on theme mode
    */
   var getCardVariants = themeMode => {
-    var isDarkMode = themeMode === 'dark';
     return {
       default: {
-        backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+        backgroundColor: 'color.white',
         border: 'none',
         transition: 'all 0.2s ease'
       },
       outlined: {
-        backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
+        backgroundColor: 'color.white',
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: isDarkMode ? 'color.gray.700' : 'color.gray.200',
+        borderColor: 'color.gray.200',
         transition: 'all 0.2s ease',
         _hover: {
-          borderColor: isDarkMode ? 'color.gray.600' : 'color.gray.300'
+          borderColor: 'color.gray.300'
         }
       },
       elevated: {
-        backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
-        boxShadow: isDarkMode ? '0px 2px 8px rgba(0, 0, 0, 0.2)' : '0px 2px 8px rgba(0, 0, 0, 0.08)',
+        backgroundColor: 'color.white',
+        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.08)',
         border: 'none',
         transition: 'all 0.2s ease',
         _hover: {
-          boxShadow: isDarkMode ? '0px 4px 12px rgba(0, 0, 0, 0.25)' : '0px 4px 12px rgba(0, 0, 0, 0.12)',
+          boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.12)',
           transform: 'translateY(-2px)'
         }
       }
@@ -3963,14 +4061,10 @@
    * @param theme - Theme object from useTheme hook
    */
   var getDefaultCardStyles = theme => {
-    var {
-      themeMode
-    } = theme;
-    var isDarkMode = themeMode === 'dark';
     return {
       container: {
-        backgroundColor: isDarkMode ? 'color.gray.800' : 'white',
-        color: isDarkMode ? 'color.gray.100' : 'color.gray.900',
+        backgroundColor: 'color.white',
+        color: 'color.black',
         borderRadius: '8px',
         overflow: 'hidden',
         transition: 'all 0.2s ease'
@@ -3979,17 +4073,18 @@
         padding: '16px',
         borderBottomWidth: '1px',
         borderBottomStyle: 'solid',
-        borderBottomColor: isDarkMode ? 'color.gray.700' : 'color.gray.200'
+        borderBottomColor: 'color.gray.200',
+        color: 'color.black'
       },
       content: {
         padding: '16px',
-        color: isDarkMode ? 'color.gray.100' : 'color.gray.900'
+        color: 'color.black'
       },
       footer: {
         padding: '16px',
         borderTopWidth: '1px',
         borderTopStyle: 'solid',
-        borderTopColor: isDarkMode ? 'color.gray.700' : 'color.gray.200'
+        borderTopColor: 'color.gray.200'
       }
     };
   };
@@ -4014,7 +4109,7 @@
     var {
       styles: contextStyles
     } = useCardContext();
-    var defaultStyles = getDefaultCardStyles(theme).header;
+    var defaultStyles = getDefaultCardStyles().header;
     // Merge styles: Default < Context Override < Direct Props/Style
     var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.header, props, {
       style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$header = contextStyles.header) == null ? void 0 : _contextStyles$header.style, style)
@@ -4032,7 +4127,7 @@
     var {
       styles: contextStyles
     } = useCardContext();
-    var defaultStyles = getDefaultCardStyles(theme).content;
+    var defaultStyles = getDefaultCardStyles().content;
     // Merge styles: Default < Context Override < Direct Props/Style
     var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.content, props, {
       style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$conten = contextStyles.content) == null ? void 0 : _contextStyles$conten.style, style)
@@ -4050,7 +4145,7 @@
     var {
       styles: contextStyles
     } = useCardContext();
-    var defaultStyles = getDefaultCardStyles(theme).footer;
+    var defaultStyles = getDefaultCardStyles().footer;
     // Merge styles: Default < Context Override < Direct Props/Style
     var mergedProps = Object.assign({}, defaultStyles, contextStyles == null ? void 0 : contextStyles.footer, props, {
       style: Object.assign({}, defaultStyles == null ? void 0 : defaultStyles.style, contextStyles == null || (_contextStyles$footer = contextStyles.footer) == null ? void 0 : _contextStyles$footer.style, style)
@@ -4073,7 +4168,7 @@
       } = _ref4,
       props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
     var theme = appStudio.useTheme();
-    var defaultStyles = getDefaultCardStyles(theme);
+    var defaultStyles = getDefaultCardStyles();
     // Prepare context value, merging default styles with user's `views` overrides
     var contextValue = React.useMemo(() => ({
       styles: {
@@ -4086,12 +4181,7 @@
     // Determine if we have explicit Card.Header, Card.Content, Card.Footer components
     // or if we need to wrap children in a default layout
     var hasExplicitStructure = React__default.Children.toArray(children).some(child => /*#__PURE__*/React__default.isValidElement(child) && (child.type === CardHeader || child.type === CardContent || child.type === CardFooter));
-    // Get the appropriate variant styles based on theme mode
-    var {
-      themeMode
-    } = theme;
-    var currentThemeMode = elementMode || themeMode;
-    var variantStyles = getCardVariants(currentThemeMode)[variant];
+    var variantStyles = getCardVariants()[variant];
     // Merge styles for the root element
     var mergedRootProps = Object.assign({
       width: isFullWidth ? '100%' : 'auto',
@@ -4338,7 +4428,7 @@
     },
     number: {
       backgroundColor: 'theme.primary',
-      color: 'white'
+      color: 'color.white'
     }
   };
   var NavigationButtonStyles = {
@@ -4783,7 +4873,7 @@
   // Default styles for tooltip
   var TooltipStyles = {
     position: 'absolute',
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     padding: '8px 12px',
     borderRadius: '4px',
     boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
@@ -5620,7 +5710,7 @@
   };
   var ContextMenuVariants = {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       color: 'color.gray.800'
     },
     filled: {
@@ -5628,7 +5718,7 @@
       color: 'color.gray.800'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -6298,7 +6388,7 @@
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       transition: 'all 0.2s ease',
       _hover: {
         borderColor: 'color.gray.300'
@@ -6314,7 +6404,7 @@
       borderBottomStyle: 'solid',
       borderBottomColor: 'color.gray.200',
       borderRadius: 0,
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       transition: 'all 0.2s ease',
       _hover: {
         borderBottomColor: 'color.gray.300'
@@ -6750,7 +6840,7 @@
       ,
       overflowY: "auto",
       zIndex: 1000,
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       borderRadius: "8px" // Consistent with design system (rounded-md)
       ,
       borderWidth: "1px",
@@ -7459,7 +7549,9 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
+    var IconColor = getColor('color.blueGray.700', {
+      themeMode: elementMode ? elementMode : themeMode
+    });
     var showLabel = !!(isFocused && label);
     /**
      * Styles for the input field
@@ -7645,19 +7737,19 @@
     selected: {
       backgroundColor: 'theme.primary',
       borderColor: 'theme.primary',
-      color: 'white'
+      color: 'color.white'
     },
     unselected: {
-      backgroundColor: 'transparent',
+      backgroundColor: 'color.white',
       borderWidth: '2px',
       borderStyle: 'solid',
       borderColor: 'color.gray.300',
-      color: 'transparent'
+      color: 'color.black'
     },
     indeterminate: {
       backgroundColor: 'theme.primary',
       borderColor: 'theme.primary',
-      color: 'white'
+      color: 'color.white'
     }
   };
   /**
@@ -9391,7 +9483,7 @@
       borderRadius: 4,
       position: "absolute",
       flexDirection: "column",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
     }, views['dropDown']), options.map(option => (/*#__PURE__*/React__default.createElement(DropDownItem, Object.assign({
       key: option.code,
@@ -9441,7 +9533,9 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var IconColor = getColor('color.blueGray.700', elementMode ? elementMode : themeMode);
+    var IconColor = getColor('color.blueGray.700', {
+      themeMode: elementMode ? elementMode : themeMode
+    });
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
     var handleCallback = option => {
@@ -9818,7 +9912,7 @@
       position: "relative"
     }, /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
       cursor: "pointer",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
       padding: "12px",
       display: "flex",
@@ -9840,7 +9934,7 @@
     }, views == null ? void 0 : views.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       id: "combobox-dropdown",
       position: "absolute",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       boxShadow: "rgba(0, 0 ,0 ,0.16) 0px 1px 4px",
       width: "100%",
       overflowY: "auto",
@@ -11057,7 +11151,7 @@
     }
   };
 
-  var _excluded$F = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "colorScheme", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+  var _excluded$F = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "backgroundColor", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
   var SliderView = _ref => {
     var _views$tooltip, _views$tooltip2;
     var {
@@ -11073,7 +11167,7 @@
         isDisabled = false,
         showValue = false,
         showTooltip = false,
-        colorScheme = 'theme.primary',
+        backgroundColor = 'theme.primary',
         label,
         helperText,
         themeMode: elementMode,
@@ -11105,9 +11199,15 @@
       getColor,
       themeMode
     } = appStudio.useTheme();
-    var themeColor = getColor(colorScheme, elementMode || themeMode);
-    var disabledColor = getColor('theme.disabled', elementMode || themeMode);
-    var trackColor = getColor(SliderVariants[variant].backgroundColor, elementMode || themeMode);
+    var themeColor = getColor(backgroundColor, {
+      themeMode: elementMode || themeMode
+    });
+    var disabledColor = getColor('theme.disabled', {
+      themeMode: elementMode || themeMode
+    });
+    var trackColor = getColor(SliderVariants[variant].backgroundColor, {
+      themeMode: elementMode || themeMode
+    });
     var isVertical = orientation === 'vertical';
     var {
       trackCrossAxisSize,
@@ -11177,7 +11277,7 @@
       top: "50%",
       left: thumbPositionPercent + "%",
       borderRadius: "50%",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
       border: "2px solid " + (isDisabled ? disabledColor : themeColor),
       transition: isDragging ? 'none' : 'transform 0.1s ease-in-out',
@@ -12245,7 +12345,7 @@
     };
     return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
       cursor: "default",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       width: isFullScreen ? '100%' : 600,
       height: isFullScreen ? '100%' : 'fit-content',
       onClick: handleClick,
@@ -13652,7 +13752,7 @@
   };
   var DropdownMenuVariants = {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       color: 'color.gray.800'
     },
     filled: {
@@ -13660,7 +13760,7 @@
       color: 'color.gray.800'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -14540,7 +14640,7 @@
       position: "absolute",
       zIndex: 1000,
       minWidth: "200px",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       borderRadius: 4,
       boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
       overflow: "hidden"
@@ -14792,7 +14892,7 @@
   };
   var ActivePageButtonStyles = {
     backgroundColor: 'color.blue.500',
-    color: 'white',
+    color: 'color.white',
     _hover: {
       backgroundColor: 'color.blue.600'
     }
@@ -14945,7 +15045,7 @@
       borderWidth: "1px",
       borderStyle: "solid",
       borderColor: "color.gray.200",
-      backgroundColor: "white",
+      backgroundColor: "color.white",
       cursor: "pointer",
       value: pageSize,
       onChange: handlePageSizeChange
@@ -15221,7 +15321,7 @@
   var getSidebar = themeMode => {
     return {
       default: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         color: 'color.gray.800',
         transition: 'all 0.2s ease'
       },
@@ -15231,7 +15331,7 @@
         transition: 'all 0.2s ease'
       },
       outline: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'color.gray.200',
@@ -15244,7 +15344,7 @@
         transition: 'all 0.2s ease'
       },
       elevated: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
         color: 'color.gray.800',
         transition: 'all 0.2s ease'
@@ -16899,7 +16999,7 @@
   var getCommand = themeMode => {
     return {
       default: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         borderWidth: '1px',
         borderStyle: 'solid',
         borderColor: 'color.gray.200',
@@ -16913,7 +17013,7 @@
         boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
       },
       outline: {
-        backgroundColor: 'white',
+        backgroundColor: 'color.white',
         borderWidth: '2px',
         borderStyle: 'solid',
         borderColor: 'color.gray.300',