@qoretechnologies/reqore 0.78.10 → 0.78.11-pr.723.g4423093

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
+import { TReqoreSurface } from '../../helpers/colors';
 import { TReqoreKeyboardShortcut } from '../../helpers/shortcuts';
 import { TReqoreStylePropKeys } from '../../helpers/styled';
 import { IReqoreDisabled, IReqoreIntent, IReqoreReadOnly, IWithReqoreEffect, IWithReqoreLoading, IWithReqoreSize, TReqoreTooltipProp } from '../../types/global';
@@ -145,11 +146,77 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
 }
 export interface IReqoreButtonStyle extends IReqoreButtonProps {
     theme: IReqoreTheme;
+    /** What the button is drawn on (`useReqoreSurface`): the theme's surface when not known. */
+    $surface?: TReqoreSurface;
     animate?: boolean;
     color?: TReqoreHexColor;
     /** Rendered as an `<a>`: no underline from the browser's link style. */
     $isLink?: boolean;
+    /** What the button is painted with, worked out once per render (`getButtonPaint`). */
+    $paint?: IReqoreButtonPaint;
 }
+/** A button at rest, under the pointer, or pressed (`active`). */
+type TReqoreButtonState = 'rest' | 'hover' | 'active';
+/** What a button's colors are worked out from. */
+type TReqoreButtonColorProps = Pick<IReqoreButtonStyle, 'theme' | 'color' | 'minimal' | 'transparent' | 'effect' | '$surface'>;
+interface IReqoreButtonColors {
+    /** What the button is drawn on, as the browser draws it: one color, or each color of its gradient. */
+    backgrounds: TReqoreHexColor[];
+    /** Its text, which stands out from every one of them. */
+    text: TReqoreHexColor;
+}
+/**
+ * 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.
+ */
+export declare const getButtonColors: ({ theme, color, minimal, transparent, effect, $surface }: TReqoreButtonColorProps, state?: TReqoreButtonState) => IReqoreButtonColors;
+/** A button's colors in each state it is drawn in: at rest, hovered (when it is not active), and active. */
+export interface IReqoreButtonStateColors {
+    rest: IReqoreButtonColors;
+    hover?: IReqoreButtonColors;
+    active?: IReqoreButtonColors;
+}
+/**
+ * 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.
+ */
+export declare const getButtonIconLook: (style: TReqoreButtonColorProps, color?: TReqoreEffectColor, active?: boolean) => {
+    color?: TReqoreHexColor;
+    opacity: number;
+};
+/** What a button's styles paint it with, worked out once per render (`getButtonPaint`), not in each style rule. */
+export interface IReqoreButtonPaint {
+    /** Its fill and text at rest. */
+    background: string;
+    text: TReqoreHexColor;
+    /** Its color a step lighter: the edge (`flat={false}`), the focus ring and an active button's fill. */
+    edge: string;
+    /** The ring drawn while it is hovered or pressed, and its edge then. */
+    ring: string;
+    /** Hovered (not when active): its fill and text. */
+    hoverBackground?: string;
+    hoverText?: TReqoreHexColor;
+    /** Active (a selected menu item): its text and edge, at rest and hovered. */
+    activeText?: TReqoreHexColor;
+    activeEdge: string;
+    activeHoverEdge: string;
+    /** The description's color, faded as far as it still reads (with a description only). */
+    description?: string;
+    /** Hovered (not when active): the description's color, faded as far as it reads on the hover fill. */
+    hoverDescription?: string;
+}
+/**
+ * A button's colors in the states it is drawn in (`IReqoreButtonStateColors`): at rest, and hovered or - when it
+ * is `active` - active.
+ */
+export declare const getButtonStateColors: (style: TReqoreButtonColorProps, active?: boolean) => IReqoreButtonStateColors;
+/**
+ * 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.
+ */
+export declare const getButtonPaint: (style: TReqoreButtonColorProps, states: IReqoreButtonStateColors, description?: boolean) => IReqoreButtonPaint;
 export declare const StyledAnimatedTextWrapper: any;
 /**
  * Every button prop that only styles the button. None of them reaches the rendered element —

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Button/index.js

@@ -71,11 +71,10 @@ 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.REQORE_BUTTON_STYLE_PROPS = 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 = require("styled-components");
@@ -89,9 +88,11 @@ 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"));
@@ -126,13 +127,147 @@ 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.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;
@@ -201,9 +336,8 @@ 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_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  /* A button is never wider than its container, unless it sets its own maxWidth: fixed means it does not\n     stretch, not that it may run past what holds it. A fixed button saying a value and its description stayed as\n     wide as both on one line, 487-712px in a 346px card on a phone (qorus#646); capped, its label is clipped as any\n     button's is, and its description takes as many lines as it needs. */\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  /* A button is never wider than its container, unless it sets its own maxWidth: fixed means it does not\n     stretch, not that it may run past what holds it. A fixed button saying a value and its description stayed as\n     wide as both on one line, 487-712px in a 346px card on a phone (qorus#646); capped, its label is clipped as any\n     button's is, and its description takes as many lines as it needs. */\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;
+})(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  /* A button is never wider than its container, unless it sets its own maxWidth: fixed means it does not\n     stretch, not that it may run past what holds it. A fixed button saying a value and its description stayed as\n     wide as both on one line, 487-712px in a 346px card on a phone (qorus#646); capped, its label is clipped as any\n     button's is, and its description takes as many lines as it needs. */\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  /* A button is never wider than its container, unless it sets its own maxWidth: fixed means it does not\n     stretch, not that it may run past what holds it. A fixed button saying a value and its description stayed as\n     wide as both on one line, 487-712px in a 346px card on a phone (qorus#646); capped, its label is clipped as any\n     button's is, and its description takes as many lines as it needs. */\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] +
@@ -259,79 +393,43 @@ exports.StyledButton = (0, styled_1.default)(Effect_1.StyledEffect).withConfig({
         : 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);
-});
+}, 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;
@@ -384,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 _f = (0, useCombinedRefs_1.useCombinedRefs)(ref), targetRef = _f.targetRef, setRef = _f.setRef;
+    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
@@ -456,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) {
@@ -475,33 +614,34 @@ var ReqoreButton = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref)
         // 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: setRef, 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