How to use the mattermost-redux/utils/theme_utils.changeOpacity function in mattermost-redux

To help you get started, we’ve selected a few mattermost-redux examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
changeCss('.app__body .attachment__content, .app__body .attachment-actions button', 'background:' + theme.centerChannelBg);
        changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
        changeCss('body.app__body', 'scrollbar-track-color:' + theme.centerChannelBg);
        changeCss('.app__body .shortcut-key, .app__body .post-list__new-messages-below', 'color:' + theme.centerChannelBg);
        changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search', 'background:' + theme.centerChannelBg);
        changeCss('.app__body .nav-tabs, .app__body .nav-tabs > li.active > a', 'background:' + theme.centerChannelBg);
        changeCss('.app__body .post .file-view--single', `background:${theme.centerChannelBg}`);
        changeCss('.app__body .modal-tabs .nav-tabs > li', `background:${theme.centerChannelBg}`);
        changeCss('.app__body .modal-tabs .nav-tabs > li > a', `background:${theme.centerChannelBg}`);

        // Fade out effect for collapsed posts (not hovered, not from current user)
        changeCss(
            '.app__body .post-list__table .post:not(.current--user) .post-collapse__gradient, ' +
            '.app__body .post-list__table .post.post--compact .post-collapse__gradient, ' +
            '.app__body .sidebar-right__body .post.post--compact .post-collapse__gradient',
            `background:linear-gradient(${changeOpacity(theme.centerChannelBg, 0)}, ${theme.centerChannelBg})`,
        );
        changeCss(
            '.app__body .post-list__table .post-attachment-collapse__gradient, ' +
            '.app__body .sidebar-right__body .post-attachment-collapse__gradient',
            `background:linear-gradient(${changeOpacity(theme.centerChannelBg, 0)}, ${theme.centerChannelBg})`,
        );

        changeCss(
            '.app__body .post-list__table .post:not(.current--user) .post-collapse__show-more, ' +
            '.app__body .post-list__table .post.post--compact .post-collapse__show-more, ' +
            '.app__body .sidebar-right__body .post:not(.post--root) .post-collapse__show-more',
            `background-color:${theme.centerChannelBg}`,
        );
        changeCss(
            '.app__body .post-list__table .post-attachment-collapse__show-more, ' +
            '.app__body .sidebar-right__body .post-attachment-collapse__show-more',
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
        changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor);
        changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
        changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
        changeCss('.app__body .emoji-picker', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
        changeCss('.app__body .emoji-picker__search-icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
        changeCss('.app__body .emoji-picker__preview, .app__body .emoji-picker__items, .app__body .emoji-picker__search-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
        changeCss('.emoji-picker__category .fa:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
        changeCss('.app__body .emoji-picker__category, .app__body .emoji-picker__category:focus, .app__body .emoji-picker__category:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.3));
        changeCss('.app__body .emoji-picker__category--selected, .app__body .emoji-picker__category--selected:focus, .app__body .emoji-picker__category--selected:hover', 'color:' + theme.centerChannelColor);
        changeCss('.app__body .emoji-picker__item-wrapper:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
        changeCss('.app__body .emoji-picker-items__container .emoji-picker__item.selected', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.07));
        changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
        changeCss('.app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07));
        changeCss('.app__body .emoji-picker .nav-tabs li a', 'fill:' + theme.centerChannelColor);
        changeCss('.app__body .post .post-collapse__show-more-button', `border-color:${changeOpacity(theme.centerChannelColor, 0.1)}`);
        changeCss('.app__body .post .post-collapse__show-more-line', `background-color:${changeOpacity(theme.centerChannelColor, 0.1)}`);

        if (theme.centerChannelBg) {
            const ownPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.05);
            const hoveredPostBg = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.08);
            const hoveredPostBgLight = blendColors(theme.centerChannelBg, theme.centerChannelColor, 0.05);

            // Fade out effect for collapsed posts made by the current user
            changeCss(
                '.app__body .post-list__table .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__gradient, ' +
                '.app__body .sidebar-right__body .post.current--user:not(.post--compact):not(:hover):not(.post--hovered):not(.post--highlight) .post-collapse__gradient, ' +
                '.app__body .post--root .post-collapse__gradient',
                `background:linear-gradient(${changeOpacity(ownPostBg, 0)}, ${ownPostBg})`,
            );
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
            'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
            'button-color-60': changeOpacity(theme.buttonColor, 0.6),
            'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
            'button-color-50': changeOpacity(theme.buttonColor, 0.5),
            'button-bg-40': changeOpacity(theme.buttonBg, 0.4),
            'button-color-40': changeOpacity(theme.buttonColor, 0.4),
            'button-bg-30': changeOpacity(theme.buttonBg, 0.3),
            'button-color-30': changeOpacity(theme.buttonColor, 0.3),
            'button-bg-20': changeOpacity(theme.buttonBg, 0.2),
            'button-color-20': changeOpacity(theme.buttonColor, 0.2),
            'button-bg-15': changeOpacity(theme.buttonBg, 0.15),
            'button-color-15': changeOpacity(theme.buttonColor, 0.15),
            'button-bg-10': changeOpacity(theme.buttonBg, 0.1),
            'button-color-10': changeOpacity(theme.buttonColor, 0.1),
            'button-bg-05': changeOpacity(theme.buttonBg, 0.05),
            'button-color-05': changeOpacity(theme.buttonColor, 0.05),
            'error-text': theme.errorTextColor,
            'error-text-08': changeOpacity(theme.errorTextColor, 0.08),
            'mention-highlight-bg': theme.mentionHighlightBg,
            'mention-highlight-link': theme.mentionHighlightLink,
        },
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
            'button-color-60': changeOpacity(theme.buttonColor, 0.6),
            'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
            'button-color-50': changeOpacity(theme.buttonColor, 0.5),
            'button-bg-40': changeOpacity(theme.buttonBg, 0.4),
            'button-color-40': changeOpacity(theme.buttonColor, 0.4),
            'button-bg-30': changeOpacity(theme.buttonBg, 0.3),
            'button-color-30': changeOpacity(theme.buttonColor, 0.3),
            'button-bg-20': changeOpacity(theme.buttonBg, 0.2),
            'button-color-20': changeOpacity(theme.buttonColor, 0.2),
            'button-bg-15': changeOpacity(theme.buttonBg, 0.15),
            'button-color-15': changeOpacity(theme.buttonColor, 0.15),
            'button-bg-10': changeOpacity(theme.buttonBg, 0.1),
            'button-color-10': changeOpacity(theme.buttonColor, 0.1),
            'button-bg-05': changeOpacity(theme.buttonBg, 0.05),
            'button-color-05': changeOpacity(theme.buttonColor, 0.05),
            'error-text': theme.errorTextColor,
            'error-text-08': changeOpacity(theme.errorTextColor, 0.08),
            'mention-highlight-bg': theme.mentionHighlightBg,
            'mention-highlight-link': theme.mentionHighlightLink,
        },
    });
}
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
            'button-color-60': changeOpacity(theme.buttonColor, 0.6),
            'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
            'button-color-50': changeOpacity(theme.buttonColor, 0.5),
            'button-bg-40': changeOpacity(theme.buttonBg, 0.4),
            'button-color-40': changeOpacity(theme.buttonColor, 0.4),
            'button-bg-30': changeOpacity(theme.buttonBg, 0.3),
            'button-color-30': changeOpacity(theme.buttonColor, 0.3),
            'button-bg-20': changeOpacity(theme.buttonBg, 0.2),
            'button-color-20': changeOpacity(theme.buttonColor, 0.2),
            'button-bg-15': changeOpacity(theme.buttonBg, 0.15),
            'button-color-15': changeOpacity(theme.buttonColor, 0.15),
            'button-bg-10': changeOpacity(theme.buttonBg, 0.1),
            'button-color-10': changeOpacity(theme.buttonColor, 0.1),
            'button-bg-05': changeOpacity(theme.buttonBg, 0.05),
            'button-color-05': changeOpacity(theme.buttonColor, 0.05),
            'error-text': theme.errorTextColor,
            'error-text-08': changeOpacity(theme.errorTextColor, 0.08),
            'mention-highlight-bg': theme.mentionHighlightBg,
            'mention-highlight-link': theme.mentionHighlightLink,
        },
    });
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'center-channel-bg': theme.centerChannelBg,
            'center-channel-color': theme.centerChannelColor,
            'center-channel-bg-90': changeOpacity(theme.centerChannelBg, 0.9),
            'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
            'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
            'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
            'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
            'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
            'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
            'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
            'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
            'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
            'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
            'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
            'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
            'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
            'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
            'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
            'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
            'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
            'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
            'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'center-channel-color': theme.centerChannelColor,
            'center-channel-bg-90': changeOpacity(theme.centerChannelBg, 0.9),
            'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
            'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
            'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
            'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
            'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
            'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
            'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
            'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
            'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
            'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
            'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
            'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
            'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
            'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
            'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
            'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
            'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
            'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
            'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
            'button-color-60': changeOpacity(theme.buttonColor, 0.6),
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
            'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
            'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
            'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
            'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
            'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
            'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
            'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
            'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
            'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
            'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
            'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
            'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
            'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
            'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
            'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
            'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
            'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
            'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
            'button-color-60': changeOpacity(theme.buttonColor, 0.6),
            'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
            'button-color-50': changeOpacity(theme.buttonColor, 0.5),
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'away-indicator': theme.awayIndicator,
            'dnd-indicator': theme.dndIndicator,
            'mention-bg': theme.mentionBg,
            'mention-color': theme.mentionColor,
            'center-channel-bg': theme.centerChannelBg,
            'center-channel-color': theme.centerChannelColor,
            'center-channel-bg-90': changeOpacity(theme.centerChannelBg, 0.9),
            'center-channel-color-90': changeOpacity(theme.centerChannelColor, 0.9),
            'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
            'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
            'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
            'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
            'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
            'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
            'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
            'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
            'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
            'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
            'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
            'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
            'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
            'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
            'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
            'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
            'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
            'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
