@kismet-ux/constellation 1.8.0 → 1.11.0

package/dist/ui/Button/button-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-variants.js","sources":["../../../src/ui/Button/button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport s from './button.module.scss';\n\nexport const buttonVariants = cva(s.button, {\n  variants: {\n    variant: {\n      contained: s['button--contained'],\n      outlined: s['button--outlined'],\n      ghost: s['button--ghost'],\n    },\n    theme: {\n      primary: s['button--primary'],\n      secondary: s['button--secondary'],\n      destructive: s['button--destructive'],\n      warning: s['button--warning'],\n      success: s['button--success'],\n      info: s['button--info'],\n      slate: s['button--slate'],\n      inherit: s['button--inherit'],\n    },\n    size: {\n      xs: s['button--xs'],\n      sm: s['button--sm'],\n      md: s['button--md'],\n      lg: s['button--lg'],\n    },\n    iconOnly: {\n      true: s['button--icon-only'],\n    },\n    rounded: {\n      true: s['button--rounded'],\n      false: undefined,\n      extra: s['button--extra-rounded'],\n    },\n  },\n  defaultVariants: {\n    variant: 'contained',\n    theme: 'primary',\n    size: 'md',\n    rounded: 'extra',\n  },\n});\n"],"names":[],"mappings":";;;MAGa,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;AAC1C,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC;AACjC,YAAA,QAAQ,EAAE,CAAC,CAAC,kBAAkB,CAAC;AAC/B,YAAA,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC;AAC1B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC7B,YAAA,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC;AACjC,YAAA,WAAW,EAAE,CAAC,CAAC,qBAAqB,CAAC;AACrC,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC7B,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC7B,YAAA,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC;AACvB,YAAA,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC;AACzB,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC9B,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACnB,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACnB,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACnB,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACpB,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,CAAC,CAAC,mBAAmB,CAAC;AAC7B,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC1B,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;"}
+{"version":3,"file":"button-variants.js","sources":["../../../src/ui/Button/button-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport s from './button.module.scss';\n\nexport const buttonVariants = cva(s.button, {\n  variants: {\n    variant: {\n      contained: s['button--contained'],\n      outlined: s['button--outlined'],\n      ghost: s['button--ghost'],\n    },\n    theme: {\n      primary: s['button--primary'],\n      secondary: s['button--secondary'],\n      destructive: s['button--destructive'],\n      warning: s['button--warning'],\n      success: s['button--success'],\n      info: s['button--info'],\n      slate: s['button--slate'],\n      inherit: s['button--inherit'],\n    },\n    size: {\n      xs: s['button--xs'],\n      sm: s['button--sm'],\n      md: s['button--md'],\n      lg: s['button--lg'],\n    },\n    iconOnly: {\n      true: s['button--icon-only'],\n    },\n    fullWidth: {\n      true: s['button--full-width'],\n    },\n    rounded: {\n      true: s['button--rounded'],\n      false: undefined,\n      extra: s['button--extra-rounded'],\n    },\n  },\n  defaultVariants: {\n    variant: 'contained',\n    theme: 'primary',\n    size: 'md',\n    rounded: 'extra',\n  },\n});\n"],"names":[],"mappings":";;;MAGa,cAAc,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;AAC1C,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC;AACjC,YAAA,QAAQ,EAAE,CAAC,CAAC,kBAAkB,CAAC;AAC/B,YAAA,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC;AAC1B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC7B,YAAA,SAAS,EAAE,CAAC,CAAC,mBAAmB,CAAC;AACjC,YAAA,WAAW,EAAE,CAAC,CAAC,qBAAqB,CAAC;AACrC,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC7B,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC7B,YAAA,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC;AACvB,YAAA,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC;AACzB,YAAA,OAAO,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC9B,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACnB,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACnB,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACnB,YAAA,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC;AACpB,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,CAAC,CAAC,mBAAmB,CAAC;AAC7B,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,CAAC,oBAAoB,CAAC;AAC9B,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC1B,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,WAAW;AACpB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACF,CAAA;;"}

package/dist/ui/Button/button.css

