@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

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

@@ -1,46 +1,59 @@
 import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
-import { ButtonColorPalette, ButtonVariant } from './Button.types';
+import { ButtonColorPalette, ButtonVariant, LegacyButtonVariant } from './Button.types';
 type StyleProps = Partial<ChakraButtonProps>;
+export declare const buttonTransition: string;
 /**
- * Two-dimensional Button styles using the Golden Ratio color system.
+ * Button styles per role (5.0 BAZE palette).
  *
- * Combines `colorPalette` (semantic color) with `variant` (visual appearance)
- * to create a flexible, consistent button styling system.
+ * Token-to-state assignments follow the prototype gallery (`.btn.*`). Every
+ * variant owns `_hover`, `_active` (colour + the shared `scale` press) and
+ * `_disabled`. Disabled is a fixed colour pair (`disabledControl`, or
+ * `disabledText` for the fill-less ghost) — never opacity — and Chakra's
+ * `_hover` / `_active` conditions already exclude `:disabled`, so a disabled
+ * button does not change on hover or press.
  *
- * ## Color Palettes:
- * - `primary`: Blue - main brand actions
- * - `secondary`: Violet - accent actions
- * - `danger`: Rose - destructive actions
- * - `success`: Green - positive actions
- * - `warning`: Gold - caution actions
- * - `neutral`: Gray - low-emphasis actions
+ * ## The `action` icon
+ * `action` is the black "run" button whose icon is coral. The coral is applied
+ * by a `& > svg` rule (`css` key below), i.e. to every icon that is a direct
+ * child of the button — the leading icon in practice, since Button has no
+ * `leftIcon` prop. Text stays `action.fg`. Disabled turns the icon to
+ * `disabled.fg` with the label. An icon wrapped in another element is not
+ * recoloured; give it `color="action.iconOnSolid"` yourself if you need that.
+ */
+export declare const buttonVariantStyles: Record<ButtonVariant, StyleProps>;
+/** Variants on which `isDestructive` recolours the label. */
+export declare const destructiveCapableVariants: readonly ButtonVariant[];
+/**
+ * Get the styles for a variant, optionally destructive.
  *
- * ## Variants:
- * - `solid`: Filled background (most prominent)
- * - `soft`: Light tinted background (subtle)
- * - `outline`: Border only (medium emphasis)
- * - `ghost`: No background or border (lowest emphasis)
+ * `isDestructive` swaps only the text colour to `danger.fg` (prototype
+ * `.btn.destr`); fill, border and states stay the variant's. Disabled still
+ * wins, because `_disabled` sets its own colour.
  */
-export declare const buttonColorPaletteStyles: Record<ButtonColorPalette, Record<ButtonVariant, StyleProps>>;
+export declare const getButtonStyles: (variant?: ButtonVariant, isDestructive?: boolean) => StyleProps;
 /**
- * Get button styles for a given colorPalette and variant combination.
+ * List of all available variants.
  */
-export declare const getButtonStyles: (colorPalette?: ButtonColorPalette, variant?: ButtonVariant) => StyleProps;
+export declare const buttonVariants: ButtonVariant[];
 /**
- * List of all available color palettes.
+ * @deprecated 5.0 removed `colorPalette`. Kept so imports keep resolving.
  */
 export declare const buttonColorPalettes: ButtonColorPalette[];
 /**
- * @deprecated Use buttonColorPalettes instead. Will be removed in next major version.
+ * @deprecated 4.x `colorPalette × variant` grid, now *derived* from
+ * `buttonVariantStyles` through the same codemod table the runtime uses for
+ * old props (e.g. `neutral.solid` → `primary`, `danger.outline` →
+ * `secondary` + destructive). Use `buttonVariantStyles[variant]` /
+ * `getButtonStyles(variant, isDestructive)` instead. Removed in 6.0.
  */
-export declare const buttonColorSchemes: ButtonColorPalette[];
+export declare const buttonColorPaletteStyles: Record<ButtonColorPalette, Record<LegacyButtonVariant, StyleProps>>;
 /**
- * @deprecated Use buttonColorPaletteStyles instead. Will be removed in next major version.
+ * @deprecated Use buttonVariants instead. Will be removed in next major version.
  */
