@qoretechnologies/reqore 0.78.6-pr.715.gdfefa70 → 0.78.7-pr.717.gae33bdc

package/dist/components/Button/index.js

@@ -58,38 +58,48 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonBadge = exports.StyledButtonContent = exports.StyledButton = exports.StyledAnimatedTextWrapper = exports.StyledButtonIndicator = void 0;
+exports.ButtonBadge = exports.StyledButtonContent = exports.StyledButton = exports.REQORE_BUTTON_STYLE_PROPS = exports.StyledAnimatedTextWrapper = exports.getButtonPaint = exports.getButtonStateColors = exports.getButtonIconLook = exports.getButtonColors = exports.StyledButtonIndicator = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var useMarqueeOnHover_1 = require("../../hooks/useMarqueeOnHover");
 var lodash_1 = require("lodash");
-var polished_1 = require("polished");
 var react_1 = require("react");
 var react_hotkeys_hook_1 = require("react-hotkeys-hook");
-var styled_components_1 = __importStar(require("styled-components"));
+var styled_components_1 = require("styled-components");
 var colors_1 = require("../../constants/colors");
 var sizes_1 = require("../../constants/sizes");
 var colors_2 = require("../../helpers/colors");
 var shortcuts_1 = require("../../helpers/shortcuts");
-var styled_1 = require("../../helpers/styled");
+var styled_1 = __importStar(require("../../helpers/styled"));
 var utils_1 = require("../../helpers/utils");
 var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
 var useReqoreContext_1 = require("../../hooks/useReqoreContext");
 var useReqoreEffect_1 = require("../../hooks/useReqoreEffect");
 var useTheme_1 = require("../../hooks/useTheme");
+var SurfaceContext_1 = require("../../context/SurfaceContext");
 var styles_1 = require("../../styles");
 var Effect_1 = require("../Effect");
 var Icon_1 = __importDefault(require("../Icon"));
+var iconProps_1 = require("../../helpers/iconProps");
 var KeyboardShortcut_1 = require("../KeyboardShortcut");
 var Spacer_1 = require("../Spacer");
 var Tag_1 = __importDefault(require("../Tag"));
 var group_1 = __importDefault(require("../Tag/group"));
 var TooltipComponent_1 = require("../TooltipComponent");
 var indicatorPulseKeyframes = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: scale(1);\n    opacity: 0.55;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n"], ["\n  0% {\n    transform: scale(1);\n    opacity: 0.55;\n  }\n  70% {\n    opacity: 0;\n  }\n  100% {\n    transform: scale(2.6);\n    opacity: 0;\n  }\n"])));
-exports.StyledButtonIndicator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"], ["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"])), function (_a) {
+exports.StyledButtonIndicator = styled_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"], ["\n  position: absolute;\n  z-index: 2;\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  background-color: ", ";\n  pointer-events: none;\n\n  ", "\n\n  ", ";\n"])), function (_a) {
     var $diameter = _a.$diameter;
     return $diameter;
 }, function (_a) {
@@ -117,30 +127,217 @@ var getButtonMainColor = function (theme, color, effect) {
     }
     return theme.main;
 };
