@app-studio/web 0.8.82 → 0.8.84

package/dist/web.cjs.development.js

@@ -2821,71 +2821,70 @@ var Icon = {
  * 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'
       }
     }
   };
@@ -2908,8 +2907,7 @@ var AlertView = _ref => {
   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;
@@ -3238,11 +3236,10 @@ var PositionStyles = {
  * 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',
@@ -3268,7 +3265,7 @@ var getBadgeVariants = themeMode => {
     },
     ghost: {
       backgroundColor: 'transparent',
-      color: isDarkMode ? 'color.gray.400' : 'color.gray.500',
+      color: 'color.gray.500',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'transparent',
@@ -3296,8 +3293,7 @@ var BadgeView = _ref => {
   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
@@ -3559,7 +3555,9 @@ var DefaultSpinner = _ref => {
     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(() => {
@@ -3606,7 +3604,9 @@ var Dotted = _ref2 => {
     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(() => {
@@ -3652,7 +3652,9 @@ var Quarter = _ref3 => {
     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(() => {
@@ -3719,9 +3721,10 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // 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;
@@ -3743,13 +3746,16 @@ var ButtonView = _ref => {
       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 {
@@ -3761,83 +3767,170 @@ var ButtonView = _ref => {
   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
   };
@@ -3850,62 +3943,68 @@ var ButtonView = _ref => {
     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({
+  }, props, views == null ? void 0 : views.container), 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);
 };
 
@@ -3958,30 +4057,29 @@ var CardShapes = {
  * 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)'
       }
     }
@@ -3992,14 +4090,10 @@ var getCardVariants = themeMode => {
  * @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'
@@ -4008,17 +4102,18 @@ var getDefaultCardStyles = theme => {
       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'
     }
   };
 };
@@ -4043,7 +4138,7 @@ var CardHeader = _ref => {
   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)
@@ -4061,7 +4156,7 @@ var CardContent = _ref2 => {
   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)
@@ -4079,7 +4174,7 @@ var CardFooter = _ref3 => {
   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)
@@ -4102,7 +4197,7 @@ var CardView = _ref4 => {
     } = _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: {
@@ -4115,12 +4210,7 @@ var CardView = _ref4 => {
   // 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',
@@ -4367,7 +4457,7 @@ var ActiveIndicatorStyles = {
   },
   number: {
     backgroundColor: 'theme.primary',
-    color: 'white'
+    color: 'color.white'
   }
 };
 var NavigationButtonStyles = {
@@ -4812,7 +4902,7 @@ var LegendTextStyles = {
 // 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)',
@@ -5649,7 +5739,7 @@ var ContextMenuSizes = {
 };
 var ContextMenuVariants = {
   default: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     color: 'color.gray.800'
   },
   filled: {
@@ -5657,7 +5747,7 @@ var ContextMenuVariants = {
     color: 'color.gray.800'
   },
   outline: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
@@ -6327,7 +6417,7 @@ var InputVariants = {
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     transition: 'all 0.2s ease',
     _hover: {
       borderColor: 'color.gray.300'
@@ -6343,7 +6433,7 @@ var InputVariants = {
     borderBottomStyle: 'solid',
     borderBottomColor: 'color.gray.200',
     borderRadius: 0,
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     transition: 'all 0.2s ease',
     _hover: {
       borderBottomColor: 'color.gray.300'
@@ -6779,7 +6869,7 @@ var DropDown = _ref5 => {
     ,
     overflowY: "auto",
     zIndex: 1000,
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     borderRadius: "8px" // Consistent with design system (rounded-md)
     ,
     borderWidth: "1px",
@@ -7488,7 +7578,9 @@ var TextFieldView = _ref => {
     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
@@ -7674,19 +7766,19 @@ var VariantStyles = {
   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'
   }
 };
 /**
@@ -9420,7 +9512,7 @@ var DropDown$1 = _ref4 => {
     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,
@@ -9470,7 +9562,9 @@ var CountryPickerView = _ref5 => {
     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 => {
@@ -9847,7 +9941,7 @@ var ComboBoxView = _ref => {
     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",
@@ -9869,7 +9963,7 @@ var ComboBoxView = _ref => {
   }, 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",
@@ -11086,7 +11180,7 @@ var OrientationStyles = {
   }
 };
 
-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 {
@@ -11102,7 +11196,7 @@ var SliderView = _ref => {
       isDisabled = false,
       showValue = false,
       showTooltip = false,
-      colorScheme = 'theme.primary',
+      backgroundColor = 'theme.primary',
       label,
       helperText,
       themeMode: elementMode,
@@ -11134,9 +11228,15 @@ var SliderView = _ref => {
     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,
@@ -11206,7 +11306,7 @@ var SliderView = _ref => {
     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',
@@ -12274,7 +12374,7 @@ var ModalContainer = _ref2 => {
   };
   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,
@@ -13681,7 +13781,7 @@ var DropdownMenuSizes = {
 };
 var DropdownMenuVariants = {
   default: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     color: 'color.gray.800'
   },
   filled: {
@@ -13689,7 +13789,7 @@ var DropdownMenuVariants = {
     color: 'color.gray.800'
   },
   outline: {
-    backgroundColor: 'white',
+    backgroundColor: 'color.white',
     borderWidth: '1px',
     borderStyle: 'solid',
     borderColor: 'color.gray.200',
@@ -14569,7 +14669,7 @@ var MenubarContent = _ref5 => {
     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"
@@ -14821,7 +14921,7 @@ var PaginationShapes = {
 };
 var ActivePageButtonStyles = {
   backgroundColor: 'color.blue.500',
-  color: 'white',
+  color: 'color.white',
   _hover: {
     backgroundColor: 'color.blue.600'
   }
@@ -14974,7 +15074,7 @@ var PaginationView = _ref => {
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: "color.gray.200",
-    backgroundColor: "white",
+    backgroundColor: "color.white",
     cursor: "pointer",
     value: pageSize,
     onChange: handlePageSizeChange
@@ -15250,7 +15350,7 @@ var SidebarSizes = {
 var getSidebar = themeMode => {
   return {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       color: 'color.gray.800',
       transition: 'all 0.2s ease'
     },
@@ -15260,7 +15360,7 @@ var getSidebar = themeMode => {
       transition: 'all 0.2s ease'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -15273,7 +15373,7 @@ var getSidebar = themeMode => {
       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'
@@ -16928,7 +17028,7 @@ var CommandSizes = {
 var getCommand = themeMode => {
   return {
     default: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderColor: 'color.gray.200',
@@ -16942,7 +17042,7 @@ var getCommand = themeMode => {
       boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.1)'
     },
     outline: {
-      backgroundColor: 'white',
+      backgroundColor: 'color.white',
       borderWidth: '2px',
       borderStyle: 'solid',
       borderColor: 'color.gray.300',