morya-ui 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,16 +1,44 @@
 # morya-ui
 
+## 0.3.3
+
+### 新功能
+
+- add L2 decision recipes for component selection
+- support disabling the link underline
+
+### 修复
+
+- dismiss overlay on page scroll or resize
+- align overlay motion with scale-fade
+- correct link, plain, and ghost variant styles
+- disable ripple and press by default
+- correct import paths for styles in Card, Icon, Page, and Pagination components
+
+### 文档
+
+- wire morya-ui-pages to decision recipes
+
+### 变更
+
+- align menu item chrome with Select and Dropdown
+- add full Button prop demos
+
 ## 0.3.2
 
 ### 新功能
 
 - add click ripple and a press-scale toggle
+- add link underline toggle
 - replace quick jumper with a filterable Select
 - refine ops layout primitives and P2 filter/stat APIs
 - add shadow prop and remove hoverable
 
 ### 修复
 
+- keep link buttons backgroundless on hover and press
+- make plain match outlined hover fill
+- make ghost match text hover fill
 - Panel component change demo component width
 - remove OS reduced-motion media queries from components
 - control intensity via library preference only
@@ -22,6 +50,8 @@
 
 ### 变更
 
+- disable button click ripple by default
+- disable button press scale by default
 - extract filter and expanded-key helpers
 - extract label filter helpers for option lists
 - extract sort, filter, and selection helpers

package/dist/{Button-dMqRmoYa.js → Button-gBiRj7wz.js}

@@ -1,9 +1,9 @@
 import { r as e, t } from "./types-DGuu4Eg4.js";
 import { t as n } from "./Icon-od9Ob-Ay.js";
 import { o as r } from "./config-CapALqt3.js";
-import { Comment as i, Fragment as a, Text as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, useSlots as ee } from "vue";
+import { Comment as i, Fragment as a, Text as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, openBlock as _, ref as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, useSlots as S } from "vue";
 //#region src/components/Button/Button.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var ee = [
 	"type",
 	"disabled",
 	"autofocus",
@@ -44,6 +44,10 @@ var S = [
 			type: Boolean,
 			default: !1
 		},
+		underline: {
+			type: Boolean,
+			default: !0
+		},
 		ghost: {
 			type: Boolean,
 			default: !1
@@ -80,16 +84,16 @@ var S = [
 		ariaLabel: {},
 		ripple: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		press: {
 			type: Boolean,
-			default: !0
+			default: !1
 		}
 	},
 	emits: ["click"],
 	setup(p, { expose: E, emit: D }) {
-		let O = p, k = D, A = ee(), j = v(null), M = v(null), N = /* @__PURE__ */ new Set(), P = s(() => !!A.default?.().some((e) => Z(e))), F = s(() => P.value || !!O.label?.trim()), I = s(() => O.outlined || O.variant === "outlined"), L = s(() => O.text || O.variant === "text"), R = s(() => O.link || O.variant === "link"), z = s(() => O.ghost || O.variant === "ghost"), B = s(() => O.quaternary || O.variant === "quaternary"), V = s(() => O.fluid), H = r("Button", () => O.size), U = s(() => e(H.value)), W = s(() => O.iconOnly || !F.value && !!(O.icon || A.icon || O.loading)), G = s(() => t(O.severity) ?? "primary"), K = s(() => typeof O.icon == "string" ? O.icon : void 0), q = s(() => typeof O.icon == "string" || !O.icon ? void 0 : O.icon), J = s(() => [
+		let O = p, k = D, A = S(), j = v(null), M = v(null), N = /* @__PURE__ */ new Set(), P = s(() => !!A.default?.().some((e) => Z(e))), F = s(() => P.value || !!O.label?.trim()), I = s(() => O.outlined || O.variant === "outlined"), L = s(() => O.text || O.variant === "text"), R = s(() => O.link || O.variant === "link"), z = s(() => O.ghost || O.variant === "ghost"), B = s(() => O.quaternary || O.variant === "quaternary"), V = s(() => O.fluid), H = r("Button", () => O.size), U = s(() => e(H.value)), W = s(() => O.iconOnly || !F.value && !!(O.icon || A.icon || O.loading)), G = s(() => t(O.severity) ?? "primary"), K = s(() => typeof O.icon == "string" ? O.icon : void 0), q = s(() => typeof O.icon == "string" || !O.icon ? void 0 : O.icon), J = s(() => [
 			"m-button",
 			`m-button--${G.value}`,
 			`m-button--${H.value}`,
@@ -100,6 +104,7 @@ var S = [
 				"m-button--text": L.value,
 				"m-button--outlined": I.value,
 				"m-button--link": R.value,
+				"m-button--link-underline": R.value && O.underline,
 				"m-button--ghost": z.value,
 				"m-button--quaternary": B.value,
 				"m-button--plain": O.plain,
@@ -215,7 +220,7 @@ var S = [
 				key: 3,
 				class: m(X.value)
 			}, x(p.badge), 3)) : l("", !0)
-		], 46, S));
+		], 46, ee));
 	}
 });
 //#endregion