-var getButtonTextColor = function (_a) {
-    var minimal = _a.minimal, transparent = _a.transparent, color = _a.color, theme = _a.theme;
+/**
+ * What a button is drawn on and in, in a state. The background as it is drawn: a minimal button's wash and a
+ * translucent color (the muted intent) blended over the theme the button sits on, a transparent button as that
+ * theme, a gradient as each of its colors. The text is picked against that, and stands out from all of it by 4.5:1;
+ * a minimal or transparent button with a color of its own keeps the color in its text, in a shade that reads.
+ */
+var getButtonColors = function (_a, state) {
+    var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent, effect = _a.effect, $surface = _a.$surface;
+    if (state === void 0) { state = 'rest'; }
+    var main = getButtonMainColor(theme, color, effect);
+    // what the button is drawn on: one color, or each color of a gradient
+    var unders = (0, colors_2.getThemeSurfaces)(theme, $surface);
+    var outlined = minimal || transparent;
+    var gradient = (0, Effect_1.getPrimaryGradient)(effect === null || effect === void 0 ? void 0 : effect.gradient);
+    // an outlined button's text starts from a light tint of its color, lighter hovered
+    var tintAmount = state === 'hover' ? 0.9 : 0.8;
+    var fills;
+    if (gradient && !transparent) {
+        var stops = (0, colors_2.getGradientColorList)(theme, gradient.colors);
+        if (minimal) {
+            // as a minimal gradient is painted: a translucent fill over a translucent ring over the button's wash
+            var painted = unders.flatMap(function (under) {
+                return (0, Effect_1.getEffectGradientBackgrounds)(theme, gradient.colors, true, (0, colors_2.getColorAtAlpha)(main, 0.2), under);
+            });
+            return {
+                backgrounds: painted,
+                text: (0, colors_2.isAchromatic)(main)
+                    ? (0, colors_2.getReadableColorOn)(painted, state === 'rest')
+                    : (0, colors_2.getReadableAccentColorOn)((0, colors_2.getSaturatedTint)(main, tintAmount), painted),
+            };
+        }
+        // as the effect draws it: its colors at rest, each a step lighter hovered or pressed
+        fills = state === 'rest' ? stops : stops.map(function (stop) { return (0, colors_2.changeLightness)(stop, 0.05); });
+    }
+    else if (state === 'active') {
+        fills = [(0, colors_2.changeLightness)(main, 0.1)];
+    }
+    else if (state === 'hover') {
+        fills = [getButtonHoverFill(theme, color, main, minimal, transparent)];
+    }
+    else {
+        fills = [getButtonRestFill(color, main, minimal, transparent)];
+    }
+    var backgrounds = unders.flatMap(function (under) {
+        return fills.map(function (fill) { return (fill === 'transparent' ? under : (0, colors_2.getDrawnColor)(fill, under)); });
+    });
+    var dim = state === 'rest';
+    var text;
+    if (outlined && state !== 'active' && !(0, colors_2.isAchromatic)(main)) {
+        // a color the helpers cannot read (a CSS variable) is as it is given: the text is written in it
+        text = (0, colors_2.getReadableAccentColorOn)((0, colors_2.getSaturatedTint)(main, tintAmount), backgrounds);
+    }
+    else {
+        text = (0, colors_2.getReadableColorOn)(backgrounds, dim);
+    }
+    return { backgrounds: backgrounds, text: text };
+};
+exports.getButtonColors = getButtonColors;
+/**
+ * The fill a button paints at rest: nothing when transparent, a wash of its color when minimal (one the helpers
+ * cannot read, a CSS variable, is washed by the browser), else its color.
+ */
+var getButtonRestFill = function (color, main, minimal, transparent) { return (transparent ? 'transparent' : minimal ? (0, colors_2.getColorAtAlpha)(main, 0.2) : color || main); };
+/** The fill a button paints hovered: a stronger wash when minimal or transparent, else its color a step lighter. */
+var getButtonHoverFill = function (theme, color, main, minimal, transparent) {
     return minimal || transparent
-        ? (0, colors_2.isAchromatic)(color)
-            ? (0, colors_2.getReadableColorFrom)(theme.originalMain, true)
-            : (0, polished_1.saturate)(1, (0, polished_1.tint)(0.8, color))
-        : (0, colors_2.getReadableColorFrom)(color, true);
+        ? (0, colors_2.getColorAtAlpha)((0, colors_2.changeLightness)(main, 0.1), transparent ? 0.2 : 0.4)
+        : (0, colors_2.changeLightness)(getButtonMainColor(theme, color), 0.05);
+};
+/**
+ * How a button draws an icon, at rest and hovered alike: in its own color (`color`, in a shade that stands out by
+ * 3:1) or the button's text color, at `CONTROL_ICON_OPACITY` or as much more as it needs to stand out by 3:1.
+ */
+var getButtonIconLook = function (style, color, active) {
+    return getButtonIconLookIn(style.theme, (0, exports.getButtonStateColors)(style, active), color);
+};
+exports.getButtonIconLook = getButtonIconLook;
+/** `getButtonIconLook`, from the button's colors worked out already (`IReqoreButtonStateColors`). */
+var getButtonIconLookIn = function (theme, states, color) {
+    var _a, _b, _c;
+    // an active button (a selected menu item) is drawn in its fill, hovered or not
+    var rest = (_a = states.active) !== null && _a !== void 0 ? _a : states.rest;
+    var hover = (_c = (_b = states.active) !== null && _b !== void 0 ? _b : states.hover) !== null && _c !== void 0 ? _c : rest;
+    var look = (0, colors_2.getReadableIconLook)(theme, __spreadArray(__spreadArray([], rest.backgrounds, true), hover.backgrounds, true), rest.text, colors_1.CONTROL_ICON_OPACITY, color);
+    // hovered, the text (which an icon without a color of its own is drawn in) may be another color
+    return look.color
+        ? look
+        : {
+            opacity: Math.max(look.opacity, (0, colors_2.getReadableAlpha)(hover.text, hover.backgrounds, colors_1.CONTROL_ICON_OPACITY, colors_2.READABLE_ICON_CONTRAST)),
+        };
+};
+/**
+ * A button's colors in the states it is drawn in (`IReqoreButtonStateColors`): at rest, and hovered or - when it
+ * is `active` - active.
+ */
+var getButtonStateColors = function (style, active) { return ({
+    rest: (0, exports.getButtonColors)(style),
+    hover: active ? undefined : (0, exports.getButtonColors)(style, 'hover'),
+    active: active ? (0, exports.getButtonColors)(style, 'active') : undefined,
+}); };
+exports.getButtonStateColors = getButtonStateColors;
+/**
+ * Everything a button is painted with (`IReqoreButtonPaint`), from its colors in each state. `description`: whether
+ * it has one, whose color is then worked out too.
+ */
+var getButtonPaint = function (style, states, description) {
+    var _a, _b, _c;
+    var theme = style.theme, color = style.color, minimal = style.minimal, transparent = style.transparent, effect = style.effect;
+    var main = getButtonMainColor(theme, color, effect);
+    var drawn = (_a = states.active) !== null && _a !== void 0 ? _a : states.rest;
+    return {
+        background: transparent ? 'transparent' : minimal ? (0, colors_2.getColorAtAlpha)(main, 0.2) : color,
+        text: states.rest.text,
+        edge: (0, colors_2.changeLightness)(main, 0.1),
+        ring: (0, colors_2.changeLightness)(main, 0.25),
+        hoverBackground: states.hover
+            ? getButtonHoverFill(theme, color, main, minimal, transparent)
+            : undefined,
+        hoverText: (_b = states.hover) === null || _b === void 0 ? void 0 : _b.text,
+        activeText: (_c = states.active) === null || _c === void 0 ? void 0 : _c.text,
+        activeEdge: (0, colors_2.changeLightness)(main, 0.175),
+        activeHoverEdge: (0, colors_2.changeLightness)(main, 0.275),
+        // on the button as it is drawn: at rest, or filled when active (a selected menu item)
+        description: description
+            ? (0, colors_2.getReadableFadedColor)(drawn.text, drawn.backgrounds, 0.7)
+            : undefined,
+        /* hovered, the description is on the hover fill, in the hovered text: faded as far as it reads there. Faded for
+           the resting fill, it fell to 3.8:1 on an info button's lighter hover fill (qorus#646) */
+        hoverDescription: description && states.hover
+            ? (0, colors_2.getReadableFadedColor)(states.hover.text, states.hover.backgrounds, 0.7)
+            : undefined,
+    };
 };
-exports.StyledAnimatedTextWrapper = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
+exports.getButtonPaint = getButtonPaint;
+/**
+ * What a styled button is painted with: what the button worked out for this render, or - a `StyledButton`
+ * rendered on its own - worked out from its props.
+ */
+var getStyledButtonPaint = function (props) {
+    var _a;
+    return (_a = props.$paint) !== null && _a !== void 0 ? _a : (0, exports.getButtonPaint)(props, (0, exports.getButtonStateColors)(props, props.active), !!props.description);
+};
+exports.StyledAnimatedTextWrapper = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"], ["\n  min-width: 5px;\n  overflow: hidden;\n  position: relative;\n  text-align: ", ";\n  display: flex;\n  flex-flow: column;\n  align-items: ", ";\n"])), function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;
 }, function (_a) {
     var textAlign = _a.textAlign;
     return (0, utils_1.alignToFlexAlign)(textAlign);
 });
