@app-studio/web 0.9.77 → 0.9.79

package/dist/components/Button/Button/Button.props.d.ts

@@ -23,7 +23,7 @@ export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     variant?: Variant;
     animation?: Animation;
     color?: string;
-    scheme?: string;
+    textColor?: string;
     reversed?: boolean;
     borderMovingDuration?: number;
     borderMovingGradientColors?: string[];

package/dist/components/Button/Button/Button.style.d.ts

@@ -21,7 +21,7 @@ export declare const ButtonShapes: Record<Shape, number | string>;
  * Icon sizes for different button sizes
  */
 export declare const IconSizes: Record<Size, ViewProps>;
-export declare const getButtonVariants: (color: string, isLight: boolean, reversed?: boolean) => Record<Variant, ViewProps>;
+export declare const getButtonVariants: (color: string, textColor: string, reversed?: boolean) => Record<Variant, ViewProps>;
 /**
  * Generate offset path for border animation
  */

package/dist/web.cjs.development.js

@@ -31,7 +31,6 @@ require('core-js/modules/es.parse-int.js');
 var reactRouterDom = require('react-router-dom');
 require('core-js/modules/es.parse-float.js');
 require('core-js/modules/es.string.ends-with.js');
-var contrast = _interopDefault(require('contrast'));
 require('core-js/modules/es.promise.js');
 require('core-js/modules/es.array.reduce.js');
 require('core-js/modules/es.number.to-fixed.js');
@@ -42,6 +41,7 @@ require('core-js/modules/es.regexp.exec.js');
 var formik = require('formik');
 require('core-js/modules/es.string.replace.js');
 require('core-js/modules/es.string.split.js');
+var contrast = _interopDefault(require('contrast'));
 require('core-js/modules/es.promise.finally.js');
 require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
@@ -2785,11 +2785,10 @@ var IconSizes$1 = {
     padding: 14
   }
 };
