@bug-on/m3-expressive 1.0.0 → 1.2.0

package/dist/layout.mjs

@@ -207,19 +207,19 @@ var CardImpl = React18.forwardRef(
     const baseClass = cn(
       cardVariants({ variant }),
       // Disabled state:
-      // - pointer-events-none → vô hiệu hóa tương tác hoàn toàn
+      // - pointer-events-none → disable interactions completely
       // - opacity-[0.38] → MD3 DisabledContainerOpacity
       disabled && "pointer-events-none opacity-[0.38]",
       className
     );
     const interactiveClass = cn(
-      // Xóa outline default, dùng state overlay & elevation của MD3 để biểu hiện focus
+      // Remove default outline, use MD3 state overlay & elevation for focus
       "focus-visible:outline-none focus:outline-none group",
-      // Layer overlay base pseudo-element
+      // Base pseudo-element overlay layer
       "before:absolute before:inset-0 before:pointer-events-none before:bg-m3-on-surface before:opacity-0 before:transition-opacity before:duration-200",
-      // Interactive states opacities
+      // Interactive state opacities
       "hover:before:opacity-[0.08] focus-visible:before:opacity-[0.10] active:before:opacity-[0.10]",
-      // Outlined interactive card: đổi màu border sang m3-outline khi focus/press/hover
+      // Outlined interactive card: change border color to m3-outline on focus/press/hover
       variant === "outlined" && "hover:border-m3-outline focus-visible:border-m3-outline active:border-m3-outline"
     );
     if (!isInteractive) {
@@ -1374,6 +1374,35 @@ var BUTTON_COLOR_TOKENS = {
     default: "bg-transparent text-m3-primary",
     selected: "bg-transparent text-m3-primary",
     unselected: "bg-transparent text-m3-primary"
+  },
+  // ── MD3 Expressive accent variants ──────────────────────────────────────
+  /**
+   * High-chroma tertiary tone. Use for hero CTAs and expressive moments where
+   * a distinct accent beyond primary is needed (e.g., hero chip, highlight fab).
+   */
+  tertiary: {
+    default: "bg-m3-tertiary text-m3-on-tertiary",
+    selected: "bg-m3-tertiary text-m3-on-tertiary",
+    unselected: "bg-m3-tertiary-container text-m3-on-tertiary-container"
+  },
+  /**
+   * Brand-stable primary fixed. Hue stays consistent across light and dark modes.
+   * Ideal for badges, pill chips, and elements that must carry the brand color
+   * regardless of the active theme.
+   */
+  "primary-fixed": {
+    default: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    selected: "bg-m3-primary-fixed text-m3-on-primary-fixed",
+    unselected: "bg-m3-primary-fixed text-m3-on-primary-fixed-variant"
+  },
+  /**
+   * Brand-stable tertiary fixed. Use for special-state indicators, achievement
+   * badges, or accent pills that need a fixed tertiary hue across themes.
+   */
+  "tertiary-fixed": {
+    default: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    selected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed",
+    unselected: "bg-m3-tertiary-fixed text-m3-on-tertiary-fixed-variant"
   }
 };
 var MOTION_PROP_KEYS = [