package/dist/{FlyoutSubmenu-BrUPmJa1.js → FlyoutSubmenu-H_741alW.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./overlay-oR-5MDuE.js";
-import { t } from "./overlayPlacement-Cd20JTD_.js";
-import { t as n } from "./useFloatingViewportSync-DZdJ7W8n.js";
+import { t } from "./overlayPlacement-qwEJPVS4.js";
+import { t as n } from "./useFloatingViewportSync-wLLKIGUA.js";
 import { c as r } from "./config-CapALqt3.js";
 import { Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderSlot as h, watch as g } from "vue";
 //#endregion

package/dist/{Loading-BSsRs6v9.js → Loading-qS2Yv_gm.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./useComponentAttrs-e-5QAjdw.js";
 import { i as t } from "./types-DGuu4Eg4.js";
 import { t as n } from "./usePauseOffscreen-BIikV_gj.js";
-import { n as r, t as i } from "./useMotionTransition-Bxnnb_9u.js";
+import { n as r, t as i } from "./useMotionTransition-95Y79FoL.js";
 import { n as a } from "./overlay-oR-5MDuE.js";
 import { i as o } from "./content-h8POj44-.js";
 import { t as s } from "./overlayHost-78CGtMgR.js";

package/dist/{Pagination-CqpC5EAs.js → Pagination-Bvv2qvEK.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./useComponentAttrs-e-5QAjdw.js";
 import { t } from "./Icon-od9Ob-Ay.js";
-import { t as n } from "./Select-CKGrSoaC.js";
+import { t as n } from "./Select-CiXd074W.js";
 import { n as r, t as i } from "./locale-Bzm2nbEp.js";
 import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderList as h, toDisplayString as g, unref as _, useAttrs as v } from "vue";
 //#region src/components/Pagination/Pagination.vue?vue&type=script&setup=true&lang.ts

package/dist/{Popover-BQ07q4VV.js → Popover-rnZG_ap0.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./useComponentAttrs-e-5QAjdw.js";
-import { t } from "./useMotionTransition-Bxnnb_9u.js";
+import { t } from "./useMotionTransition-95Y79FoL.js";
 import { n, t as r } from "./overlay-oR-5MDuE.js";
-import { t as i } from "./overlayPlacement-Cd20JTD_.js";
+import { t as i } from "./overlayPlacement-qwEJPVS4.js";
 import { t as a } from "./useMId-BXFYayPP.js";
 import { c as o } from "./config-CapALqt3.js";
 import { Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as ee, openBlock as b, ref as x, renderSlot as S, unref as C, useAttrs as te, watch as ne, withCtx as re } from "vue";
@@ -43,7 +43,7 @@ var ie = ["aria-expanded", "aria-controls"], ae = ["id"], w = /* @__PURE__ */ h(
 			role: "popup",
 			local: () => E.transition,
 			componentName: "Popover",
-			fallback: "popover"
+			fallback: "scale-fade"
 		}), N = a(), P = x(null), F = x(null), I = x(null), L = x({}), R = l(() => n(E, A.value.appendTo)), z = l(() => r(E, A.value.appendTo)), B, V;
 		function H(e) {
 			e && E.disabled || D("update:modelValue", e);

package/dist/{Select-CKGrSoaC.js → Select-CiXd074W.js}

@@ -1,9 +1,9 @@
 import { i as e } from "./useComponentAttrs-e-5QAjdw.js";
 import { t } from "./Icon-od9Ob-Ay.js";
-import { t as n } from "./useMotionTransition-Bxnnb_9u.js";
+import { t as n } from "./useMotionTransition-95Y79FoL.js";
 import { n as r, t as i } from "./overlay-oR-5MDuE.js";
-import { t as a } from "./overlayPlacement-Cd20JTD_.js";
-import { t as o } from "./useFloatingViewportSync-DZdJ7W8n.js";
+import { t as a } from "./overlayPlacement-qwEJPVS4.js";
+import { t as o } from "./useFloatingViewportSync-wLLKIGUA.js";
 import { t as s } from "./useMId-BXFYayPP.js";
 import { t as ee } from "./Scrollbar-DTeJ8P5b.js";
 import { t as c } from "./VirtualScroller-CHoFCmpP.js";

package/dist/{Tooltip-D5DO0B3z.js → Tooltip-B02o9BOW.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./useMotionTransition-Bxnnb_9u.js";
+import { t as e } from "./useMotionTransition-95Y79FoL.js";
 import { n as t, t as n } from "./overlay-oR-5MDuE.js";
-import { n as r, t as i } from "./overlayPlacement-Cd20JTD_.js";
-import { t as a } from "./useFloatingViewportSync-DZdJ7W8n.js";
+import { n as r, t as i } from "./overlayPlacement-qwEJPVS4.js";
+import { t as a } from "./useFloatingViewportSync-wLLKIGUA.js";
 import { t as o } from "./useMId-BXFYayPP.js";
 import { c as s } from "./config-CapALqt3.js";
 import { Teleport as c, Transition as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, defineComponent as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as y, openBlock as b, ref as x, renderSlot as S, toDisplayString as C, unref as w, withCtx as T } from "vue";

package/dist/auto-complete/index.js

@@ -1,9 +1,9 @@
 import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { t as n } from "../useMotionTransition-95Y79FoL.js";
 import { n as ee, t as te } from "../overlay-oR-5MDuE.js";
-import { t as ne } from "../overlayPlacement-Cd20JTD_.js";
-import { t as re } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as ne } from "../overlayPlacement-qwEJPVS4.js";
+import { t as re } from "../useFloatingViewportSync-wLLKIGUA.js";
 import { t as r } from "../useMId-BXFYayPP.js";
 import { t as i } from "../Scrollbar-DTeJ8P5b.js";
 import { n as a } from "../filterByQuery-Bczaxzih.js";

package/dist/block-ui/index.js

@@ -1,5 +1,5 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../useMotionTransition-Bxnnb_9u.js";
+import { t } from "../useMotionTransition-95Y79FoL.js";
 import "./style.js";
 import { Transition as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderSlot as d, unref as f, useAttrs as p, withCtx as m } from "vue";
 //#region src/components/BlockUI/BlockUI.vue?vue&type=script&setup=true&lang.ts

package/dist/button/index.js

@@ -1,5 +1,5 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Button-dMqRmoYa.js";
+import { t } from "../Button-gBiRj7wz.js";
 import "./style.js";
 import { computed as n, createElementBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useAttrs as l } from "vue";
 //#region src/components/Button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts

package/dist/button/style.css

@@ -1424,7 +1424,30 @@
     );
 }
 
-.m-button--secondary.m-button--outlined {
+/* Idle matches outlined hover; hover/active deepen the tint. */
+.m-button--plain {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 10%,
+        transparent
+    );
+    --m-button-fg: var(--m-button-border);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-border);
+    --m-button-hover-border: var(--m-button-border);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-border) 22%,
+        transparent
+    );
+}
+
+.m-button--secondary.m-button--outlined,
+.m-button--secondary.m-button--plain {
     --m-button-border: var(--m-color-border);
     --m-button-fg: var(--m-color-text);
     --m-button-hover-fg: var(--m-color-text);
@@ -1435,13 +1458,16 @@
     --m-button-bg: transparent;
     --m-button-border: transparent;
     --m-button-fg: var(--m-color-primary);
+    --m-button-hover-fg: var(--m-color-primary);
+    --m-button-hover-border: transparent;
+}
+
+.m-button--text {
     --m-button-hover-bg: color-mix(
         in srgb,
         var(--m-color-primary) 10%,
         transparent
     );
-    --m-button-hover-fg: var(--m-color-primary);
-    --m-button-hover-border: transparent;
     --m-button-active-bg: color-mix(
         in srgb,
         var(--m-color-primary) 16%,
@@ -1449,8 +1475,24 @@
     );
 }
 