-exports.StyledButton = (0, styled_components_1.default)(Effect_1.StyledEffect).withConfig({
-    // A containing ControlGroup can propagate its `fill` layout flag through
-    // polymorphic controls such as Dropdown. The flag is meaningful to the
-    // group, but it is not a valid boolean attribute for the rendered button.
-    // `color` is the button's colour and `wrap` how its label breaks, both for its styles.
-    shouldForwardProp: (0, styled_1.omitStyleProps)('fill', 'color', 'wrap'),
-})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  /* The page's font (or the theme's, which the layout sets), not the browser's control font:\n     a button left to the user-agent stylesheet renders in the platform's form-control face\n     whatever font the text around it is in. */\n  font-family: inherit;\n  font-weight: 570;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  outline-offset: -2px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  flex: ", ";\n  flex-shrink: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n\n  ", "\n\n  &:focus,\n  &:active {\n    outline: 2px solid\n      ", ";\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-top: ", "px;\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  /* The page's font (or the theme's, which the layout sets), not the browser's control font:\n     a button left to the user-agent stylesheet renders in the platform's form-control face\n     whatever font the text around it is in. */\n  font-family: inherit;\n  font-weight: 570;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  outline-offset: -2px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  flex: ", ";\n  flex-shrink: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n\n  ", "\n\n  &:focus,\n  &:active {\n    outline: 2px solid\n      ", ";\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-top: ", "px;\n    color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme, color = _a.color, flat = _a.flat, effect = _a.effect;
-    return !flat ? "1px solid ".concat((0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1)) : 0;
+/**
+ * Every button prop that only styles the button. None of them reaches the rendered element —
+ * the `<button>`, the `<a>`, or a component given as `as` (a router link writes every prop it does
+ * not know onto its `<a>`). The compiler checks the record against `IReqoreButtonStyle`, so a new
+ * styling prop that is not added here fails the build instead of leaking.
+ */
+exports.REQORE_BUTTON_STYLE_PROPS = (0, styled_1.listReqoreStyleProps)({
+    active: true,
+    alignSelf: true,
+    animate: true,
+    animated: true,
+    badge: true,
+    circle: true,
+    compact: true,
+    customTheme: true,
+    description: true,
+    descriptionEffect: true,
+    effect: true,
+    fixed: true,
+    flat: true,
+    fluid: true,
+    grow: true,
+    icon: true,
+    iconColor: true,
+    iconsAlign: true,
+    indicator: true,
+    intent: true,
+    label: true,
+    labelEffect: true,
+    leftIconColor: true,
+    leftIconProps: true,
+    loading: true,
+    loadingIconType: true,
+    maxWidth: true,
+    minimal: true,
+    pill: true,
+    radiusSize: true,
+    raised: true,
+    readOnly: true,
+    rightIcon: true,
+    rightIconColor: true,
+    rightIconProps: true,
+    rounded: true,
+    shortcut: true,
+    shortcutHint: true,
+    shrink: true,
+    size: true,
+    skeleton: true,
+    square: true,
+    textAlign: true,
+    theme: true,
+    tooltip: true,
+    transparent: true,
+    verticalPadding: true,
+    wrap: true,
+});
+exports.StyledButton = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
+    // Its own styling props, and the layout flags a containing ControlGroup hands it (`fill`, its
+    // place in a stack, ...); `color` is the button's colour, read by its styles.
+    shouldForwardProp: styled_1.omitStyleProps.apply(void 0, __spreadArray(__spreadArray(__spreadArray([], exports.REQORE_BUTTON_STYLE_PROPS, false), styled_1.REQORE_CONTROL_GROUP_CHILD_PROPS, false), ['color'], false)),
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  /* The page's font (or the theme's, which the layout sets), not the browser's control font:\n     a button left to the user-agent stylesheet renders in the platform's form-control face\n     whatever font the text around it is in. */\n  font-family: inherit;\n  font-weight: 570;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  outline-offset: -2px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  flex: ", ";\n  flex-shrink: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n\n  ", "\n\n  &:focus,\n  &:active {\n    outline: 2px solid ", ";\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-top: ", "px;\n    /* on the button as it is drawn: at rest, or filled when active (a selected menu item) */\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  justify-content: center;\n  /* The page's font (or the theme's, which the layout sets), not the browser's control font:\n     a button left to the user-agent stylesheet renders in the platform's form-control face\n     whatever font the text around it is in. */\n  font-family: inherit;\n  font-weight: 570;\n  position: relative;\n  overflow: hidden;\n  vertical-align: middle;\n  border: ", ";\n  padding: ", ";\n  font-size: ", "px;\n  outline-offset: -2px;\n\n  min-height: ", "px;\n  min-width: ", "px;\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  flex: ", ";\n  flex-shrink: ", ";\n  flex-grow: ", ";\n  align-self: ", ";\n\n  border-radius: ", ";\n\n  background-color: ", ";\n\n  color: ", ";\n\n  ", ";\n\n  ", "\n\n  ", ";\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n\n  ", "\n\n  &:focus,\n  &:active {\n    outline: 2px solid ", ";\n    border-color: ", ";\n  }\n\n  .reqore-button-description {\n    padding-top: ", "px;\n    /* on the button as it is drawn: at rest, or filled when active (a selected menu item) */\n    color: ", ";\n  }\n"])), function (props) {
+    return !props.flat ? "1px solid ".concat(getStyledButtonPaint(props).edge) : 0;
 }, function (_a) {
     var size = _a.size, compact = _a.compact, _b = _a.verticalPadding, verticalPadding = _b === void 0 ? 'normal' : _b, square = _a.square;
     return "".concat(sizes_1.CONTROL_VERTICAL_PADDING_FROM_SIZE[size] +
@@ -196,79 +393,43 @@ exports.StyledButton = (0, styled_components_1.default)(Effect_1.StyledEffect).w
         : circle
             ? '9999px'
             : "".concat((0, sizes_1.resolveRadius)(size, radiusSize) * (pill ? sizes_1.PILL_RADIUS_MODIFIER : 1), "px");
-}, function (_a) {
-    var minimal = _a.minimal, color = _a.color, theme = _a.theme, transparent = _a.transparent, effect = _a.effect;
-    if (transparent) {
-        return 'transparent';
-    }
-    if (minimal) {
-        return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), (0, polished_1.rgba)(getButtonMainColor(theme, color, effect), 0.2));
-    }
-    return color;
-}, function (_a) {
-    var color = _a.color, minimal = _a.minimal, transparent = _a.transparent, theme = _a.theme, effect = _a.effect;
-    var finalColor = getButtonMainColor(theme, color, effect);
-    return getButtonTextColor({ minimal: minimal, transparent: transparent, color: finalColor, theme: theme });
-}, styles_1.InactiveIconScale, function (_a) {
+}, function (props) { return getStyledButtonPaint(props).background; }, function (props) { return getStyledButtonPaint(props).text; }, styles_1.InactiveIconScale, function (_a) {
     var raised = _a.raised, flat = _a.flat, transparent = _a.transparent;
     return raised && flat && !transparent && styles_1.RaisedElement;
-}, function (_a) {
-    var readOnly = _a.readOnly, animate = _a.animate, active = _a.active, theme = _a.theme, color = _a.color, effect = _a.effect;
-    return !readOnly && !active
-        ? (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              outline: 3px solid ", ";\n              outline-offset: -3px;\n              transition: none;\n            }\n\n            &:hover:not(:active) {\n              outline: 2px solid ", ";\n              transition: none;\n            }\n\n            &:hover,\n            &:active {\n              border-color: ", ";\n              background-color: ", ";\n              color: ", "\n                ", ";\n            }\n          }\n        "], ["\n          &:not(:disabled) {\n            ", "\n\n            cursor: pointer;\n            transition: all 0.2s ease-out;\n\n            &:active {\n              outline: 3px solid ", ";\n              outline-offset: -3px;\n              transition: none;\n            }\n\n            &:hover:not(:active) {\n              outline: 2px solid ", ";\n              transition: none;\n            }\n\n            &:hover,\n            &:active {\n              border-color: ", ";\n              background-color: ", ";\n              color: ", "\n                ", ";\n            }\n          }\n        "])), styles_1.ScaleIconOnHover, (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.25), (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.25), function (_a) {
-            var flat = _a.flat, theme = _a.theme, color = _a.color;
-            return flat ? undefined : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.25);
-        }, function (_a) {
-            var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent;
-            return minimal || transparent
-                ? (0, polished_1.rgba)((0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1), transparent ? 0.2 : 0.4)
-                : (0, colors_2.changeLightness)(getButtonMainColor(theme, color), 0.05);
-        }, function (_a) {
-            var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent, effect = _a.effect;
-            var finalColor = getButtonMainColor(theme, color, effect);
-            return minimal || transparent
-                ? (0, colors_2.isAchromatic)(finalColor)
-                    ? (0, colors_2.getReadableColorFrom)(theme.originalMain)
-                    : (0, polished_1.saturate)(1, (0, polished_1.tint)(0.9, finalColor))
-                : (0, colors_2.getReadableColorFrom)(finalColor);
-        }, animate
-            ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                      cursor: pointer;\n\n                      ", " {\n                        transform: translateY(150%);\n                        filter: blur(10px);\n                        opacity: 0;\n                      }\n\n                      ", " {\n                        transform: translateY(0px);\n                        filter: blur(0);\n                        opacity: 1;\n                      }\n                    "], ["\n                      cursor: pointer;\n\n                      ", " {\n                        transform: translateY(150%);\n                        filter: blur(10px);\n                        opacity: 0;\n                      }\n\n                      ", " {\n                        transform: translateY(0px);\n                        filter: blur(0);\n                        opacity: 1;\n                      }\n                    "])), styles_1.StyledInActiveContent, styles_1.StyledActiveContent) : undefined) : readOnly
-        ? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          ", ";\n        "], ["\n          ", ";\n        "])), styles_1.ReadOnlyElement) : undefined;
-}, function (_a) {
-    var active = _a.active, flat = _a.flat, theme = _a.theme, color = _a.color, effect = _a.effect;
-    if (active) {
-        return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "])), (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1), (0, colors_2.getReadableColor)({ main: (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1) }, undefined, undefined), flat
-            ? undefined
-            : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.175), flat
-            ? undefined
-            : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.275), styles_1.ActiveIconScale);
+}, function (props) {
+    var readOnly = props.readOnly, animate = props.animate, active = props.active, flat = props.flat;
+    if (readOnly || active) {
+        return readOnly
+            ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            ", ";\n          "], ["\n            ", ";\n          "])), styles_1.ReadOnlyElement) : undefined;
+    }
+    var _a = getStyledButtonPaint(props), ring = _a.ring, hoverBackground = _a.hoverBackground, hoverText = _a.hoverText, hoverDescription = _a.hoverDescription;
+    return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      &:not(:disabled) {\n        ", "\n\n        cursor: pointer;\n        transition: all 0.2s ease-out;\n\n        &:active {\n          outline: 3px solid ", ";\n          outline-offset: -3px;\n          transition: none;\n        }\n\n        &:hover:not(:active) {\n          outline: 2px solid ", ";\n          transition: none;\n        }\n\n        &:hover,\n        &:active {\n          border-color: ", ";\n          background-color: ", ";\n          /* Ended here: the animated content's rules below ran on into this declaration, which the\n             browser then dropped - a hovered button kept its resting text on its hovered fill. */\n          color: ", ";\n\n          .reqore-button-description {\n            color: ", ";\n          }\n\n          ", ";\n        }\n      }\n    "], ["\n      &:not(:disabled) {\n        ", "\n\n        cursor: pointer;\n        transition: all 0.2s ease-out;\n\n        &:active {\n          outline: 3px solid ", ";\n          outline-offset: -3px;\n          transition: none;\n        }\n\n        &:hover:not(:active) {\n          outline: 2px solid ", ";\n          transition: none;\n        }\n\n        &:hover,\n        &:active {\n          border-color: ", ";\n          background-color: ", ";\n          /* Ended here: the animated content's rules below ran on into this declaration, which the\n             browser then dropped - a hovered button kept its resting text on its hovered fill. */\n          color: ", ";\n\n          .reqore-button-description {\n            color: ", ";\n          }\n\n          ", ";\n        }\n      }\n    "])), styles_1.ScaleIconOnHover, ring, ring, flat ? undefined : ring, hoverBackground, hoverText, hoverDescription, animate
+        ? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                cursor: pointer;\n\n                ", " {\n                  transform: translateY(150%);\n                  filter: blur(10px);\n                  opacity: 0;\n                }\n\n                ", " {\n                  transform: translateY(0px);\n                  filter: blur(0);\n                  opacity: 1;\n                }\n              "], ["\n                cursor: pointer;\n\n                ", " {\n                  transform: translateY(150%);\n                  filter: blur(10px);\n                  opacity: 0;\n                }\n\n                ", " {\n                  transform: translateY(0px);\n                  filter: blur(0);\n                  opacity: 1;\n                }\n              "])), styles_1.StyledInActiveContent, styles_1.StyledActiveContent) : undefined);
+}, function (props) {
+    if (props.active) {
+        var flat = props.flat;
+        var _a = getStyledButtonPaint(props), edge = _a.edge, activeText = _a.activeText, activeEdge = _a.activeEdge, activeHoverEdge = _a.activeHoverEdge;
+        return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover,\n        &:active,\n        &:focus {\n          border-color: ", ";\n        }\n\n        ", "\n      "])), edge, activeText, flat ? undefined : activeEdge, flat ? undefined : activeHoverEdge, styles_1.ActiveIconScale);
     }
 }, styles_1.DisabledElement, function (_a) {
     var $isLink = _a.$isLink;
     return $isLink
-        ? (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n          text-decoration: none;\n\n          /* A link has no :disabled; a disabled one says so with aria-disabled. */\n          &[aria-disabled='true'] {\n            ", ";\n          }\n        "], ["\n          text-decoration: none;\n\n          /* A link has no :disabled; a disabled one says so with aria-disabled. */\n          &[aria-disabled='true'] {\n            ", ";\n          }\n        "])), styles_1.DisabledElement) : undefined;
-}, function (_a) {
-    var theme = _a.theme, color = _a.color, effect = _a.effect;
-    return (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1);
-}, function (_a) {
-    var minimal = _a.minimal, theme = _a.theme, color = _a.color, effect = _a.effect;
-    return minimal ? undefined : (0, colors_2.changeLightness)(getButtonMainColor(theme, color, effect), 0.1);
+        ? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          text-decoration: none;\n\n          /* A link has no :disabled; a disabled one says so with aria-disabled. */\n          &[aria-disabled='true'] {\n            ", ";\n          }\n        "], ["\n          text-decoration: none;\n\n          /* A link has no :disabled; a disabled one says so with aria-disabled. */\n          &[aria-disabled='true'] {\n            ", ";\n          }\n        "])), styles_1.DisabledElement) : undefined;
+}, function (props) { return getStyledButtonPaint(props).edge; }, function (props) {
+    return props.minimal ? undefined : getStyledButtonPaint(props).edge;
 }, function (_a) {
     var size = _a.size;
     return sizes_1.PADDING_FROM_SIZE[size] / 2;
-}, function (_a) {
-    var theme = _a.theme, color = _a.color, minimal = _a.minimal, transparent = _a.transparent;
-    return (0, polished_1.rgba)(getButtonTextColor({ minimal: minimal, transparent: transparent, color: color, theme: theme }), 0.7);
-});
-exports.StyledButtonContent = styled_components_1.default.div.withConfig({
+}, function (props) { return getStyledButtonPaint(props).description; });
+exports.StyledButtonContent = styled_1.default.div.withConfig({
     shouldForwardProp: (0, styled_1.omitStyleProps)('wrap'),
-})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"])), function (_a) {
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: ", "px;\n  flex: 1;\n  flex-shrink: 0;\n\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return sizes_1.ICON_FROM_SIZE[size];
 }, function (_a) {
     var wrap = _a.wrap, description = _a.description;
     return !wrap && !description
-        ? (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          max-height: ", "px;\n        "], ["\n          max-height: ", "px;\n        "])), function (_a) {
+        ? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n          max-height: ", "px;\n        "], ["\n          max-height: ", "px;\n        "])), function (_a) {
             var size = _a.size;
             return sizes_1.SIZE_TO_PX[size];
         }) : null;
