twico-ui 1.48.0 → 1.49.0

package/dist/index.d.cts

@@ -258,7 +258,11 @@ declare function Accordion(props: AccordionProps): React.JSX.Element;
 /** The canonical six-value color/intent scale used by status & control components. */
 type Tone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 
-/** Action controls (Button, IconButton) — brand or destructive only. */
+/**
+ * The two intents most actions want. Button and IconButton accepted ONLY these until #504; they now
+ * take the full {@link Tone} scale, so this is a convenience alias for the common pair rather than a
+ * ceiling. Still exported, still accurate for anything that genuinely is brand-or-destructive.
+ */
 type ActionTone = "primary" | "danger";
 
 /** Text roles, the full color scale, and `"inherit"` (adopt the parent color) — Text. */
@@ -557,8 +561,20 @@ declare function Breadcrumb(props: BreadcrumbProps): React.JSX.Element;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Fill style. @default "solid" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant`. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant`. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`). A standalone
+   * affirmative action — a row-level confirm sitting beside a `danger` sibling, reading as
+   * "yes / no" — could not be green, so the colour carrying that distinction came out the same blue
+   * as every neutral action on the page. `ActionTone` is still exported and still describes the two
+   * intents most actions want; it is no longer the ceiling.
+   *
+   * `neutral` follows Badge's mapping rather than an accent ramp of its own: `--color-text` on
+   * `--color-surface` for `solid`, `--color-surface-sunken` for `soft`. Note `variant="ghost"` and
+   * `variant="outline"` already express a quiet action, so reach for those first.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Icon node rendered before the label. */
@@ -576,9 +592,10 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`). Omit for a plain (non-toggle) button. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning (e.g. success/warning/info/neutral) while `tone` stays `ActionTone` for the
-   *  unpressed action look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504 — before that `tone` was
+   *  `ActionTone` and this was the only way to reach the other four. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** Render as a different element (e.g. "a"). @default "button" */
   as?: "button" | "a";
@@ -3939,9 +3956,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   icon?: React.ReactNode;
   /** Fill style (same axes as Button). @default "ghost" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
-   *  `tone="danger"` with any variant. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
+   * `tone="danger"` with any variant. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`), so an
+   * affirmative icon action can be green beside a destructive one. `ActionTone` is still exported
+   * and still names the two intents most actions want; it is no longer the ceiling. `neutral`
+   * follows Badge's mapping rather than an accent ramp of its own.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Fully rounded (circular). @default false */
@@ -3953,8 +3977,9 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`), e.g. a pin/unpin or bold/italic icon toggle. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning while `tone` stays `ActionTone` for the unpressed look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** #342: render as a different element — use `"a"` for an icon **link** (GitHub icon, external nav, …) so
    *  navigation is a real link, not a button. @default "button" */

package/dist/index.d.ts

@@ -258,7 +258,11 @@ declare function Accordion(props: AccordionProps): React.JSX.Element;
 /** The canonical six-value color/intent scale used by status & control components. */
 type Tone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 
-/** Action controls (Button, IconButton) — brand or destructive only. */
+/**
+ * The two intents most actions want. Button and IconButton accepted ONLY these until #504; they now
+ * take the full {@link Tone} scale, so this is a convenience alias for the common pair rather than a
+ * ceiling. Still exported, still accurate for anything that genuinely is brand-or-destructive.
+ */
 type ActionTone = "primary" | "danger";
 
 /** Text roles, the full color scale, and `"inherit"` (adopt the parent color) — Text. */
@@ -557,8 +561,20 @@ declare function Breadcrumb(props: BreadcrumbProps): React.JSX.Element;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Fill style. @default "solid" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant`. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant`. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`). A standalone
+   * affirmative action — a row-level confirm sitting beside a `danger` sibling, reading as
+   * "yes / no" — could not be green, so the colour carrying that distinction came out the same blue
+   * as every neutral action on the page. `ActionTone` is still exported and still describes the two
+   * intents most actions want; it is no longer the ceiling.
+   *
+   * `neutral` follows Badge's mapping rather than an accent ramp of its own: `--color-text` on
+   * `--color-surface` for `solid`, `--color-surface-sunken` for `soft`. Note `variant="ghost"` and
+   * `variant="outline"` already express a quiet action, so reach for those first.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Icon node rendered before the label. */
@@ -576,9 +592,10 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`). Omit for a plain (non-toggle) button. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning (e.g. success/warning/info/neutral) while `tone` stays `ActionTone` for the
-   *  unpressed action look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504 — before that `tone` was
+   *  `ActionTone` and this was the only way to reach the other four. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** Render as a different element (e.g. "a"). @default "button" */
   as?: "button" | "a";
@@ -3939,9 +3956,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   icon?: React.ReactNode;
   /** Fill style (same axes as Button). @default "ghost" */
   variant?: "solid" | "soft" | "outline" | "ghost";
-  /** Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
-   *  `tone="danger"` with any variant. @default "primary" */
-  tone?: ActionTone;
+  /**
+   * Color/intent, orthogonal to `variant` (mirrors Button). A destructive icon button is
+   * `tone="danger"` with any variant. @default "primary"
+   *
+   * #504: the full {@link Tone} scale, widened from `ActionTone` (`primary | danger`), so an
+   * affirmative icon action can be green beside a destructive one. `ActionTone` is still exported
+   * and still names the two intents most actions want; it is no longer the ceiling. `neutral`
+   * follows Badge's mapping rather than an accent ramp of its own.
+   */
+  tone?: Tone;
   /** Control size; "xs" (~26px) is smaller than "sm". @default "md" */
   size?: "xs" | "sm" | "md" | "lg";
   /** Fully rounded (circular). @default false */
@@ -3953,8 +3977,9 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
   /** #405: toggle "on" state — sets `aria-pressed` and shows a soft fill + border in the current `tone`
    *  (works with any `variant`), e.g. a pin/unpin or bold/italic icon toggle. @default undefined */
   pressed?: boolean;
-  /** #411: tone of the pressed ("on") fill — the full status `Tone` scale, so a toggle can carry its own
-   *  selected-state meaning while `tone` stays `ActionTone` for the unpressed look. Defaults to `tone`. @default undefined */
+  /** #411: tone of the pressed ("on") fill, so a toggle can carry a different selected-state meaning
+   *  from its unpressed look. Both are the full `Tone` scale since #504. Defaults to `tone`.
+   *  @default undefined */
   pressedTone?: Tone;
   /** #342: render as a different element — use `"a"` for an icon **link** (GitHub icon, external nav, …) so
    *  navigation is a real link, not a button. @default "button" */

package/dist/index.mjs

@@ -434,6 +434,22 @@ var ICONBTN_CSS = `
   --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); }
 .twc-iconbtn[data-tone="danger"] { --_accent: var(--color-danger); --_accent-hover: var(--color-danger-hover);
   --_accent-fg: var(--color-danger-fg); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg); }