-.m-button--secondary.m-button--text,
-.m-button--secondary.m-button--link {
+.m-button--link {
+    --m-button-bg: transparent;
+    --m-button-hover-bg: transparent;
+    --m-button-active-bg: transparent;
+    height: auto;
+    min-height: 0;
+    padding: 0;
+}
+
+.m-button--link.m-button--link-underline:hover:not(:disabled) {
+    text-decoration: underline;
+}
+
+.m-button--link:not(.m-button--link-underline):hover:not(:disabled) {
+    opacity: 0.8;
+}
+
+.m-button--secondary.m-button--text {
     --m-button-fg: var(--m-color-text-muted);
     --m-button-hover-bg: color-mix(
         in srgb,
@@ -1460,8 +1502,12 @@
     --m-button-hover-fg: var(--m-color-text);
 }
 
+.m-button--secondary.m-button--link {
+    --m-button-fg: var(--m-color-text-muted);
+    --m-button-hover-fg: var(--m-color-text);
+}
+
 .m-button--success.m-button--text,
-.m-button--success.m-button--link,
 .m-button--success.m-button--outlined {
     --m-button-fg: var(--m-color-success);
     --m-button-border: var(--m-color-success);
@@ -1474,8 +1520,12 @@
     --m-button-hover-border: var(--m-color-success);
 }
 
+.m-button--success.m-button--link {
+    --m-button-fg: var(--m-color-success);
+    --m-button-hover-fg: var(--m-color-success);
+}
+
 .m-button--info.m-button--text,
-.m-button--info.m-button--link,
 .m-button--info.m-button--outlined {
     --m-button-fg: var(--m-color-info);
     --m-button-border: var(--m-color-info);
@@ -1488,8 +1538,12 @@
     --m-button-hover-border: var(--m-color-info);
 }
 
+.m-button--info.m-button--link {
+    --m-button-fg: var(--m-color-info);
+    --m-button-hover-fg: var(--m-color-info);
+}
+
 .m-button--warn.m-button--text,
-.m-button--warn.m-button--link,
 .m-button--warn.m-button--outlined {
     --m-button-fg: var(--m-color-warn);
     --m-button-border: var(--m-color-warn);
@@ -1502,8 +1556,12 @@
     --m-button-hover-border: var(--m-color-warn);
 }
 
+.m-button--warn.m-button--link {
+    --m-button-fg: var(--m-color-warn);
+    --m-button-hover-fg: var(--m-color-warn);
+}
+
 .m-button--help.m-button--text,
-.m-button--help.m-button--link,
 .m-button--help.m-button--outlined {
     --m-button-fg: var(--m-color-help);
     --m-button-border: var(--m-color-help);
@@ -1516,8 +1574,12 @@
     --m-button-hover-border: var(--m-color-help);
 }
 
+.m-button--help.m-button--link {
+    --m-button-fg: var(--m-color-help);
+    --m-button-hover-fg: var(--m-color-help);
+}
+
 .m-button--danger.m-button--text,
-.m-button--danger.m-button--link,
 .m-button--danger.m-button--outlined {
     --m-button-fg: var(--m-color-danger);
     --m-button-border: var(--m-color-danger);
@@ -1530,8 +1592,12 @@
     --m-button-hover-border: var(--m-color-danger);
 }
 
+.m-button--danger.m-button--link {
+    --m-button-fg: var(--m-color-danger);
+    --m-button-hover-fg: var(--m-color-danger);
+}
+
 .m-button--contrast.m-button--text,
-.m-button--contrast.m-button--link,
 .m-button--contrast.m-button--outlined {
     --m-button-fg: var(--m-color-contrast);
     --m-button-border: var(--m-color-contrast);
@@ -1544,9 +1610,14 @@
     --m-button-hover-border: var(--m-color-contrast);
 }
 
+.m-button--contrast.m-button--link {
+    --m-button-fg: var(--m-color-contrast);
+    --m-button-hover-fg: var(--m-color-contrast);
+}
+
 .m-button--plain.m-button--text,
-.m-button--plain.m-button--outlined,
-.m-button--plain.m-button--link {
+.m-button--plain.m-button--outlined {
+    --m-button-bg: transparent;
     --m-button-fg: var(--m-color-text-muted);
     --m-button-border: var(--m-color-border);
     --m-button-hover-bg: color-mix(
@@ -1556,69 +1627,178 @@
     );
     --m-button-hover-fg: var(--m-color-text);
     --m-button-hover-border: var(--m-color-border);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 18%,
+        transparent
+    );
 }
 
-.m-button--link {
-    height: auto;
-    min-height: 0;
-    padding: 0;
-}
-
-.m-button--link:hover:not(:disabled) {
-    text-decoration: underline;
+.m-button--plain.m-button--link {
+    --m-button-fg: var(--m-color-text-muted);
+    --m-button-hover-fg: var(--m-color-text);
 }
 
 .m-button--ghost {
-    --m-button-bg: transparent;
-    --m-button-fg: var(--m-button-border);
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-primary) 10%,
+        transparent
+    );
+    --m-button-border: transparent;
+    --m-button-fg: var(--m-color-primary);
     --m-button-hover-bg: color-mix(
         in srgb,
-        var(--m-button-border) 12%,
+        var(--m-color-primary) 16%,
         transparent
     );
-    --m-button-hover-fg: var(--m-button-border);
-    --m-button-hover-border: var(--m-button-border);
+    --m-button-hover-fg: var(--m-color-primary);
+    --m-button-hover-border: transparent;
     --m-button-active-bg: color-mix(
         in srgb,
-        var(--m-button-border) 18%,
+        var(--m-color-primary) 22%,
         transparent
     );
 }
 
 .m-button--secondary.m-button--ghost {
-    --m-button-border: var(--m-color-border);
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 12%,
+        transparent
+    );
     --m-button-fg: var(--m-color-text);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 18%,
+        transparent
+    );
     --m-button-hover-fg: var(--m-color-text);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 24%,