@@ -321,13 +482,14 @@ exports.ButtonBadge = (0, react_1.memo)(function (_a) {
  * Primary Reqore button component that supports intents, icons, and badges.
  */
 var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d;
-    var icon = _a.icon, _e = _a.size, size = _e === void 0 ? 'normal' : _e, minimal = _a.minimal, transparent = _a.transparent, children = _a.children, tooltip = _a.tooltip, className = _a.className, fluid = _a.fluid, fixed = _a.fixed, alignSelf = _a.alignSelf, intent = _a.intent, active = _a.active, flat = _a.flat, rightIcon = _a.rightIcon, customTheme = _a.customTheme, wrap = _a.wrap, readOnly = _a.readOnly, badge = _a.badge, indicator = _a.indicator, description = _a.description, maxWidth = _a.maxWidth, textAlignProp = _a.textAlign, effect = _a.effect, labelEffect = _a.labelEffect, descriptionEffect = _a.descriptionEffect, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, iconsAlignProp = _a.iconsAlign, leftIconProps = _a.leftIconProps, rightIconProps = _a.rightIconProps, label = _a.label, compact = _a.compact, square = _a.square, as = _a.as, animated = _a.animated, loading = _a.loading, shortcut = _a.shortcut, shortcutHint = _a.shortcutHint, loadingIconType = _a.loadingIconType, href = _a.href, type = _a.type, rest = __rest(_a, ["icon", "size", "minimal", "transparent", "children", "tooltip", "className", "fluid", "fixed", "alignSelf", "intent", "active", "flat", "rightIcon", "customTheme", "wrap", "readOnly", "badge", "indicator", "description", "maxWidth", "textAlign", "effect", "labelEffect", "descriptionEffect", "leftIconColor", "rightIconColor", "iconColor", "iconsAlign", "leftIconProps", "rightIconProps", "label", "compact", "square", "as", "animated", "loading", "shortcut", "shortcutHint", "loadingIconType", "href", "type"]);
+    var _b, _c, _d, _e, _f, _g;
+    var icon = _a.icon, _h = _a.size, size = _h === void 0 ? 'normal' : _h, minimal = _a.minimal, transparent = _a.transparent, children = _a.children, tooltip = _a.tooltip, className = _a.className, fluid = _a.fluid, fixed = _a.fixed, alignSelf = _a.alignSelf, intent = _a.intent, active = _a.active, flat = _a.flat, rightIcon = _a.rightIcon, customTheme = _a.customTheme, wrap = _a.wrap, readOnly = _a.readOnly, badge = _a.badge, indicator = _a.indicator, description = _a.description, maxWidth = _a.maxWidth, textAlignProp = _a.textAlign, effect = _a.effect, labelEffect = _a.labelEffect, descriptionEffect = _a.descriptionEffect, leftIconColor = _a.leftIconColor, rightIconColor = _a.rightIconColor, iconColor = _a.iconColor, iconsAlignProp = _a.iconsAlign, leftIconProps = _a.leftIconProps, rightIconProps = _a.rightIconProps, label = _a.label, compact = _a.compact, square = _a.square, as = _a.as, animated = _a.animated, loading = _a.loading, shortcut = _a.shortcut, shortcutHint = _a.shortcutHint, loadingIconType = _a.loadingIconType, href = _a.href, type = _a.type, rest = __rest(_a, ["icon", "size", "minimal", "transparent", "children", "tooltip", "className", "fluid", "fixed", "alignSelf", "intent", "active", "flat", "rightIcon", "customTheme", "wrap", "readOnly", "badge", "indicator", "description", "maxWidth", "textAlign", "effect", "labelEffect", "descriptionEffect", "leftIconColor", "rightIconColor", "iconColor", "iconsAlign", "leftIconProps", "rightIconProps", "label", "compact", "square", "as", "animated", "loading", "shortcut", "shortcutHint", "loadingIconType", "href", "type"]);
     var animations = (0, useReqoreContext_1.useReqoreProperty)('animations');
     var shortcutHintsEnabled = (0, useReqoreContext_1.useReqoreProperty)('shortcutHints');
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
+    var surface = (0, SurfaceContext_1.useReqoreSurface)();
     var fixedEffect = (0, useReqoreEffect_1.useReqoreEffect)('buttons', theme, effect);
-    var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
+    var _j = (0, useCombinedRefs_1.useCombinedRefs)(ref), targetRef = _j.targetRef, setRef = _j.setRef;
     // Square chips have no horizontal padding, so the content would
     // stick to the left edge if we kept `textAlign`'s usual `'left'`
     // default. Default `textAlign` and `iconsAlign` to `'center'` for
@@ -366,6 +528,17 @@ var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref)
     var customColor = (0, react_1.useMemo)(function () { return (intent ? theme.main : (0, colors_2.changeLightness)(theme.main, 0.07)); }, [intent, theme.main]);
     var _flat = minimal ? flat : flat === true;
     var _children = (0, react_1.useMemo)(function () { return label || children; }, [label, children]);
+    /* An icon alone names nothing: a button with no label of its own and no `aria-label` was read as
+       "button", and a test that finds buttons by name found nothing to test (qorus#646). Its tooltip, when
+       that is a string, is the words it would say, so it names it. A tooltip that is a node or an object is
+       left to the caller, and a button that has a label, or is named already, is not named twice. */
+    var tooltipName = !_children &&
+        !rest['aria-label'] &&
+        !rest['aria-labelledby'] &&
+        typeof tooltip === 'string' &&
+        tooltip.trim()
+        ? tooltip
+        : undefined;
     var _compact = (_c = compact !== null && compact !== void 0 ? compact : (_b = theme.buttons) === null || _b === void 0 ? void 0 : _b.compact) !== null && _c !== void 0 ? _c : !children;
     var hasLeftIcon = icon || (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.image);
     var hasRightIcon = rightIcon || (rightIconProps === null || rightIconProps === void 0 ? void 0 : rightIconProps.image);
@@ -382,6 +555,46 @@ var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref)
         ? "Loader".concat(loadingIconType || '', "Line")
         : icon || (leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.icon);
     var memoEffect = (0, react_1.useMemo)(function () { return (__assign(__assign({ interactive: !readOnly && !rest.disabled }, fixedEffect), { gradient: intent ? undefined : fixedEffect === null || fixedEffect === void 0 ? void 0 : fixedEffect.gradient })); }, [fixedEffect, intent, readOnly, rest.disabled]);