-var getButtonVariants = function getButtonVariants(color, isLight, reversed) {
+var getButtonVariants = function getButtonVariants(color, textColor, reversed) {
   if (reversed === void 0) {
     reversed = false;
   }
-  var textColor = isLight ? '#000000' : '#FFFFFF';
   // Determine effective colors based on reversed state
   var effectiveBg = reversed ? textColor : color;
   var effectiveContent = reversed ? color : textColor;
@@ -2916,8 +2915,8 @@ var getButtonVariants = function getButtonVariants(color, isLight, reversed) {
 
 var _excluded$d = ["asComponent", "isDisabled", "isLoading", "isWrapped", "borderRadius", "width", "height", "baseStyles", "sizeStyles", "iconPad", "mainTone", "resolvedTextColor", "children", "borderWidth"],
   _excluded2$3 = ["shape", "isDisabled", "onClick", "shadow", "borderWidth", "isAuto", "isFilled", "views", "children"],
-  _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "tone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
-  _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "scheme", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
+  _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
+  _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "textColor", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
 // --- Helper: Button Content ---
 // Renders the inner content: Loader, Icon, and Children.
 var ButtonContent = _ref => {
@@ -3277,7 +3276,7 @@ var StandardButton = _ref4 => {
 // --- Main Component ---
 // --- Main Component ---
 var ButtonView = _ref5 => {
-  var _ref6, _ref7, _base$color;
+  var _ref6, _base$color;
   var {
       /* behaviour */
       variant = 'filled',
@@ -3286,13 +3285,13 @@ var ButtonView = _ref5 => {
       iconPosition = 'left',
       loaderPosition = 'left',
       backgroundColor,
-      // primary candidate for main color
+      // Primary override for main color
       color,
-      // 2nd candidate for main color (NOT text‑color)
-      scheme,
-      // New scheme prop
+      // Main button color (theme tokens or color palette)
+      textColor,
+      // Explicit text color
       reversed = false,
-      // New reversed prop
+      // Reverse colors for dark backgrounds
       isAuto = true,
       isFilled,
       isDisabled,
@@ -3317,24 +3316,18 @@ var ButtonView = _ref5 => {
     props = _objectWithoutPropertiesLoose(_ref5, _excluded4$2);
   /* theme helpers */
   var {
-    getColorHex,
-    themeMode
+    getColorHex
   } = appStudio.useTheme();
   /* MAIN COLOR – determines the entire palette */
-  var mainColorKey = (_ref6 = (_ref7 = backgroundColor != null ? backgroundColor : color) != null ? _ref7 : scheme) != null ? _ref6 : 'theme.primary';
+  var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.primary';
   var mainTone = getColorHex(isDisabled ? 'theme.disabled' : mainColorKey);
-  var tone = contrast(mainTone);
-  /* text color with mixBlendMode for maximum visibility */
-  var textColor;
-  if (tone === 'light') {
-    textColor = '#000000';
-  } else {
-    textColor = '#FFFFFF';
-  }
+  /* text color - explicitly provided or default to white */
+  var resolvedTextColorKey = textColor != null ? textColor : 'color.white';
+  var resolvedTextColor = getColorHex(resolvedTextColorKey);
   /* variant palette */
-  var palette = React.useMemo(() => getButtonVariants(mainTone, tone === 'light', reversed), [mainTone, tone, reversed]);
+  var palette = React.useMemo(() => getButtonVariants(mainTone, resolvedTextColor, reversed), [mainTone, resolvedTextColor, reversed]);
   var base = palette[variant];
-  var resolvedTextColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : textColor;
+  var finalContentColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : resolvedTextColor;
   // Render content logic safely
   var content = /*#__PURE__*/React__default.createElement(ButtonContent, {
     icon: icon,
@@ -3342,7 +3335,7 @@ var ButtonView = _ref5 => {
     iconPosition: iconPosition,
     loaderPosition: loaderPosition,
     size: size,
-    resolvedTextColor: resolvedTextColor,
+    resolvedTextColor: finalContentColor,
     isIconRounded: isIconRounded,
     views: views
   }, children);
@@ -3365,11 +3358,10 @@ var ButtonView = _ref5 => {
     baseStyles: base,
     sizeStyles: sizeStyles,
     iconPad: iconPad,
-    resolvedTextColor: resolvedTextColor,
+    resolvedTextColor: finalContentColor,
     content: content,
     size: size,
     mainTone: mainTone,
-    tone: tone,
     borderMovingDuration: borderMovingDuration,
     borderMovingGradientColors: borderMovingGradientColors,
     animatedStrokeAccentColor: animatedStrokeAccentColor,
@@ -25633,7 +25625,7 @@ var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded7 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
   _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
   _excluded9 = ["children"],
-  _excluded10 = ["contentPosition"],
+  _excluded10 = ["contentPosition", "backgroundColor"],
   _excluded11 = ["children", "views"],
   _excluded12 = ["children", "designProps", "shape", "decorationRotation", "decorationScale", "decorationOpacity", "views"];
 // Background Context
@@ -26088,23 +26080,34 @@ var BackgroundGradient = _ref9 => {
  */
 var BackgroundOverlay = _ref10 => {
   var {
-      contentPosition
+      contentPosition,
+      backgroundColor = 'color.black.900'
     } = _ref10,
     props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   var getDefaultOverlay = () => {
+    var ligthBackground = backgroundColor + ".100";
+    var darkBackground = backgroundColor + ".900";
+    var midBackground = backgroundColor + ".600";
+    var midDarkBackground = backgroundColor + ".400";
+    if (backgroundColor.indexOf('.') === -1) {
+      ligthBackground = "color-mix(in srgb, " + backgroundColor + " 10%, transparent)";
+      darkBackground = "color-mix(in srgb, " + backgroundColor + " 90%, transparent)";
+      midBackground = "color-mix(in srgb, " + backgroundColor + " 70%, transparent)";
+      midDarkBackground = "color-mix(in srgb, " + backgroundColor + " 50%, transparent)";
+    }
     switch (contentPosition) {
       case 'left':
-        return 'radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+        return "radial-gradient(circle at 70% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to right, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
       case 'right':
-        return 'radial-gradient(circle at 20% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+        return "radial-gradient(circle at 30% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to left, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
       case 'top':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+        return "radial-gradient(circle at 50% 40%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to bottom, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
       case 'bottom':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+        return "radial-gradient(circle at 50% 60%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to top, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
       case 'center':
-        return 'radial-gradient(circle at 50% 70%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+        return "radial-gradient(circle at 50% 70%, " + darkBackground + " 0%, " + ligthBackground + " 100%)";
       default:
-        return 'rgba(0,0,0,0.5)';
+        return midDarkBackground;
     }
   };
   var background = getDefaultOverlay();