@@ -1,3 +1,30 @@
+@charset "UTF-8";
+/*
+ * A contained button fills with the `-dark` shade, in BOTH modes, and always
+ * takes white ink.
+ *
+ * The vivid `-main` shades are too light to carry text: measured against white
+ * they land at 2.8–4.2:1 for four of the seven themes, under the 4.5 a button
+ * label needs. Using near-black ink instead does clear it, but then a row of
+ * filled buttons reads inverted against everything around it. The deeper shade
+ * settles both — 5:1 to 17:1 across every theme, with the ink consistent.
+ *
+ * `--button-color`, when the caller sets it, stands in for the theme — for an
+ * app whose palette encodes meaning (which aisle a thing lands on), that is the
+ * difference between using the library and forking it.
+ */
+/*
+ * Fills its container and centres its label.
+ *
+ * A block button — the one that commits a form, or the one at the foot of a
+ * card — is otherwise the caller writing `width: 100%` over the top, which is
+ * a rule per app for a shape the library already knows how to draw.
+ */
+.button-module_button--full-width__f1jWC {
+  display: flex;
+  width: 100%;
+}
+
 .button-module_button__ATpxB {
   align-items: center;
   border: none;
@@ -52,12 +79,12 @@
   border-radius: var(--size-5);
 }
 .button-module_button--contained__YQQ33.button-module_button--primary__BO20b {
-  --button-ripple-color: var(--primary-light);
-  background-color: var(--primary-main);
-  color: var(--primary-contrast);
+  --button-ripple-color: var(--button-color, var(--primary-light));
+  background-color: var(--button-color, var(--primary-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--primary__BO20b:hover:not(:disabled) {
-  background-color: var(--primary-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--primary-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--primary__BO20b:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--primary-focus-visible);
@@ -66,12 +93,12 @@
   background-color: var(--primary-selected);
 }
 .button-module_button--contained__YQQ33.button-module_button--secondary__EgwQf {
-  --button-ripple-color: var(--secondary-light);
-  background-color: var(--secondary-main);
-  color: var(--secondary-contrast);
+  --button-ripple-color: var(--button-color, var(--secondary-light));
+  background-color: var(--button-color, var(--secondary-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--secondary__EgwQf:hover:not(:disabled) {
-  background-color: var(--secondary-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--secondary-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--secondary__EgwQf:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--secondary-focus-visible);
@@ -80,12 +107,12 @@
   background-color: var(--secondary-selected);
 }
 .button-module_button--contained__YQQ33.button-module_button--destructive__PPikG {
-  --button-ripple-color: var(--destructive-light);
-  background-color: var(--destructive-main);
-  color: var(--destructive-contrast);
+  --button-ripple-color: var(--button-color, var(--destructive-light));
+  background-color: var(--button-color, var(--destructive-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--destructive__PPikG:hover:not(:disabled) {
-  background-color: var(--destructive-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--destructive-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--destructive__PPikG:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--destructive-focus-visible);
@@ -94,12 +121,12 @@
   background-color: var(--destructive-selected);
 }
 .button-module_button--contained__YQQ33.button-module_button--warning__8wotP {
-  --button-ripple-color: var(--warning-light);
-  background-color: var(--warning-main);
-  color: var(--warning-contrast);
+  --button-ripple-color: var(--button-color, var(--warning-light));
+  background-color: var(--button-color, var(--warning-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--warning__8wotP:hover:not(:disabled) {
-  background-color: var(--warning-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--warning-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--warning__8wotP:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--warning-focus-visible);
@@ -108,12 +135,12 @@
   background-color: var(--warning-selected);
 }
 .button-module_button--contained__YQQ33.button-module_button--success__iPEgl {
-  --button-ripple-color: var(--success-light);
-  background-color: var(--success-main);
-  color: var(--success-contrast);
+  --button-ripple-color: var(--button-color, var(--success-light));
+  background-color: var(--button-color, var(--success-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--success__iPEgl:hover:not(:disabled) {
-  background-color: var(--success-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--success-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--success__iPEgl:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--success-focus-visible);
@@ -122,12 +149,12 @@
   background-color: var(--success-selected);
 }
 .button-module_button--contained__YQQ33.button-module_button--info__WaPKN {
-  --button-ripple-color: var(--info-light);
-  background-color: var(--info-main);
-  color: var(--info-contrast);
+  --button-ripple-color: var(--button-color, var(--info-light));
+  background-color: var(--button-color, var(--info-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--info__WaPKN:hover:not(:disabled) {
-  background-color: var(--info-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--info-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--info__WaPKN:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--info-focus-visible);
@@ -136,12 +163,12 @@
   background-color: var(--info-selected);
 }
 .button-module_button--contained__YQQ33.button-module_button--slate__DRwTq {
-  --button-ripple-color: var(--slate-light);
-  background-color: var(--slate-main);
-  color: var(--slate-contrast);
+  --button-ripple-color: var(--button-color, var(--slate-light));
+  background-color: var(--button-color, var(--slate-dark));
+  color: var(--button-on-color, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--slate__DRwTq:hover:not(:disabled) {
-  background-color: var(--slate-dark);
+  background-color: color-mix(in srgb, var(--button-color, var(--slate-dark)) 86%, #fff);
 }
 .button-module_button--contained__YQQ33.button-module_button--slate__DRwTq:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--slate-focus-visible);
@@ -161,12 +188,15 @@
   border: 1px solid;
 }
 .button-module_button--outlined__AxHna.button-module_button--primary__BO20b {
-  --button-ripple-color: var(--primary-main);
-  border-color: var(--primary-outlined-border);
-  color: var(--primary-outlined-border);
+  --button-ripple-color: var(--button-color, var(--primary-main));
+  border-color: var(--button-color, var(--primary-outlined-border));
+  color: var(--button-color, var(--primary-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--primary__BO20b:hover:not(:disabled) {
-  background-color: var(--primary-hover);
+  /* Mixed on the SOLID, not on `--primary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--primary-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--primary__BO20b:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--primary-focus-visible);
@@ -175,12 +205,15 @@
   background-color: var(--primary-selected);
 }
 .button-module_button--outlined__AxHna.button-module_button--secondary__EgwQf {
-  --button-ripple-color: var(--secondary-main);
-  border-color: var(--secondary-outlined-border);
-  color: var(--secondary-outlined-border);
+  --button-ripple-color: var(--button-color, var(--secondary-main));
+  border-color: var(--button-color, var(--secondary-outlined-border));
+  color: var(--button-color, var(--secondary-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--secondary__EgwQf:hover:not(:disabled) {
-  background-color: var(--secondary-hover);
+  /* Mixed on the SOLID, not on `--secondary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--secondary-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--secondary__EgwQf:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--secondary-focus-visible);
@@ -189,12 +222,15 @@
   background-color: var(--secondary-selected);
 }
 .button-module_button--outlined__AxHna.button-module_button--destructive__PPikG {
-  --button-ripple-color: var(--destructive-main);
-  border-color: var(--destructive-outlined-border);
-  color: var(--destructive-outlined-border);
+  --button-ripple-color: var(--button-color, var(--destructive-main));
+  border-color: var(--button-color, var(--destructive-outlined-border));
+  color: var(--button-color, var(--destructive-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--destructive__PPikG:hover:not(:disabled) {
-  background-color: var(--destructive-hover);
+  /* Mixed on the SOLID, not on `--destructive-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--destructive-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--destructive__PPikG:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--destructive-focus-visible);
@@ -203,12 +239,15 @@
   background-color: var(--destructive-selected);
 }
 .button-module_button--outlined__AxHna.button-module_button--warning__8wotP {
-  --button-ripple-color: var(--warning-main);
-  border-color: var(--warning-outlined-border);
-  color: var(--warning-outlined-border);
+  --button-ripple-color: var(--button-color, var(--warning-main));
+  border-color: var(--button-color, var(--warning-outlined-border));
+  color: var(--button-color, var(--warning-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--warning__8wotP:hover:not(:disabled) {
-  background-color: var(--warning-hover);
+  /* Mixed on the SOLID, not on `--warning-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--warning-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--warning__8wotP:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--warning-focus-visible);
@@ -217,12 +256,15 @@
   background-color: var(--warning-selected);
 }
 .button-module_button--outlined__AxHna.button-module_button--success__iPEgl {
-  --button-ripple-color: var(--success-main);
-  border-color: var(--success-outlined-border);
-  color: var(--success-outlined-border);
+  --button-ripple-color: var(--button-color, var(--success-main));
+  border-color: var(--button-color, var(--success-outlined-border));
+  color: var(--button-color, var(--success-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--success__iPEgl:hover:not(:disabled) {
-  background-color: var(--success-hover);
+  /* Mixed on the SOLID, not on `--success-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--success-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--success__iPEgl:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--success-focus-visible);
@@ -231,12 +273,15 @@
   background-color: var(--success-selected);
 }
 .button-module_button--outlined__AxHna.button-module_button--info__WaPKN {
-  --button-ripple-color: var(--info-main);
-  border-color: var(--info-outlined-border);
-  color: var(--info-outlined-border);
+  --button-ripple-color: var(--button-color, var(--info-main));
+  border-color: var(--button-color, var(--info-outlined-border));
+  color: var(--button-color, var(--info-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--info__WaPKN:hover:not(:disabled) {
-  background-color: var(--info-hover);
+  /* Mixed on the SOLID, not on `--info-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--info-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--info__WaPKN:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--info-focus-visible);
@@ -245,12 +290,15 @@
   background-color: var(--info-selected);
 }
 .button-module_button--outlined__AxHna.button-module_button--slate__DRwTq {
-  --button-ripple-color: var(--slate-main);
-  border-color: var(--slate-outlined-border);
-  color: var(--slate-outlined-border);
+  --button-ripple-color: var(--button-color, var(--slate-main));
+  border-color: var(--button-color, var(--slate-outlined-border));
+  color: var(--button-color, var(--slate-outlined-border));
 }
 .button-module_button--outlined__AxHna.button-module_button--slate__DRwTq:hover:not(:disabled) {
-  background-color: var(--slate-hover);
+  /* Mixed on the SOLID, not on `--slate-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--slate-main)) 14%, transparent);
 }
 .button-module_button--outlined__AxHna.button-module_button--slate__DRwTq:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--slate-focus-visible);
@@ -273,11 +321,14 @@
   background-color: transparent;
 }
 .button-module_button--ghost__m7RzP.button-module_button--primary__BO20b {
-  --button-ripple-color: var(--primary-main);
-  color: var(--primary-outlined-border);
+  --button-ripple-color: var(--button-color, var(--primary-main));
+  color: var(--button-color, var(--primary-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--primary__BO20b:hover:not(:disabled) {
-  background-color: var(--primary-hover);
+  /* Mixed on the SOLID, not on `--primary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--primary-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--primary__BO20b:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--primary-focus-visible);
@@ -286,11 +337,14 @@
   background-color: var(--primary-selected);
 }
 .button-module_button--ghost__m7RzP.button-module_button--secondary__EgwQf {
-  --button-ripple-color: var(--secondary-main);
-  color: var(--secondary-outlined-border);
+  --button-ripple-color: var(--button-color, var(--secondary-main));
+  color: var(--button-color, var(--secondary-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--secondary__EgwQf:hover:not(:disabled) {
-  background-color: var(--secondary-hover);
+  /* Mixed on the SOLID, not on `--secondary-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--secondary-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--secondary__EgwQf:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--secondary-focus-visible);
@@ -299,11 +353,14 @@
   background-color: var(--secondary-selected);
 }
 .button-module_button--ghost__m7RzP.button-module_button--destructive__PPikG {
-  --button-ripple-color: var(--destructive-main);
-  color: var(--destructive-outlined-border);
+  --button-ripple-color: var(--button-color, var(--destructive-main));
+  color: var(--button-color, var(--destructive-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--destructive__PPikG:hover:not(:disabled) {
-  background-color: var(--destructive-hover);
+  /* Mixed on the SOLID, not on `--destructive-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--destructive-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--destructive__PPikG:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--destructive-focus-visible);
@@ -312,11 +369,14 @@
   background-color: var(--destructive-selected);
 }
 .button-module_button--ghost__m7RzP.button-module_button--warning__8wotP {
-  --button-ripple-color: var(--warning-main);
-  color: var(--warning-outlined-border);
+  --button-ripple-color: var(--button-color, var(--warning-main));
+  color: var(--button-color, var(--warning-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--warning__8wotP:hover:not(:disabled) {
-  background-color: var(--warning-hover);
+  /* Mixed on the SOLID, not on `--warning-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--warning-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--warning__8wotP:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--warning-focus-visible);
@@ -325,11 +385,14 @@
   background-color: var(--warning-selected);
 }
 .button-module_button--ghost__m7RzP.button-module_button--success__iPEgl {
-  --button-ripple-color: var(--success-main);
-  color: var(--success-outlined-border);
+  --button-ripple-color: var(--button-color, var(--success-main));
+  color: var(--button-color, var(--success-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--success__iPEgl:hover:not(:disabled) {
-  background-color: var(--success-hover);
+  /* Mixed on the SOLID, not on `--success-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--success-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--success__iPEgl:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--success-focus-visible);
@@ -338,11 +401,14 @@
   background-color: var(--success-selected);
 }
 .button-module_button--ghost__m7RzP.button-module_button--info__WaPKN {
-  --button-ripple-color: var(--info-main);
-  color: var(--info-outlined-border);
+  --button-ripple-color: var(--button-color, var(--info-main));
+  color: var(--button-color, var(--info-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--info__WaPKN:hover:not(:disabled) {
-  background-color: var(--info-hover);
+  /* Mixed on the SOLID, not on `--info-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--info-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--info__WaPKN:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--info-focus-visible);
@@ -351,11 +417,14 @@
   background-color: var(--info-selected);
 }
 .button-module_button--ghost__m7RzP.button-module_button--slate__DRwTq {
-  --button-ripple-color: var(--slate-main);
-  color: var(--slate-outlined-border);
+  --button-ripple-color: var(--button-color, var(--slate-main));
+  color: var(--button-color, var(--slate-outlined-border));
 }
 .button-module_button--ghost__m7RzP.button-module_button--slate__DRwTq:hover:not(:disabled) {
-  background-color: var(--slate-hover);
+  /* Mixed on the SOLID, not on `--slate-hover`. That token is itself an
+     alpha tint (8–16%), so mixing it again compounded two transparencies and
+     landed at ~1.6% — a hover nobody could see. */
+  background-color: color-mix(in srgb, var(--button-color, var(--slate-main)) 14%, transparent);
 }
 .button-module_button--ghost__m7RzP.button-module_button--slate__DRwTq:focus-visible {
   box-shadow: 0 0 0 2px var(--background-default), 0 0 0 4px var(--slate-focus-visible);

package/dist/ui/Button/button.d.ts

@@ -2,6 +2,10 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { buttonVariants } from './button-variants';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** A colour outside the theme scale; overrides the theme's colour roles. */
+    color?: string;
+    /** Ink for `contained` when `color` is set and the default contrast is wrong. */
+    onColor?: string;
     asChild?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/ui/Button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAmCnD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,uFA4DX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAmCnD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC1F,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,uFA4EX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/ui/Button/button.js

@@ -34,7 +34,7 @@ const normalizePathname = (href, origin) => {
         return null;
     }
 };
-const Button = React.forwardRef(({ variant = 'contained', theme = 'primary', size = 'md', rounded = 'extra', iconOnly, className, asChild = false, onClick, ...props }, ref) => {
+const Button = React.forwardRef(({ variant = 'contained', theme = 'primary', size = 'md', rounded = 'extra', iconOnly, fullWidth, className, asChild = false, onClick, color, onColor, style, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     const childHref = asChild ? getChildHref(props.children) : null;
     const isBrowser = typeof window !== 'undefined';
@@ -57,7 +57,13 @@ const Button = React.forwardRef(({ variant = 'contained', theme = 'primary', siz
     // a wrapper element whose own content needs its own a11y decisions.
     const { children: rawChildren, ...restProps } = props;
     const children = asChild ? rawChildren : withAriaHiddenChildren(rawChildren);
-    return (jsx(Comp, { "data-slot": 'button', "data-active-link": isActiveLink ? 'true' : undefined, "aria-current": isActiveLink && asChild ? 'page' : undefined, className: cn(buttonVariants({ variant, theme, iconOnly, size, rounded }), className), ref: ref, onClick: handleClick, ...restProps, children: children }));
+    return (jsx(Comp, { "data-slot": 'button', "data-active-link": isActiveLink ? 'true' : undefined, "aria-current": isActiveLink && asChild ? 'page' : undefined, className: cn(buttonVariants({ variant, theme, iconOnly, fullWidth, size, rounded }), className), style: color || onColor
+            ? {
+                ...style,
+                ...(color ? { '--button-color': color } : null),
+                ...(onColor ? { '--button-on-color': onColor } : null),
+            }
+            : style, ref: ref, onClick: handleClick, ...restProps, children: children }));
 });
 Button.displayName = 'Button';
 

package/dist/ui/Button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/ui/Button/button.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { createRipple } from '../../internal/create-ripple';\nimport { Slot } from '../../internal/slot';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { buttonVariants } from './button-variants';\nimport s from './button.module.scss';\n\nconst getChildHref = (children: React.ReactNode): string | null => {\n  const childArray = React.Children.toArray(children ?? []);\n  if (childArray.length !== 1) {\n    return null;\n  }\n\n  const child = childArray[0];\n  if (!React.isValidElement<{ href?: string; to?: string }>(child)) {\n    return null;\n  }\n\n  if (typeof child.props?.href === 'string') {\n    return child.props.href;\n  }\n\n  if (typeof child.props?.to === 'string') {\n    return child.props.to;\n  }\n\n  return null;\n};\n\nconst normalizePathname = (href: string, origin: string): string | null => {\n  try {\n    const url = new URL(href, origin);\n    const normalizedPath = url.pathname.replace(/\\/+$/, '');\n    return normalizedPath || '/';\n  } catch {\n    return null;\n  }\n};\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'contained',\n      theme = 'primary',\n      size = 'md',\n      rounded = 'extra',\n      iconOnly,\n      className,\n      asChild = false,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const childHref = asChild ? getChildHref(props.children) : null;\n    const isBrowser = typeof window !== 'undefined';\n\n    let currentPath: string | null = null;\n    let targetPath: string | null = null;\n\n    if (isBrowser) {\n      const { pathname, origin } = window.location;\n      currentPath = normalizePathname(pathname, origin);\n\n      if (childHref) {\n        targetPath = normalizePathname(childHref, origin);\n      }\n    }\n\n    const isActiveLink = Boolean(\n      asChild && currentPath && targetPath && currentPath === targetPath,\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n      createRipple(event, s['ripple']);\n      onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n    };\n\n    // Treat element children as decorative by default (icons get\n    // aria-hidden automatically). Skip for `asChild` because Slot's child is\n    // a wrapper element whose own content needs its own a11y decisions.\n    const { children: rawChildren, ...restProps } = props;\n    const children = asChild ? rawChildren : withAriaHiddenChildren(rawChildren);\n\n    return (\n      <Comp\n        data-slot={'button'}\n        data-active-link={isActiveLink ? 'true' : undefined}\n        aria-current={isActiveLink && asChild ? 'page' : undefined}\n        className={cn(buttonVariants({ variant, theme, iconOnly, size, rounded }), className)}\n        ref={ref}\n        onClick={handleClick}\n        {...restProps}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/ui/Button/button.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { createRipple } from '../../internal/create-ripple';\nimport { Slot } from '../../internal/slot';\nimport { withAriaHiddenChildren } from '../../internal/with-aria-hidden-children';\nimport { buttonVariants } from './button-variants';\nimport s from './button.module.scss';\n\nconst getChildHref = (children: React.ReactNode): string | null => {\n  const childArray = React.Children.toArray(children ?? []);\n  if (childArray.length !== 1) {\n    return null;\n  }\n\n  const child = childArray[0];\n  if (!React.isValidElement<{ href?: string; to?: string }>(child)) {\n    return null;\n  }\n\n  if (typeof child.props?.href === 'string') {\n    return child.props.href;\n  }\n\n  if (typeof child.props?.to === 'string') {\n    return child.props.to;\n  }\n\n  return null;\n};\n\nconst normalizePathname = (href: string, origin: string): string | null => {\n  try {\n    const url = new URL(href, origin);\n    const normalizedPath = url.pathname.replace(/\\/+$/, '');\n    return normalizedPath || '/';\n  } catch {\n    return null;\n  }\n};\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {\n  /** A colour outside the theme scale; overrides the theme's colour roles. */\n  color?: string;\n  /** Ink for `contained` when `color` is set and the default contrast is wrong. */\n  onColor?: string;\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'contained',\n      theme = 'primary',\n      size = 'md',\n      rounded = 'extra',\n      iconOnly,\n      fullWidth,\n      className,\n      asChild = false,\n      onClick,\n      color,\n      onColor,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const childHref = asChild ? getChildHref(props.children) : null;\n    const isBrowser = typeof window !== 'undefined';\n\n    let currentPath: string | null = null;\n    let targetPath: string | null = null;\n\n    if (isBrowser) {\n      const { pathname, origin } = window.location;\n      currentPath = normalizePathname(pathname, origin);\n\n      if (childHref) {\n        targetPath = normalizePathname(childHref, origin);\n      }\n    }\n\n    const isActiveLink = Boolean(\n      asChild && currentPath && targetPath && currentPath === targetPath,\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n      createRipple(event, s['ripple']);\n      onClick?.(event as React.MouseEvent<HTMLButtonElement>);\n    };\n\n    // Treat element children as decorative by default (icons get\n    // aria-hidden automatically). Skip for `asChild` because Slot's child is\n    // a wrapper element whose own content needs its own a11y decisions.\n    const { children: rawChildren, ...restProps } = props;\n    const children = asChild ? rawChildren : withAriaHiddenChildren(rawChildren);\n\n    return (\n      <Comp\n        data-slot={'button'}\n        data-active-link={isActiveLink ? 'true' : undefined}\n        aria-current={isActiveLink && asChild ? 'page' : undefined}\n        className={cn(\n          buttonVariants({ variant, theme, iconOnly, fullWidth, size, rounded }),\n          className,\n        )}\n        style={\n          color || onColor\n            ? ({\n                ...style,\n                ...(color ? { '--button-color': color } : null),\n                ...(onColor ? { '--button-on-color': onColor } : null),\n              } as React.CSSProperties)\n            : style\n        }\n        ref={ref}\n        onClick={handleClick}\n        {...restProps}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { Button };\n"],"names":["_jsx"],"mappings":"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"}

package/dist/ui/Button/button.module.scss.js

@@ -1,6 +1,6 @@
 import './button.css';
 
-var s = {"button":"button-module_button__ATpxB","ripple":"button-module_ripple__Ny6oE","button--rounded":"button-module_button--rounded__ah_Ei","button--extra-rounded":"button-module_button--extra-rounded__B9xBI","button--contained":"button-module_button--contained__YQQ33","button--primary":"button-module_button--primary__BO20b","button--secondary":"button-module_button--secondary__EgwQf","button--destructive":"button-module_button--destructive__PPikG","button--warning":"button-module_button--warning__8wotP","button--success":"button-module_button--success__iPEgl","button--info":"button-module_button--info__WaPKN","button--slate":"button-module_button--slate__DRwTq","button--inherit":"button-module_button--inherit__KgtNC","button--outlined":"button-module_button--outlined__AxHna","button--ghost":"button-module_button--ghost__m7RzP","button--xs":"button-module_button--xs__eWH8k","button--icon-only":"button-module_button--icon-only__U2BKr","button--sm":"button-module_button--sm__4yeUt","button--md":"button-module_button--md__HpLm1","button--lg":"button-module_button--lg__67gAK"};
+var s = {"button--full-width":"button-module_button--full-width__f1jWC","button":"button-module_button__ATpxB","ripple":"button-module_ripple__Ny6oE","button--rounded":"button-module_button--rounded__ah_Ei","button--extra-rounded":"button-module_button--extra-rounded__B9xBI","button--contained":"button-module_button--contained__YQQ33","button--primary":"button-module_button--primary__BO20b","button--secondary":"button-module_button--secondary__EgwQf","button--destructive":"button-module_button--destructive__PPikG","button--warning":"button-module_button--warning__8wotP","button--success":"button-module_button--success__iPEgl","button--info":"button-module_button--info__WaPKN","button--slate":"button-module_button--slate__DRwTq","button--inherit":"button-module_button--inherit__KgtNC","button--outlined":"button-module_button--outlined__AxHna","button--ghost":"button-module_button--ghost__m7RzP","button--xs":"button-module_button--xs__eWH8k","button--icon-only":"button-module_button--icon-only__U2BKr","button--sm":"button-module_button--sm__4yeUt","button--md":"button-module_button--md__HpLm1","button--lg":"button-module_button--lg__67gAK"};
 
 export { s as default };
 //# sourceMappingURL=button.module.scss.js.map

package/dist/ui/Chip/chip.css

@@ -39,8 +39,8 @@
   border-style: dashed;
 }
 .chip-module_chip--2xs__GJtZF {
-  font-size: 0.56rem;
-  padding: 0 0.25rem;
+  font-size: 0.6rem;
+  padding: 0.05rem 0.25rem;
 }
 .chip-module_chip--2xs__GJtZF > svg {
   height: 0.6rem;
@@ -104,7 +104,7 @@
   --themed-selected: var(--primary-selected);
   --chip-ink: var(--chip-color, var(--primary-outlined-border));
   --chip-fill: var(--chip-color, var(--primary-main));
-  --chip-wash: var(--chip-color, var(--primary-hover));
+  --chip-wash: var(--chip-color, var(--primary-main));
   --chip-on-fill: var(--primary-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--secondary__eyfdz {
@@ -120,7 +120,7 @@
   --themed-selected: var(--secondary-selected);
   --chip-ink: var(--chip-color, var(--secondary-outlined-border));
   --chip-fill: var(--chip-color, var(--secondary-main));
-  --chip-wash: var(--chip-color, var(--secondary-hover));
+  --chip-wash: var(--chip-color, var(--secondary-main));
   --chip-on-fill: var(--secondary-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--destructive__80JrW {
@@ -136,7 +136,7 @@
   --themed-selected: var(--destructive-selected);
   --chip-ink: var(--chip-color, var(--destructive-outlined-border));
   --chip-fill: var(--chip-color, var(--destructive-main));
-  --chip-wash: var(--chip-color, var(--destructive-hover));
+  --chip-wash: var(--chip-color, var(--destructive-main));
   --chip-on-fill: var(--destructive-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--warning__3oxvl {
@@ -152,7 +152,7 @@
   --themed-selected: var(--warning-selected);
   --chip-ink: var(--chip-color, var(--warning-outlined-border));
   --chip-fill: var(--chip-color, var(--warning-main));
-  --chip-wash: var(--chip-color, var(--warning-hover));
+  --chip-wash: var(--chip-color, var(--warning-main));
   --chip-on-fill: var(--warning-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--success__VF1tZ {
@@ -168,7 +168,7 @@
   --themed-selected: var(--success-selected);
   --chip-ink: var(--chip-color, var(--success-outlined-border));
   --chip-fill: var(--chip-color, var(--success-main));
-  --chip-wash: var(--chip-color, var(--success-hover));
+  --chip-wash: var(--chip-color, var(--success-main));
   --chip-on-fill: var(--success-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--info__Jgnsc {
@@ -184,7 +184,7 @@
   --themed-selected: var(--info-selected);
   --chip-ink: var(--chip-color, var(--info-outlined-border));
   --chip-fill: var(--chip-color, var(--info-main));
-  --chip-wash: var(--chip-color, var(--info-hover));
+  --chip-wash: var(--chip-color, var(--info-main));
   --chip-on-fill: var(--info-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--slate__vmQ7R {
@@ -200,7 +200,7 @@
   --themed-selected: var(--slate-selected);
   --chip-ink: var(--chip-color, var(--slate-outlined-border));
   --chip-fill: var(--chip-color, var(--slate-main));
-  --chip-wash: var(--chip-color, var(--slate-hover));
+  --chip-wash: var(--chip-color, var(--slate-main));
   --chip-on-fill: var(--slate-contrast);
 }
 .chip-module_chip__u4PJ9.chip-module_chip--inherit__HjU_P {
@@ -209,21 +209,42 @@
   --chip-wash: var(--chip-color, var(--themed-hover, var(--action-hover)));
   --chip-on-fill: var(--themed-contrast, var(--background-default));
 }
+.chip-module_chip__u4PJ9 {
+  /*
+   * Every fill answers a hover.
+   *
+   * `outline` and `solid` had none at all, which is most visible where a chip
+   * IS the control — a filter pill, a size to pick — and the only feedback was
+   * the cursor. `soft` had one, but on a `--chip-wash` that fell back to an
+   * already-alpha `-hover` token, so 20% of 10% was 2% and the hover moved it
+   * to 4%. The wash is a solid now and the percentages mean what they say.
+   */
+}
 .chip-module_chip--soft__zYBtU {
-  background-color: color-mix(in srgb, var(--chip-wash) 20%, transparent);
+  background-color: color-mix(in srgb, var(--chip-wash) 18%, transparent);
   border-color: var(--chip-ink);
   color: var(--chip-ink);
 }
 .chip-module_chip--soft__zYBtU:hover {
-  background-color: color-mix(in srgb, var(--chip-wash) 40%, transparent);
+  background-color: color-mix(in srgb, var(--chip-wash) 34%, transparent);
 }
 .chip-module_chip--outline__TO-HF {
   background-color: transparent;
   border-color: color-mix(in srgb, var(--chip-ink) 55%, transparent);
   color: var(--chip-ink);
 }
+.chip-module_chip--outline__TO-HF:hover {
+  background-color: color-mix(in srgb, var(--chip-wash) 16%, transparent);
+  border-color: var(--chip-ink);
+}
 .chip-module_chip--solid__F89cD {
   background-color: var(--chip-fill);
   border-color: var(--chip-fill);
   color: var(--chip-on-fill);
+  /* Lightened toward the page's own ink-on-accent, the way a contained
+     Button lightens its fill — a solid cannot take a tint on top. */
+}
+.chip-module_chip--solid__F89cD:hover {
+  background-color: color-mix(in srgb, var(--chip-fill) 86%, var(--chip-on-fill));
+  border-color: color-mix(in srgb, var(--chip-fill) 86%, var(--chip-on-fill));
 }