+        transparent
+    );
 }
 
 .m-button--success.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-success);
-    --m-button-border: var(--m-color-success);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-success);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-success) 22%,
+        transparent
+    );
 }
 
 .m-button--info.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-info);
-    --m-button-border: var(--m-color-info);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-info);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-info) 22%,
+        transparent
+    );
 }
 
 .m-button--warn.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-warn);
-    --m-button-border: var(--m-color-warn);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-warn);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-warn) 22%,
+        transparent
+    );
 }
 
 .m-button--help.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-help);
-    --m-button-border: var(--m-color-help);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-help);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-help) 22%,
+        transparent
+    );
 }
 
 .m-button--danger.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-danger);
-    --m-button-border: var(--m-color-danger);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-danger);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-danger) 22%,
+        transparent
+    );
 }
 
 .m-button--contrast.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 10%,
+        transparent
+    );
     --m-button-fg: var(--m-color-contrast);
-    --m-button-border: var(--m-color-contrast);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-color-contrast);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-color-contrast) 22%,
+        transparent
+    );
 }
 
 .m-button--quaternary {
@@ -1657,11 +1837,7 @@
     );
 }
 
-.m-button--custom.m-button--outlined,
-.m-button--custom.m-button--ghost,
-.m-button--custom.m-button--text,
-.m-button--custom.m-button--quaternary,
-.m-button--custom.m-button--link {
+.m-button--custom.m-button--outlined {
     --m-button-bg: transparent;
     --m-button-fg: var(--m-button-color);
     --m-button-border: var(--m-button-color);
@@ -1674,11 +1850,72 @@
     --m-button-hover-border: var(--m-button-color);
 }
 
+.m-button--custom.m-button--ghost {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 10%,
+        transparent
+    );
+    --m-button-fg: var(--m-button-color);
+    --m-button-border: transparent;
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: transparent;
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 22%,
+        transparent
+    );
+}
+
 .m-button--custom.m-button--text,
-.m-button--custom.m-button--quaternary,
+.m-button--custom.m-button--quaternary {
+    --m-button-bg: transparent;
+    --m-button-fg: var(--m-button-color);
+    --m-button-border: transparent;
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 12%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: transparent;
+}
+
+.m-button--custom.m-button--plain {
+    --m-button-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 10%,
+        transparent
+    );
+    --m-button-fg: var(--m-button-color);
+    --m-button-border: var(--m-button-color);
+    --m-button-hover-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 16%,
+        transparent
+    );
+    --m-button-hover-fg: var(--m-button-color);
+    --m-button-hover-border: var(--m-button-color);
+    --m-button-active-bg: color-mix(
+        in srgb,
+        var(--m-button-color) 22%,
+        transparent
+    );
+}
+
 .m-button--custom.m-button--link {
+    --m-button-bg: transparent;
+    --m-button-fg: var(--m-button-color);
     --m-button-border: transparent;
+    --m-button-hover-bg: transparent;
+    --m-button-hover-fg: var(--m-button-color);
     --m-button-hover-border: transparent;
+    --m-button-active-bg: transparent;
 }
 
 .m-button-group {