@dmsi/wedgekit-react 0.0.124 → 0.0.125

package/dist/components/Notification.cjs

@@ -277,14 +277,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -322,6 +319,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Notification.js

@@ -10,7 +10,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-L364HTYC.js";
+} from "../chunk-H6LXXGX6.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/OptionPill.cjs

@@ -273,14 +273,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -318,6 +315,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/OptionPill.js

@@ -1,8 +1,8 @@
 import {
   OptionPill
-} from "../chunk-3NWBR3V3.js";
+} from "../chunk-QNQ5K7NW.js";
 import "../chunk-S5K22XTH.js";
-import "../chunk-L364HTYC.js";
+import "../chunk-H6LXXGX6.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/PDFViewer.cjs

@@ -331,14 +331,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx3.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -376,6 +373,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/PDFViewer.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Modal
-} from "../chunk-QIHDPSOM.js";
+} from "../chunk-D2YP2BTN.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-6CS5ZBXO.js";
+import "../chunk-CG2NIXZE.js";
 import "../chunk-FWPJ73IK.js";
-import "../chunk-3JRVV6QY.js";
+import "../chunk-6UI5GABI.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
 import {
@@ -18,7 +18,7 @@ import {
 } from "../chunk-EO3JJWFW.js";
 import {
   Button
-} from "../chunk-L364HTYC.js";
+} from "../chunk-H6LXXGX6.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/PaymentOnAccountModal.cjs

@@ -329,14 +329,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx3.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -374,6 +371,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/PaymentOnAccountModal.js

@@ -1,14 +1,14 @@
 import {
   PaymentOnAccountModal,
   calculateSurcharge
-} from "../chunk-22CQ3BSY.js";
-import "../chunk-FWRT5E5M.js";
+} from "../chunk-QLD6SOEU.js";
+import "../chunk-ZWEKVOHD.js";
 import "../chunk-TTO4PL7Y.js";
-import "../chunk-QIHDPSOM.js";
+import "../chunk-D2YP2BTN.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-6CS5ZBXO.js";
+import "../chunk-CG2NIXZE.js";
 import "../chunk-FWPJ73IK.js";
-import "../chunk-3JRVV6QY.js";
+import "../chunk-6UI5GABI.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
 import "../chunk-3ZUSYRI7.js";
@@ -23,7 +23,7 @@ import "../chunk-XEUPUTYP.js";
 import "../chunk-EO3JJWFW.js";
 import "../chunk-4OS6APPF.js";
 import "../chunk-VG4EPHJA.js";
-import "../chunk-L364HTYC.js";
+import "../chunk-H6LXXGX6.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/SelectPaymentMethod.cjs

@@ -611,14 +611,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx7.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -656,6 +653,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/SelectPaymentMethod.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-FWRT5E5M.js";
+} from "../chunk-ZWEKVOHD.js";
 import "../chunk-TTO4PL7Y.js";
 import "../chunk-3ZUSYRI7.js";
 import "../chunk-WT5XXW6G.js";
@@ -11,7 +11,7 @@ import "../chunk-XEUPUTYP.js";
 import "../chunk-EO3JJWFW.js";
 import "../chunk-4OS6APPF.js";
 import "../chunk-VG4EPHJA.js";
-import "../chunk-L364HTYC.js";
+import "../chunk-H6LXXGX6.js";
 import "../chunk-IGQVA7SC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";

package/dist/components/Stepper.cjs

@@ -275,14 +275,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -320,6 +317,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Stepper.js

@@ -6,7 +6,7 @@ import "../chunk-5UH6QUFB.js";
 import "../chunk-S5K22XTH.js";
 import {
   Button
-} from "../chunk-L364HTYC.js";
+} from "../chunk-H6LXXGX6.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Toast.cjs

@@ -410,14 +410,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx5.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -455,6 +452,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Toast.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-L364HTYC.js";
+} from "../chunk-H6LXXGX6.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/Upload.cjs

@@ -355,14 +355,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx4.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -400,6 +397,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/Upload.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-L364HTYC.js";
+} from "../chunk-H6LXXGX6.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/index.cjs

@@ -1803,6 +1803,7 @@ var DataGridCell = (0, import_react10.memo)(
         className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
+        "data-theme": type === "header" && !locked ? "brand" : void 0,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
@@ -1874,7 +1875,9 @@ function DataCellHeader(_a) {
     position: "relative",
     whiteSpace: "nowrap",
     width: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-text-brand-primary-normal)"
+    "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
+    "--color-icon-on-action-primary-normal": "var(--color-text-brand-primary-normal)",
+    "--background-action-secondary-normal": "var(--color-text-brand-primary-normal)"
   }, props.style);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     DataGridCell,
@@ -2078,7 +2081,8 @@ function DraggableCellHeader(_a) {
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
     width: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-neutral-000)",
+    "--color-text-primary-normal": "var(--color-action-000)",
+    "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -3431,14 +3435,11 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx17.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -3476,6 +3477,7 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
+      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/index.js