github mattermost / mattermost-webapp / utils / utils.jsx View on Github external
'center-channel-bg-80': changeOpacity(theme.centerChannelBg, 0.8),
            'center-channel-color-80': changeOpacity(theme.centerChannelColor, 0.8),
            'center-channel-bg-60': changeOpacity(theme.centerChannelBg, 0.6),
            'center-channel-color-60': changeOpacity(theme.centerChannelColor, 0.6),
            'center-channel-bg-50': changeOpacity(theme.centerChannelBg, 0.5),
            'center-channel-color-50': changeOpacity(theme.centerChannelColor, 0.5),
            'center-channel-bg-40': changeOpacity(theme.centerChannelBg, 0.4),
            'center-channel-color-40': changeOpacity(theme.centerChannelColor, 0.4),
            'center-channel-bg-30': changeOpacity(theme.centerChannelBg, 0.3),
            'center-channel-color-30': changeOpacity(theme.centerChannelColor, 0.3),
            'center-channel-bg-20': changeOpacity(theme.centerChannelBg, 0.2),
            'center-channel-color-20': changeOpacity(theme.centerChannelColor, 0.2),
            'center-channel-bg-15': changeOpacity(theme.centerChannelBg, 0.15),
            'center-channel-color-15': changeOpacity(theme.centerChannelColor, 0.15),
            'center-channel-bg-10': changeOpacity(theme.centerChannelBg, 0.1),
            'center-channel-color-10': changeOpacity(theme.centerChannelColor, 0.1),
            'center-channel-bg-05': changeOpacity(theme.centerChannelBg, 0.05),
            'center-channel-color-08': changeOpacity(theme.centerChannelColor, 0.08),
            'center-channel-color-05': changeOpacity(theme.centerChannelColor, 0.05),
            'new-message-separator': theme.newMessageSeparator,
            'link-color': theme.linkColor,
            'button-bg': theme.buttonBg,
            'button-color': theme.buttonColor,
            'button-bg-90': changeOpacity(theme.buttonBg, 0.9),
            'button-color-90': changeOpacity(theme.buttonColor, 0.9),
            'button-bg-80': changeOpacity(theme.buttonBg, 0.8),
            'button-color-80': changeOpacity(theme.buttonColor, 0.8),
            'button-bg-60': changeOpacity(theme.buttonBg, 0.6),
            'button-color-60': changeOpacity(theme.buttonColor, 0.6),
            'button-bg-50': changeOpacity(theme.buttonBg, 0.5),
            'button-color-50': changeOpacity(theme.buttonColor, 0.5),
            'button-bg-40': changeOpacity(theme.buttonBg, 0.4),