@povio/ui 2.1.8 → 2.1.10

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -80,7 +80,7 @@ const BottomSheetBase = ({
         /* @__PURE__ */ jsx(
           motion.div,
           {
-            className: "pointer-events-none absolute inset-0 bg-elevation-fill-default-3/80",
+            className: "pointer-events-none absolute inset-0 bg-support-overlay",
             animate: { opacity: 1 },
             initial: { opacity: 0 },
             exit: { opacity: 0 }

package/dist/components/overlays/Modal/Modal.js

@@ -4,8 +4,9 @@ import { ModalOverlay, Modal as Modal$1, Dialog } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { modalOverlay, modalMain, modalContent } from "./modal.cva.js";
+import { modalMain, modalContent, modalOverlay } from "./modal.cva.js";
 import { ns } from "../../../config/i18n.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 const Modal = ({
   isOpen,
   portalContainerRef,
@@ -18,11 +19,15 @@ const Modal = ({
   isDismissable = true
 }) => {
   const { t } = useTranslation(ns);
+  const uiStyle = UIStyle.useConfig();
+  const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
+  const modalContentCva = uiStyle?.modal?.contentCva ?? modalContent;
+  const modalOverlayCva = uiStyle?.modal?.overlayCva ?? modalOverlay;
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
       UNSTABLE_portalContainer: portalContainerRef?.current,
-      className: modalOverlay({ aside }),
+      className: modalOverlayCva({ aside }),
       isDismissable,
       isOpen,
       shouldCloseOnInteractOutside: () => {
@@ -33,7 +38,7 @@ const Modal = ({
           onClose();
         }
       },
-      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMain({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
+      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMainCva({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContentCva({ aside, className: modalClassName }), children: [
         showCloseIcon && /* @__PURE__ */ jsx(
           InlineIconButton,
           {

package/dist/components/overlays/Modal/modal.cva.js

@@ -20,7 +20,7 @@ const modalContent = cva(
   }
 );
 const modalOverlay = cva(
-  ["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-elevation-fill-default-3/80"],
+  ["fixed inset-0 z-10 flex h-(--visual-viewport-height) w-screen overflow-y-auto bg-support-overlay"],
   {
     variants: {
       aside: {

package/dist/config/uiStyle.context.d.ts

@@ -7,6 +7,7 @@ import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
+import { ModalVariantProps } from '../components/overlays/Modal/modal.cva';
 import { TooltipPointerHorizontalVariantProps, TooltipPointerVerticalVariantProps, TooltipTextVariantProps, TooltipVariantProps } from '../components/overlays/Tooltip/tooltip.cva';
 import { AlertVariantProps } from '../components/status/Alert/alert.cva';
 import { ToastVariantProps } from '../components/status/Toast/toast.cva';
@@ -82,6 +83,11 @@ export declare namespace UIStyle {
             pointerVerticalCva?: Cva<TooltipPointerVerticalVariantProps>;
             textCva?: Cva<TooltipTextVariantProps>;
         };
+        modal: {
+            contentCva?: Cva<ModalVariantProps>;
+            overlayCva?: Cva<ModalVariantProps>;
+            mainCva?: Cva<ModalVariantProps>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",