@app-studio/web 0.7.2 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/web.esm.js CHANGED
@@ -906,6 +906,7 @@ var LoaderComponent = function LoaderComponent(props) {
906
906
  var Loader = LoaderComponent;
907
907
 
908
908
  var _excluded$g = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
909
+ var contrast = /*#__PURE__*/require('contrast');
909
910
  var ButtonView = function ButtonView(_ref) {
910
911
  var _props$onClick;
911
912
  var icon = _ref.icon,
@@ -943,6 +944,8 @@ var ButtonView = function ButtonView(_ref) {
943
944
  effect = _ref$effect === void 0 ? 'default' : _ref$effect,
944
945
  isHovered = _ref.isHovered,
945
946
  props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
947
+ var _useTheme = useTheme(),
948
+ getColor = _useTheme.getColor;
946
949
  var isActive = !(isDisabled || isLoading);
947
950
  var defaultNativeProps = {
948
951
  disabled: !isActive
@@ -950,11 +953,12 @@ var ButtonView = function ButtonView(_ref) {
950
953
  var buttonColor = isActive ? colorScheme : 'theme.disabled';
951
954
  var hovering = isHovered && effect === 'hover';
952
955
  var reverse = isHovered && effect === 'reverse';
956
+ var isLight = contrast(getColor(buttonColor)) == 'light';
953
957
  var ButtonVariants = {
954
958
  filled: {
955
959
  // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
956
960
  backgroundColor: reverse ? 'transparent' : buttonColor,
957
- color: reverse ? buttonColor : 'color.white',
961
+ color: reverse && !isLight ? buttonColor : 'color.white',
958
962
  borderWidth: 1,
959
963
  borderStyle: 'solid',
960
964
  borderColor: reverse ? buttonColor : 'transparent'
@@ -981,7 +985,7 @@ var ButtonView = function ButtonView(_ref) {
981
985
  },
982
986
  ghost: {
983
987
  backgroundColor: reverse ? buttonColor : 'transparent',
984
- color: reverse ? 'color.white' : buttonColor,
988
+ color: reverse && !isLight ? 'color.white' : buttonColor,
985
989
  borderWidth: 1,
986
990
  borderStyle: 'solid',
987
991
  borderColor: reverse ? buttonColor : 'transparent'