-export declare const buttonColorSchemeStyles: Record<ButtonColorPalette, Record<ButtonVariant, Partial<ChakraButtonProps>>>;
+export declare const buttonColorSchemes: ButtonColorPalette[];
 /**
- * List of all available variants.
+ * @deprecated Use buttonVariantStyles instead. Will be removed in next major version.
  */
-export declare const buttonVariants: ButtonVariant[];
+export declare const buttonColorSchemeStyles: Record<ButtonColorPalette, Record<LegacyButtonVariant, Partial<ChakraButtonProps>>>;
 export {};
 //# sourceMappingURL=Button.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEnE,KAAK,UAAU,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAC3C,kBAAkB,EAClB,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAuVlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,eAAc,kBAA8B,EAC5C,UAAS,aAAuB,KAC/B,UAEF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,kBAAkB,EAOnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,sBAAsB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,uBAAuB,+EAA2B,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,aAAa,EAKzC,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKpE,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAExB,KAAK,UAAU,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAiC7C,eAAO,MAAM,gBAAgB,QAqBjB,CAAC;AAQb;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,UAAU,CA+DjE,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,EAAE,SAAS,aAAa,EAI9D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAS,aAAwB,EACjC,uBAAqB,KACpB,UAUF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,aAAa,EAOzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,kBAAkB,EAOnD,CAAC;AASF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,EAUhC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC,CAAC;AAEzE;;GAEG;AACH,eAAO,MAAM,kBAAkB,sBAAsB,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,uBAAuB,qFAA2B,CAAC"}

package/dist/components/Button/Button.styles.js

@@ -1,372 +1,185 @@
 "use client";
 'use strict';
 
+var disabledControl = require('../../utils/disabledControl.js');
+var Button_legacy = require('./Button.legacy.js');
+
 /**
- * Two-dimensional Button styles using the Golden Ratio color system.
+ * The press is timed apart from everything else.
+ *
+ * This used to be `transitionProperty="all"` at a flat `0.25s`, which put the
+ * press on the same 250ms clock as a colour change. A press has to read as
+ * *contact* — the finger is already gone by 250ms and the button is still
+ * sinking — so it takes `motion.press` (120ms) while colour, border and shadow
+ * keep the slower step, since those are feedback rather than touch.
  *
- * Combines `colorPalette` (semantic color) with `variant` (visual appearance)
- * to create a flexible, consistent button styling system.
+ * ## Why the press uses `scale`, not `transform: scale()`
  *
- * ## Color Palettes:
- * - `primary`: Blue - main brand actions
- * - `secondary`: Violet - accent actions
- * - `danger`: Rose - destructive actions
- * - `success`: Green - positive actions
- * - `warning`: Gold - caution actions
- * - `neutral`: Gray - low-emphasis actions
+ * `transform` is a single property, so a `_active` of `transform: scale(0.97)`
+ * *replaced* whatever transform the call site had set — and call sites use it
+ * for layout. `CopyableCode` centres its button with `translateY(-50%)`, so
+ * pressing it dropped the button half its own height, and once `transform` was
+ * being transitioned that drop became a visible slide.
  *
- * ## Variants:
- * - `solid`: Filled background (most prominent)
- * - `soft`: Light tinted background (subtle)
- * - `outline`: Border only (medium emphasis)
- * - `ghost`: No background or border (lowest emphasis)
+ * The individual `scale` property composes with `transform` instead of
+ * overwriting it, so a consumer can position with `transform` and still get the
+ * press. Anything that presses should use `scale`, never `transform: scale()`.
+ *
+ * Naming the properties also stops `all` from animating things nobody asked it
+ * to (width, padding) when a consumer changes them on hover.
  */