+    /* The button's colors depend on its gradient alone of its effect: an effect the caller writes inline (a new
+       object each render) with the same gradient keeps them. */
+    var gradientKey = (memoEffect === null || memoEffect === void 0 ? void 0 : memoEffect.gradient) ? JSON.stringify(memoEffect.gradient) : undefined;
+    // The icons stand out from what the button is drawn on, as its text does.
+    var colorProps = (0, react_1.useMemo)(function () { return ({
+        theme: theme,
+        color: customColor,
+        minimal: minimal,
+        transparent: transparent,
+        effect: memoEffect,
+        $surface: surface,
+    }); }, [theme, customColor, minimal, transparent, gradientKey, surface]);
+    /* Its colors in the states it is drawn in, and what its styles paint it with, worked out once per render
+       rather than in each of its style rules. */
+    var states = (0, react_1.useMemo)(function () { return (0, exports.getButtonStateColors)(colorProps, active); }, [colorProps, active]);
+    // whether it has a description, not the description: a node given inline is new each render
+    var hasDescription = !!description;
+    var paint = (0, react_1.useMemo)(function () { return (0, exports.getButtonPaint)(colorProps, states, hasDescription); }, [colorProps, states, hasDescription]);
+    // an icon's own color: in its props (which win, as they are spread over the rest), else the button's
+    var _k = (0, iconProps_1.splitIconColor)(leftIconProps), leftIconPropsColor = _k[0], leftIconRest = _k[1];
+    var _l = (0, iconProps_1.splitIconColor)(rightIconProps), rightIconPropsColor = _l[0], rightIconRest = _l[1];
+    var leftIconOwn = leftIconPropsColor || leftIconColor || iconColor;
+    var rightIconOwn = rightIconPropsColor || rightIconColor || iconColor;
+    // only for the icons the button draws
+    var leftIconLook = (0, react_1.useMemo)(function () { return (hasLeftIcon ? getButtonIconLookIn(theme, states, leftIconOwn) : undefined); }, [hasLeftIcon, theme, states, leftIconOwn]);
+    var rightIconLook = (0, react_1.useMemo)(function () { return (hasRightIcon ? getButtonIconLookIn(theme, states, rightIconOwn) : undefined); }, [hasRightIcon, theme, states, rightIconOwn]);
+    /* What the button holds (its badges, a label given as a node) is drawn on the button: at rest, or in its
+       fill when it is active (a selected menu item, whose badges were picked for the resting wash). */
+    var restingBackground = ((_d = states.active) !== null && _d !== void 0 ? _d : states.rest).backgrounds;
+    /* Its effect's color is written on its own fill, at rest and hovered (or active), not on the surface
+       around it: an info text on a success button was read on the page, 2.7:1 on the green. */
+    var fillBackgrounds = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return states.active
+            ? states.active.backgrounds
+            : __spreadArray(__spreadArray([], states.rest.backgrounds, true), ((_b = (_a = states.hover) === null || _a === void 0 ? void 0 : _a.backgrounds) !== null && _b !== void 0 ? _b : []), true);
+    }, [states]);
+    // one object for as long as the opacity holds: an icon is a memo component
+    var leftIconEffect = (0, react_1.useMemo)(function () { return ({ opacity: leftIconLook === null || leftIconLook === void 0 ? void 0 : leftIconLook.opacity }); }, [leftIconLook === null || leftIconLook === void 0 ? void 0 : leftIconLook.opacity]);
+    var rightIconEffect = (0, react_1.useMemo)(function () { return ({ opacity: rightIconLook === null || rightIconLook === void 0 ? void 0 : rightIconLook.opacity }); }, [rightIconLook === null || rightIconLook === void 0 ? void 0 : rightIconLook.opacity]);
     var indicatorConfig = (0, react_1.useMemo)(function () {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!indicator) {
@@ -397,37 +610,38 @@ var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref)
             pulse: (_g = config.pulse) !== null && _g !== void 0 ? _g : false,
         };
     }, [indicator, size, theme.intents]);
