@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/components/Button/Button/Button.props.d.ts +1 -1
- package/dist/web.cjs.development.js +6 -2
- package/dist/web.cjs.development.js.map +1 -1
- package/dist/web.cjs.production.min.js +1 -1
- package/dist/web.cjs.production.min.js.map +1 -1
- package/dist/web.esm.js +6 -2
- package/dist/web.esm.js.map +1 -1
- package/package.json +2 -1
|
@@ -5,7 +5,7 @@ import { IconPosition, Shape, Size, Variant, LoaderPosition, Effects } from './B
|
|
|
5
5
|
import { LoaderProps } from '../../Loader/Loader/Loader.props';
|
|
6
6
|
export interface ButtonProps {
|
|
7
7
|
children?: React.ReactNode;
|
|
8
|
-
colorScheme?:
|
|
8
|
+
colorScheme?: any;
|
|
9
9
|
externalHref?: string;
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
loaderProps?: LoaderProps;
|
|
@@ -913,6 +913,7 @@ var LoaderComponent = function LoaderComponent(props) {
|
|
|
913
913
|
var Loader = LoaderComponent;
|
|
914
914
|
|
|
915
915
|
var _excluded$g = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered"];
|
|
916
|
+
var contrast = /*#__PURE__*/require('contrast');
|
|
916
917
|
var ButtonView = function ButtonView(_ref) {
|
|
917
918
|
var _props$onClick;
|
|
918
919
|
var icon = _ref.icon,
|
|
@@ -950,6 +951,8 @@ var ButtonView = function ButtonView(_ref) {
|
|
|
950
951
|
effect = _ref$effect === void 0 ? 'default' : _ref$effect,
|
|
951
952
|
isHovered = _ref.isHovered,
|
|
952
953
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
954
|
+
var _useTheme = appStudio.useTheme(),
|
|
955
|
+
getColor = _useTheme.getColor;
|
|
953
956
|
var isActive = !(isDisabled || isLoading);
|
|
954
957
|
var defaultNativeProps = {
|
|
955
958
|
disabled: !isActive
|
|
@@ -957,11 +960,12 @@ var ButtonView = function ButtonView(_ref) {
|
|
|
957
960
|
var buttonColor = isActive ? colorScheme : 'theme.disabled';
|
|
958
961
|
var hovering = isHovered && effect === 'hover';
|
|
959
962
|
var reverse = isHovered && effect === 'reverse';
|
|
963
|
+
var isLight = contrast(getColor(buttonColor)) == 'light';
|
|
960
964
|
var ButtonVariants = {
|
|
961
965
|
filled: {
|
|
962
966
|
// Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
|
|
963
967
|
backgroundColor: reverse ? 'transparent' : buttonColor,
|
|
964
|
-
color: reverse ? buttonColor : 'color.white',
|
|
968
|
+
color: reverse && !isLight ? buttonColor : 'color.white',
|
|
965
969
|
borderWidth: 1,
|
|
966
970
|
borderStyle: 'solid',
|
|
967
971
|
borderColor: reverse ? buttonColor : 'transparent'
|
|
@@ -988,7 +992,7 @@ var ButtonView = function ButtonView(_ref) {
|
|
|
988
992
|
},
|
|
989
993
|
ghost: {
|
|
990
994
|
backgroundColor: reverse ? buttonColor : 'transparent',
|
|
991
|
-
color: reverse ? 'color.white' : buttonColor,
|
|
995
|
+
color: reverse && !isLight ? 'color.white' : buttonColor,
|
|
992
996
|
borderWidth: 1,
|
|
993
997
|
borderStyle: 'solid',
|
|
994
998
|
borderColor: reverse ? buttonColor : 'transparent'
|