-const buttonColorPaletteStyles = {
-    /**
-     * Primary (Blue) color scheme
-     */
+const PRESS = 'var(--chakra-durations-motion-press)';
+const FEEDBACK = 'var(--chakra-durations-fast)';
+const STANDARD = 'var(--chakra-easings-standard)';
+// The press is contact, so it eases out: `standard` starts slowly and the
+// first frames lag behind the finger.
+const EMPHASIZED = 'var(--chakra-easings-emphasized)';
+const buttonTransition = [
+    `scale ${PRESS} ${EMPHASIZED}`,
+    ...[
+        'background-color',
+        'border-color',
+        'color',
+        // No `box-shadow`: no variant sets one, so the only box-shadow that ever
+        // changes here is the keyboard focus ring, and that should appear at once.
+        'opacity',
+        // Both moved by `lift`, listed unconditionally because a property nobody
+        // changes costs nothing, and leaving them out would make the opt-in jump.
+        'translate',
+        // Nothing here sets `transform` — the press deliberately uses `scale` so it
+        // cannot clobber a call site. But call sites do set it (a 2px press ledge,
+        // an icon nudge), and under the old `transitionProperty: all` those moved
+        // smoothly. Naming the properties took that away and left them snapping,
+        // which is a regression the call site cannot see in this file. Listing it
+        // costs nothing while we set it nowhere.
+        'transform',
+        'filter',
+    ].map((property) => `${property} ${FEEDBACK} ${STANDARD}`),
+].join(', ');
+/**
+ * The pressed scale every variant shares. Contact feedback, not colour — see
+ * `buttonTransition` for why it is `scale` and not `transform`.
+ */
+const PRESSED = '0.97';
+/**
+ * Button styles per role (5.0 BAZE palette).
+ *
+ * Token-to-state assignments follow the prototype gallery (`.btn.*`). Every
+ * variant owns `_hover`, `_active` (colour + the shared `scale` press) and
+ * `_disabled`. Disabled is a fixed colour pair (`disabledControl`, or
+ * `disabledText` for the fill-less ghost) — never opacity — and Chakra's
+ * `_hover` / `_active` conditions already exclude `:disabled`, so a disabled
+ * button does not change on hover or press.
+ *
+ * ## The `action` icon
+ * `action` is the black "run" button whose icon is coral. The coral is applied
+ * by a `& > svg` rule (`css` key below), i.e. to every icon that is a direct
+ * child of the button — the leading icon in practice, since Button has no
+ * `leftIcon` prop. Text stays `action.fg`. Disabled turns the icon to
+ * `disabled.fg` with the label. An icon wrapped in another element is not
+ * recoloured; give it `color="action.iconOnSolid"` yourself if you need that.
+ */
+const buttonVariantStyles = {
     primary: {
-        solid: {
-            borderColor: 'blue.500',
-            bgColor: 'blue.500',
-            color: 'white',
-            _hover: {
-                borderColor: 'blue.600',
-                bgColor: 'blue.600',
-            },
-            _active: {
-                bgColor: 'blue.700',
-                transform: 'scale(0.97)',
-            },
-        },
-        soft: {
-            borderColor: 'transparent',
-            bgColor: 'primary.extralight', // #E8EEFB
-            color: 'primary.dark', // #0D317D
-            _hover: {
-                borderColor: 'transparent',
-                bgColor: 'primary.lighter', // #B9CBF3
-            },
-            _active: {
-                bgColor: 'primary.lighter', // #B9CBF3 — same as hover, scale provides pressed feedback
-                transform: 'scale(0.97)',
-            },
-        },
-        outline: {
-            borderColor: 'primary.main',
-            bgColor: 'transparent',
-            color: 'primary.main',
-            _hover: {
-                bgColor: 'primary.extralight', // #E8EEFB
-            },
-            _active: {
-                bgColor: 'primary.lighter', // #B9CBF3
-                transform: 'scale(0.97)',
-            },
-        },
-        ghost: {
-            borderColor: 'transparent',
-            bgColor: 'transparent',
-            color: 'primary.main',
-            _hover: {
-                bgColor: 'primary.extralight', // #E8EEFB
-            },
-            _active: {
-                bgColor: 'primary.lighter', // #B9CBF3
-                transform: 'scale(0.97)',
-            },
-        },
+        borderColor: 'primary.main',
+        bgColor: 'primary.main',
+        color: 'fg.onPrimary',
+        _hover: { borderColor: 'primary.hover', bgColor: 'primary.hover' },
+        _active: {
+            borderColor: 'primary.active',
+            bgColor: 'primary.active',
+            scale: PRESSED,
+        },
+        _disabled: { ...disabledControl.disabledControl },
     },
-    /**
-     * Secondary (Violet) color scheme
-     */
-    secondary: {
-        solid: {
-            borderColor: 'violet.500',
-            bgColor: 'violet.500',
-            color: 'white',
-            _hover: {
-                borderColor: 'violet.600',
-                bgColor: 'violet.600',
-            },
-            _active: {
-                bgColor: 'violet.700',
-                transform: 'scale(0.97)',
-            },
-        },
-        soft: {
-            borderColor: 'transparent',
-            bgColor: 'secondary.extralight', // #F4E8FB
-            color: 'secondary.dark', // #570D7D
-            _hover: {
-                borderColor: 'transparent',
-                bgColor: 'secondary.lighter', // #DEB9F3
-            },
-            _active: {
-                bgColor: 'secondary.lighter', // #DEB9F3 — same as hover, scale provides pressed feedback
-                transform: 'scale(0.97)',
-            },
-        },
-        outline: {
-            borderColor: 'secondary.main',
-            bgColor: 'transparent',
-            color: 'secondary.main',
-            _hover: {
-                bgColor: 'secondary.extralight', // #F4E8FB
-            },
-            _active: {
-                bgColor: 'secondary.lighter', // #DEB9F3
-                transform: 'scale(0.97)',
-            },
-        },
-        ghost: {
-            borderColor: 'transparent',
-            bgColor: 'transparent',
-            color: 'secondary.main',
-            _hover: {
-                bgColor: 'secondary.extralight', // #F4E8FB
-            },
-            _active: {
-                bgColor: 'secondary.lighter', // #DEB9F3
-                transform: 'scale(0.97)',
+    action: {
+        borderColor: 'action.border',
+        bgColor: 'action.bg',
+        color: 'action.fg',
+        _hover: { bgColor: 'action.bgHover' },
+        _active: { bgColor: 'action.bgActive', scale: PRESSED },
+        _disabled: { ...disabledControl.disabledControl },
+        css: {
+            '& > svg': { color: 'action.iconOnSolid' },
+            '&:is(:disabled, [disabled], [data-disabled]) > svg': {
+                color: 'disabled.fg',
             },
         },
     },
-    /**
-     * Danger (Rose) color scheme
-     */
-    danger: {
-        solid: {
-            borderColor: 'rose.500',
-            bgColor: 'rose.500',
-            color: 'white',
-            _hover: {
-                borderColor: 'rose.600',
-                bgColor: 'rose.600',
-            },
-            _active: {
-                bgColor: 'rose.700',
-                transform: 'scale(0.97)',
-            },
-        },
-        soft: {
-            borderColor: 'transparent',
-            bgColor: 'danger.extralight', // #FBE8E9
-            color: 'danger.dark', // #7D0D14
-            _hover: {
-                borderColor: 'transparent',
-                bgColor: 'danger.lighter', // #F3B9BD
-            },
-            _active: {
-                bgColor: 'danger.lighter', // #F3B9BD — same as hover, scale provides pressed feedback
-                transform: 'scale(0.97)',
-            },
-        },
-        outline: {
-            borderColor: 'danger.main',
-            bgColor: 'transparent',
-            color: 'danger.main',
-            _hover: {
-                bgColor: 'danger.extralight', // #FBE8E9
-            },
-            _active: {
-                bgColor: 'danger.lighter', // #F3B9BD
-                transform: 'scale(0.97)',
-            },
-        },
-        ghost: {
-            borderColor: 'transparent',
-            bgColor: 'transparent',
-            color: 'danger.main',
-            _hover: {
-                bgColor: 'danger.extralight', // #FBE8E9
-            },
-            _active: {
-                bgColor: 'danger.lighter', // #F3B9BD
-                transform: 'scale(0.97)',
-            },
-        },
+    secondary: {
+        borderColor: 'border.default',
+        bgColor: 'bg.surface',
+        color: 'fg.default',
+        _hover: { bgColor: 'primary.wash' },
+        _active: { bgColor: 'primary.washActive', scale: PRESSED },
+        _disabled: { ...disabledControl.disabledControl },
     },
-    /**
-     * Success (Green) color scheme
-     */
-    success: {
-        solid: {
-            borderColor: 'green.600',
-            bgColor: 'green.600',
-            color: 'white',
-            _hover: {
-                borderColor: 'green.700',
-                bgColor: 'green.700',
-            },
-            _active: {
-                bgColor: 'green.800',
-                transform: 'scale(0.97)',
-            },
-        },
-        soft: {
-            borderColor: 'transparent',
-            bgColor: 'success.extralight', // #E9FBE8
-            color: 'success.dark', // #147D0D
-            _hover: {
-                borderColor: 'transparent',
-                bgColor: 'success.lighter', // #BDF3B9
-            },
-            _active: {
-                bgColor: 'success.lighter', // #BDF3B9 — same as hover, scale provides pressed feedback
-                transform: 'scale(0.97)',
-            },
-        },
-        outline: {
-            borderColor: 'success.main',
-            bgColor: 'transparent',
-            color: 'success.main',
-            _hover: {
-                bgColor: 'success.extralight', // #E9FBE8
-            },
-            _active: {
-                bgColor: 'success.lighter', // #BDF3B9
-                transform: 'scale(0.97)',
-            },
-        },
-        ghost: {
-            borderColor: 'transparent',
-            bgColor: 'transparent',
-            color: 'success.main',
-            _hover: {
-                bgColor: 'success.extralight', // #E9FBE8
-            },
-            _active: {
-                bgColor: 'success.lighter', // #BDF3B9
-                transform: 'scale(0.97)',
-            },
-        },
+    subtle: {
+        borderColor: 'transparent',
+        bgColor: 'primary.wash',
+        color: 'fg.default',
+        _hover: { bgColor: 'primary.washActive' },
+        _active: { bgColor: 'primary.selected', scale: PRESSED },
+        _disabled: { ...disabledControl.disabledControl },
     },
-    /**
-     * Warning (Gold) color scheme
-     */
-    warning: {
-        solid: {
-            borderColor: 'gold.500',
-            bgColor: 'gold.500',
-            // Dark text on gold (white/gold was 2.39:1 in BOTH modes). gold.900 on
-            // gold.500 = 6.73:1; active stays gold.600 (4.42:1) rather than gold.700
-            // (2.75:1) so dark text keeps contrast on press.
-            color: 'gold.900',
-            _hover: {
-                borderColor: 'gold.600',
-                bgColor: 'gold.600',
-            },
-            _active: {
-                bgColor: 'gold.600',
-                transform: 'scale(0.97)',
-            },
-        },
-        soft: {
-            borderColor: 'transparent',
-            bgColor: 'warning.extralight', // #FBF6E8
-            color: 'warning.dark', // #7D610D
-            _hover: {
-                borderColor: 'transparent',
-                bgColor: 'warning.lighter', // #F3E4B9
-            },
-            _active: {
-                bgColor: 'warning.lighter', // #F3E4B9 — same as hover, scale provides pressed feedback
-                transform: 'scale(0.97)',
-            },
-        },
-        outline: {
-            borderColor: 'warning.main',
-            bgColor: 'transparent',
-            color: 'warning.dark', // Use dark for better contrast
-            _hover: {
-                bgColor: 'warning.extralight', // #FBF6E8
-            },
-            _active: {
-                bgColor: 'warning.lighter', // #F3E4B9
-                transform: 'scale(0.97)',
-            },
-        },
-        ghost: {
-            borderColor: 'transparent',
-            bgColor: 'transparent',
-            color: 'warning.dark', // Use dark for better contrast
-            _hover: {
-                bgColor: 'warning.extralight', // #FBF6E8
-            },
-            _active: {
-                bgColor: 'warning.lighter', // #F3E4B9
-                transform: 'scale(0.97)',
-            },
-        },
+    ghost: {
+        borderColor: 'transparent',
+        bgColor: 'transparent',
+        color: 'fg.default',
+        _hover: { bgColor: 'primary.wash' },
+        _active: { bgColor: 'primary.washActive', scale: PRESSED },
+        _disabled: { ...disabledControl.disabledText },
     },
-    /**
-     * Neutral (Gray) color scheme
-     */
-    neutral: {
-        solid: {
-            borderColor: 'gray.700',
-            bgColor: 'gray.700', // #737D96
-            color: 'white',
-            _hover: {
-                borderColor: 'gray.800',
-                bgColor: 'gray.800', // #616B85
-            },
-            _active: {
-                bgColor: 'gray.900', // #505A74
-                transform: 'scale(0.97)',
-            },
-        },
-        soft: {
-            borderColor: 'transparent',
-            // Neutral fills flip with the mode (light values preserved: bg.subtle →
-            // gray.50, bg.muted → gray.100). Without this the surface stayed light in
-            // dark mode while the fg.default text flipped to light = invisible.
-            bgColor: 'bg.subtle', // gray.50 / gray.1300 (_dark)
-            color: 'fg.default',
-            _hover: {
-                borderColor: 'transparent',
-                bgColor: 'bg.muted', // gray.100 / gray.1200 (_dark)
-            },
-            _active: {
-                bgColor: 'bg.muted', // matches hover; scale provides pressed feedback
-                transform: 'scale(0.97)',
-            },
-        },
-        outline: {
-            borderColor: 'border.default', // gray.300 / gray.1100 (_dark)
-            bgColor: 'transparent',
-            color: 'fg.default',
-            _hover: {
-                bgColor: 'bg.subtle', // gray.50 / gray.1300 (_dark)
-            },
-            _active: {
-                bgColor: 'bg.muted', // gray.100 / gray.1200 (_dark)
-                transform: 'scale(0.97)',
-            },
-        },
-        ghost: {
-            borderColor: 'transparent',
-            bgColor: 'transparent',
-            color: 'fg.default',
-            _hover: {
-                bgColor: 'bg.subtle', // gray.50 / gray.1300 (_dark)
-            },
-            _active: {
-                bgColor: 'bg.muted', // gray.100 / gray.1200 (_dark)
-                transform: 'scale(0.97)',
-            },
-        },
+    danger: {
+        borderColor: 'danger.solid',
+        bgColor: 'danger.solid',
+        color: 'danger.onSolid',
+        _hover: { borderColor: 'danger.solidHover', bgColor: 'danger.solidHover' },
+        _active: {
+            borderColor: 'danger.solidActive',
+            bgColor: 'danger.solidActive',
+            scale: PRESSED,
+        },
+        _disabled: { ...disabledControl.disabledControl },
     },
 };
+/** Variants on which `isDestructive` recolours the label. */
+const destructiveCapableVariants = [
+    'secondary',
+    'subtle',
+    'ghost',
+];
 /**
- * Get button styles for a given colorPalette and variant combination.
+ * Get the styles for a variant, optionally destructive.
+ *
+ * `isDestructive` swaps only the text colour to `danger.fg` (prototype
+ * `.btn.destr`); fill, border and states stay the variant's. Disabled still
+ * wins, because `_disabled` sets its own colour.
  */
-const getButtonStyles = (colorPalette = 'primary', variant = 'solid') => {
-    return buttonColorPaletteStyles[colorPalette][variant];
+const getButtonStyles = (variant = 'subtle', isDestructive = false) => {
+    const base = buttonVariantStyles[variant] ?? buttonVariantStyles.subtle;
+    if (!isDestructive || !destructiveCapableVariants.includes(variant)) {
+        return base;
+    }
+    return {
+        ...base,
+        color: 'danger.fg',
+        _hover: { ...base._hover, color: 'danger.fg' },
+    };
 };
 /**
- * List of all available color palettes.
+ * List of all available variants.
+ */
+const buttonVariants = [
+    'primary',
+    'action',
+    'secondary',
+    'subtle',
+    'ghost',
+    'danger',
+];
+/**
+ * @deprecated 5.0 removed `colorPalette`. Kept so imports keep resolving.
  */
 const buttonColorPalettes = [
     'primary',
@@ -376,18 +189,32 @@ const buttonColorPalettes = [
     'warning',
     'neutral',
 ];
-/**
- * List of all available variants.
- */
-const buttonVariants = [
+const legacyVariants = [
     'solid',
     'soft',
     'outline',
     'ghost',
 ];
+/**
+ * @deprecated 4.x `colorPalette × variant` grid, now *derived* from
+ * `buttonVariantStyles` through the same codemod table the runtime uses for
+ * old props (e.g. `neutral.solid` → `primary`, `danger.outline` →
+ * `secondary` + destructive). Use `buttonVariantStyles[variant]` /
+ * `getButtonStyles(variant, isDestructive)` instead. Removed in 6.0.
+ */
+const buttonColorPaletteStyles = Object.fromEntries(buttonColorPalettes.map((palette) => [
+    palette,
+    Object.fromEntries(legacyVariants.map((variant) => {
+        const mapped = Button_legacy.resolveLegacyButtonVariant('button', palette, variant);
+        return [variant, getButtonStyles(mapped.variant, mapped.isDestructive)];
+    })),
+]));
 
 exports.buttonColorPaletteStyles = buttonColorPaletteStyles;
 exports.buttonColorPalettes = buttonColorPalettes;
+exports.buttonTransition = buttonTransition;
+exports.buttonVariantStyles = buttonVariantStyles;
 exports.buttonVariants = buttonVariants;
+exports.destructiveCapableVariants = destructiveCapableVariants;
 exports.getButtonStyles = getButtonStyles;
 //# sourceMappingURL=Button.styles.js.map