-    return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, { effect: memoEffect,
+    return ((0, jsx_runtime_1.jsxs)(TooltipComponent_1.ReqoreTooltipComponent, __assign({}, rest, (tooltipName ? { 'aria-label': tooltipName } : {}), { effect: memoEffect,
         // The caller's tab stop wins — a grid or a diagram keeps one of its
         // buttons in the tab order and moves it — except that a disabled
         // button is never one.
-        tabIndex: rest.disabled ? -1 : ((_d = rest.tabIndex) !== null && _d !== void 0 ? _d : 0) }, elementProps, { as: element, theme: theme, fluid: fluid, fixed: fixed, alignSelf: alignSelf, maxWidth: maxWidth, minimal: minimal, transparent: transparent, size: size, intent: intent, color: customColor, animate: animate, flat: _flat, active: active, readOnly: readOnly || loading, wrap: wrap, description: description, className: "".concat(className || '', " reqore-control reqore-button"),
-        compact: _compact, square: square, tooltip: tooltip }, useMarqueeOnHover_1.REQORE_MARQUEE_HOST, { Component: exports.StyledButton, ref: targetRef, children: [(0, jsx_runtime_1.jsxs)(exports.StyledButtonContent, { size: size, wrap: wrap, description: description, flat: _flat, children: [hasLeftIcon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: size, color: leftIconColor || iconColor, compact: true, effect: {
-                                    opacity: colors_1.CONTROL_ICON_OPACITY,
-                                } }, leftIconProps, { style: textAlign !== 'left' || iconsAlign === 'center' || !_children
-                                    ? {
-                                        marginRight: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
-                                        marginLeft: iconsAlign === 'center' ||
-                                            !_children ||
-                                            (textAlign === 'center' && !_children)
-                                            ? 'auto'
-                                            : undefined,
-                                    }
-                                    : undefined, animation: loading ? 'spin' : leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.animation, icon: leftIcon })), _children || hasRightIcon ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 })) : null] })) : _children ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'left' ? { marginRight: 'auto' } : undefined })) : null, _children && ((0, jsx_runtime_1.jsxs)(exports.StyledAnimatedTextWrapper, { textAlign: textAlign, style: textAlign === 'center' && iconsAlign !== 'center' ? { margin: 'auto' } : undefined, children: [!animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-active' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledInActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-inactive' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { "aria-hidden": 'true', children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledInvisibleContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-invisible', "aria-hidden": 'true', children: _children })), (badge || badge === 0) && wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, wrap: true, active: active })) : null] })), (badge || badge === 0) && !wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, compact: _compact, wrapGroup: false, wrap: false, active: active })) : null, !hasRightIcon ? (_children ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'right' && !hasRightAlignedBadge
-                            ? { marginLeft: 'auto' }
-                            : undefined })) : null) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [_children || badge ? (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 }) : null, (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ icon: rightIcon, size: size, color: rightIconColor || iconColor, effect: {
-                                    opacity: colors_1.CONTROL_ICON_OPACITY,
-                                } }, rightIconProps, { style: textAlign !== 'right' || iconsAlign === 'center'
-                                    ? {
-                                        marginLeft: !hasRightAlignedBadge && (iconsAlign !== 'center' || !_children)
-                                            ? 'auto'
-                                            : undefined,
-                                        marginRight: iconsAlign === 'center' || (textAlign === 'center' && !_children)
-                                            ? 'auto'
-                                            : undefined,
-                                    }
-                                    : undefined }))] })), showShortcutHint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 }), (0, jsx_runtime_1.jsx)(KeyboardShortcut_1.ReqoreKeyboardShortcut, { shortcut: shortcut, size: size, compact: _compact })] })) : null] }), description && ((0, jsx_runtime_1.jsx)(Effect_1.ReqoreTextEffect, { className: 'reqore-button-description', effect: __assign({ textSize: (0, utils_1.getOneLessSize)(size), weight: 'light', textAlign: textAlign }, descriptionEffect), children: description })), indicatorConfig && ((0, jsx_runtime_1.jsx)(exports.StyledButtonIndicator, { className: 'reqore-button-indicator', "$color": indicatorConfig.color, "$diameter": indicatorConfig.diameter, "$offset": indicatorConfig.offset, "$position": indicatorConfig.position, "$pulse": indicatorConfig.pulse, "aria-hidden": 'true' }))] })));
+        tabIndex: rest.disabled ? -1 : ((_e = rest.tabIndex) !== null && _e !== void 0 ? _e : 0) }, elementProps, { as: element, theme: theme, fluid: fluid, fixed: fixed, alignSelf: alignSelf, maxWidth: maxWidth, minimal: minimal, transparent: transparent, size: size, intent: intent, color: customColor,
+        $surface: surface,
+        $backgrounds: fillBackgrounds,
+        $paint: paint, animate: animate, flat: _flat, active: active, readOnly: readOnly || loading, wrap: wrap, description: description, className: "".concat(className || '', " reqore-control reqore-button"),
+        compact: _compact, square: square, tooltip: tooltip }, useMarqueeOnHover_1.REQORE_MARQUEE_HOST, { Component: exports.StyledButton, ref: setRef, children: [(0, jsx_runtime_1.jsxs)(SurfaceContext_1.ReqoreSurfaceProvider, { color: restingBackground, children: [(0, jsx_runtime_1.jsxs)(exports.StyledButtonContent, { size: size, wrap: wrap, description: description, flat: _flat, children: [hasLeftIcon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ size: size, color: (_f = leftIconLook === null || leftIconLook === void 0 ? void 0 : leftIconLook.color) !== null && _f !== void 0 ? _f : leftIconOwn, compact: true, effect: leftIconEffect }, leftIconRest, { style: textAlign !== 'left' || iconsAlign === 'center' || !_children
+                                            ? {
+                                                marginRight: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
+                                                marginLeft: iconsAlign === 'center' ||
+                                                    !_children ||
+                                                    (textAlign === 'center' && !_children)
+                                                    ? 'auto'
+                                                    : undefined,
+                                            }
+                                            : undefined, animation: loading ? 'spin' : leftIconProps === null || leftIconProps === void 0 ? void 0 : leftIconProps.animation, icon: leftIcon })), _children || hasRightIcon ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 })) : null] })) : _children ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'left' ? { marginRight: 'auto' } : undefined })) : null, _children && ((0, jsx_runtime_1.jsxs)(exports.StyledAnimatedTextWrapper, { textAlign: textAlign, style: textAlign === 'center' && iconsAlign !== 'center'
+                                    ? { margin: 'auto' }
+                                    : undefined, children: [!animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-active' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledInActiveContent, __assign({ wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-inactive' }, useMarqueeOnHover_1.REQORE_MARQUEE_TEXT, { "aria-hidden": 'true', children: _children }))), animate && ((0, jsx_runtime_1.jsx)(styles_1.StyledInvisibleContent, { wrap: wrap, effect: labelEffect, className: 'reqore-button-text-content reqore-animated reqore-invisible', "aria-hidden": 'true', children: _children })), (badge || badge === 0) && wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, wrap: true, active: active })) : null] })), (badge || badge === 0) && !wrap ? ((0, jsx_runtime_1.jsx)(exports.ButtonBadge, { content: badge, size: size, compact: _compact, wrapGroup: false, wrap: false, active: active })) : null, !hasRightIcon ? (_children ? ((0, jsx_runtime_1.jsx)(Spacer_1.ReqoreHorizontalSpacer, { width: 1, style: textAlign !== 'right' && !hasRightAlignedBadge
+                                    ? { marginLeft: 'auto' }
+                                    : undefined })) : null) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [_children || badge ? (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 }) : null, (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({ icon: rightIcon, size: size, color: (_g = rightIconLook === null || rightIconLook === void 0 ? void 0 : rightIconLook.color) !== null && _g !== void 0 ? _g : rightIconOwn, effect: rightIconEffect }, rightIconRest, { style: textAlign !== 'right' || iconsAlign === 'center'
+                                            ? {
+                                                marginLeft: !hasRightAlignedBadge && (iconsAlign !== 'center' || !_children)
+                                                    ? 'auto'
+                                                    : undefined,
+                                                marginRight: iconsAlign === 'center' || (textAlign === 'center' && !_children)
+                                                    ? 'auto'
+                                                    : undefined,
+                                            }
+                                            : undefined }))] })), showShortcutHint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.ReqoreSpacer, { width: sizes_1.PADDING_FROM_SIZE[size] / 2 }), (0, jsx_runtime_1.jsx)(KeyboardShortcut_1.ReqoreKeyboardShortcut, { shortcut: shortcut, size: size, compact: _compact })] })) : null] }), description && ((0, jsx_runtime_1.jsx)(Effect_1.ReqoreTextEffect, { className: 'reqore-button-description', effect: __assign({ textSize: (0, utils_1.getOneLessSize)(size), weight: 'light', textAlign: textAlign }, descriptionEffect), children: description }))] }), indicatorConfig && ((0, jsx_runtime_1.jsx)(exports.StyledButtonIndicator, { className: 'reqore-button-indicator', "$color": indicatorConfig.color, "$diameter": indicatorConfig.diameter, "$offset": indicatorConfig.offset, "$position": indicatorConfig.position, "$pulse": indicatorConfig.pulse, "aria-hidden": 'true' }))] })));
 }));
 exports.default = ReqoreButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
 //# sourceMappingURL=index.js.map