twico-ui 1.48.0 → 1.49.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.49.0](https://github.com/EncryptionL/twico-ui/compare/v1.48.0...v1.49.0) (2026-11-05)
+
+
+### Bug Fixes
+
+* **tokens:** make the plain tones clear 4.5:1 against their own ink ([78a727d](https://github.com/EncryptionL/twico-ui/commit/78a727d193010a717405ee14af038e39f1baf65b)), closes [#455](https://github.com/EncryptionL/twico-ui/issues/455) [#504](https://github.com/EncryptionL/twico-ui/issues/504) [#504](https://github.com/EncryptionL/twico-ui/issues/504) [#1e1b4b](https://github.com/EncryptionL/twico-ui/issues/1e1b4b) [#e11d48](https://github.com/EncryptionL/twico-ui/issues/e11d48) [#1e1b4b](https://github.com/EncryptionL/twico-ui/issues/1e1b4b) [#818cf8](https://github.com/EncryptionL/twico-ui/issues/818cf8) [#052e1d](https://github.com/EncryptionL/twico-ui/issues/052e1d) [#10b981](https://github.com/EncryptionL/twico-ui/issues/10b981) [#2c0610](https://github.com/EncryptionL/twico-ui/issues/2c0610) [#f43f5e](https://github.com/EncryptionL/twico-ui/issues/f43f5e)
+
+
+### Features
+
+* **button:** widen tone to the full Tone scale, not just primary|danger ([ec640c3](https://github.com/EncryptionL/twico-ui/commit/ec640c3f4c0faa5c19b6cab4b73a8a5758628864)), closes [#451a03](https://github.com/EncryptionL/twico-ui/issues/451a03) [#082f49](https://github.com/EncryptionL/twico-ui/issues/082f49)
+
 # [1.48.0](https://github.com/EncryptionL/twico-ui/compare/v1.47.0...v1.48.0) (2026-10-23)
 
 

package/dist/index.cjs

@@ -455,6 +455,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); }
@@ -1832,6 +1848,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); }