+/* #504: the full Tone scale, not just primary|danger. A standalone affirmative action - a row-level
+   confirm sitting next to a danger sibling, reading as "yes / no" - could not be green, so the colour
+   that carried the distinction came out the same blue as every neutral action on the page.
+   success/warning/info now have real -hover/-active tokens (added in tokens/colors.css on the same
+   step rule as primary and danger: light goes darker, dark goes lighter), so hover always moves AWAY
+   from the ink and contrast only improves. neutral has no accent tokens anywhere and is mapped the way
+   Badge already maps it - --color-text on --color-surface solid, --color-surface-sunken soft - with its
+   hover mixed from currentColor, since there is no --color-text-hover to point at. */
+.twc-iconbtn[data-tone="success"] { --_accent: var(--color-success); --_accent-hover: var(--color-success-hover);
+  --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg); }
+.twc-iconbtn[data-tone="warning"] { --_accent: var(--color-warning); --_accent-hover: var(--color-warning-hover);
+  --_accent-fg: var(--color-warning-fg); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg); }
+.twc-iconbtn[data-tone="info"] { --_accent: var(--color-info); --_accent-hover: var(--color-info-hover);
+  --_accent-fg: var(--color-info-fg); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg); }
+.twc-iconbtn[data-tone="neutral"] { --_accent: var(--color-text); --_accent-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
+  --_accent-fg: var(--color-surface); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text-muted); }
 .twc-iconbtn[data-variant="solid"] { background: var(--_accent); color: var(--_accent-fg); }
 .twc-iconbtn[data-variant="solid"]:hover:not(:disabled) { background: var(--_accent-hover); box-shadow: var(--shadow-brand); }
 .twc-iconbtn[data-variant="solid"]:active:not(:disabled) { filter: brightness(0.92); }
@@ -1811,6 +1827,31 @@ var CSS2 = `
   --_accent: var(--color-danger); --_accent-hover: var(--color-danger-hover); --_accent-active: var(--color-danger-hover);
   --_accent-fg: var(--color-danger-fg); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg);
 }
+/* #504: the full Tone scale, not just primary|danger. A standalone affirmative action - a row-level
+   confirm sitting next to a danger sibling, reading as "yes / no" - could not be green, so the colour
+   that carried the distinction came out the same blue as every neutral action on the page.
+   success/warning/info now have real -hover/-active tokens (added in tokens/colors.css on the same
+   step rule as primary and danger: light goes darker, dark goes lighter), so hover always moves AWAY
+   from the ink and contrast only improves. neutral has no accent tokens anywhere and is mapped the way
+   Badge already maps it - --color-text on --color-surface solid, --color-surface-sunken soft - with its
+   hover mixed from currentColor, since there is no --color-text-hover to point at. */
+.twc-btn[data-tone="success"] {
+  --_accent: var(--color-success); --_accent-hover: var(--color-success-hover); --_accent-active: var(--color-success-active);
+  --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg);
+}
+.twc-btn[data-tone="warning"] {
+  --_accent: var(--color-warning); --_accent-hover: var(--color-warning-hover); --_accent-active: var(--color-warning-active);
+  --_accent-fg: var(--color-warning-fg); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg);
+}
+.twc-btn[data-tone="info"] {
+  --_accent: var(--color-info); --_accent-hover: var(--color-info-hover); --_accent-active: var(--color-info-active);
+  --_accent-fg: var(--color-info-fg); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg);
+}
+.twc-btn[data-tone="neutral"] {
+  --_accent: var(--color-text); --_accent-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
+  --_accent-active: color-mix(in srgb, var(--color-text) 78%, var(--color-surface));
+  --_accent-fg: var(--color-surface); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text-muted);
+}
 /* solid */
 .twc-btn[data-variant="solid"] { background: var(--_accent); color: var(--_accent-fg); }
 .twc-btn[data-variant="solid"]:hover:not(:disabled) { background: var(--_accent-hover); box-shadow: var(--shadow-brand); }