@@ -6,14 +6,14 @@ import {
 } from "../chunk-Y4HUYAI5.js";
 import {
   PaymentOnAccountModal
-} from "../chunk-22CQ3BSY.js";
-import "../chunk-FWRT5E5M.js";
+} from "../chunk-QLD6SOEU.js";
+import "../chunk-ZWEKVOHD.js";
 import "../chunk-TTO4PL7Y.js";
-import "../chunk-QIHDPSOM.js";
+import "../chunk-D2YP2BTN.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-6CS5ZBXO.js";
+import "../chunk-CG2NIXZE.js";
 import "../chunk-FWPJ73IK.js";
-import "../chunk-3JRVV6QY.js";
+import "../chunk-6UI5GABI.js";
 import "../chunk-4JLU7TAC.js";
 import "../chunk-J6LETUNM.js";
 import "../chunk-3ZUSYRI7.js";
@@ -25,7 +25,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-ZEGVZ5NW.js";
+} from "../chunk-KS4RDR6P.js";
 import {
   Menu
 } from "../chunk-37TJJQL3.js";
@@ -63,7 +63,7 @@ import {
 } from "../chunk-VG4EPHJA.js";
 import {
   Button
-} from "../chunk-L364HTYC.js";
+} from "../chunk-H6LXXGX6.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/index.css

@@ -2863,13 +2863,6 @@
       }
     }
   }
-  .hover\:bg-background-on-action-secondary-hover {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-background-on-action-secondary-hover);
-      }
-    }
-  }
   .hover\:bg-border-action-hover {
     &:hover {
       @media (hover: hover) {
@@ -2898,13 +2891,6 @@
       }
     }
   }
-  .hover\:text-brand-text-action-primary-hover {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-brand-text-action-primary-hover);
-      }
-    }
-  }
   .hover\:text-icon-action-critical-secondary-hover {
     &:hover {
       @media (hover: hover) {
@@ -3032,16 +3018,6 @@
       background-color: var(--color-background-action-secondary-hover);
     }
   }
-  .focus\:bg-background-on-action-secondary-hover {
-    &:focus {
-      background-color: var(--color-background-on-action-secondary-hover);
-    }
-  }
-  .focus\:text-brand-text-action-primary-hover {
-    &:focus {
-      color: var(--color-brand-text-action-primary-hover);
-    }
-  }
   .focus\:text-text-action-critical-hover {
     &:focus {
       color: var(--color-text-action-critical-hover);
@@ -3182,11 +3158,6 @@
       background-color: var(--color-background-action-secondary-active);
     }
   }
-  .active\:bg-background-on-action-secondary-active {
-    &:active {
-      background-color: var(--color-background-on-action-secondary-active);
-    }
-  }
   .active\:\!text-brand-text-on-action-primary-active {
     &:active {
       color: var(--color-brand-text-on-action-primary-active) !important;
@@ -3202,11 +3173,6 @@
       color: var(--color-action-300);
     }
   }
-  .active\:text-brand-text-action-primary-active {
-    &:active {
-      color: var(--color-brand-text-action-primary-active);
-    }
-  }
   .active\:text-icon-action-critical-secondary-active {
     &:active {
       color: var(--color-icon-action-critical-secondary-active);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.124",
+  "version": "0.0.125",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Button.tsx

@@ -146,14 +146,11 @@ export const Button = ({
     clsx(
       colorClassName?.trim()
         ? colorClassName
-        : "text-text-on-action-primary-normal",
+        : "text-text-action-primary-normal",
       "bg-transparent",
-      "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
-      // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
-      "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
-      // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
-      "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
-      // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
+      "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
+      "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
+      "active:bg-background-action-secondary-active active:text-text-action-primary-active",
       "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
       "flex-col",
       paddingUsingComponentGap,
@@ -198,6 +195,7 @@ export const Button = ({
       onClick={props.onClick}
       disabled={disabled}
       href={href}
+      data-theme={variant === "navigation" ? "brand" : undefined}
     >
       {leftIcon && leftIcon}
 

package/src/components/DataGridCell.tsx

@@ -170,6 +170,7 @@ export const DataGridCell = memo(
         className={clsx("flex h-10", !width && "flex-1")}
         style={{ width }}
         {...props}
+        data-theme={type === "header" && !locked ? "brand" : undefined}
       >
         <div
           className={cellClasses}
@@ -253,6 +254,10 @@ export function DataCellHeader<T>({
     whiteSpace: "nowrap",
     width: header.column.getSize(),
     "--color-text-primary-normal": "var(--color-text-brand-primary-normal)",
+    "--color-icon-on-action-primary-normal":
+      "var(--color-text-brand-primary-normal)",
+    "--background-action-secondary-normal":
+      "var(--color-text-brand-primary-normal)",
     ...props.style,
   };
 
@@ -450,7 +455,8 @@ export function DraggableCellHeader<T extends Record<string, any>>({
     whiteSpace: "nowrap",
     zIndex: isDragging ? 1 : 0,
     width: header.column.getSize(),
-    "--color-text-primary-normal": "var(--color-neutral-000)",
+    "--color-text-primary-normal": "var(--color-action-000)",
+    "--color-icon-on-action-primary-normal": "var(--color-action-000)",
     userSelect: "none",
   };