lucentia-ui 0.2.3 → 0.2.5

package/dist/components/Button/Button.module.css

@@ -1,4 +1,6 @@
 .button {
+  width: fit-content;
+  height: fit-content;
   font-family: var(--font);
   font-weight: var(--font-weight-medium);
   border: 2px solid transparent;
@@ -107,6 +109,7 @@
 .md.button:active:not(:disabled),
 .button[data-state="pressed"] {
   box-shadow: none;
+  background: var(--color-surface-container);
 }
 
 .button:focus-visible {

package/dist/components/Feedback/Modal/Modal.js

@@ -2,15 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import styles from "./Modal.module.css";
-export const Modal = ({ open, onClose, children }) => {
+export const Modal = ({ open, onClose, children, className, }) => {
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
     }, []);
+    // 🔒 背景スクロールロック
+    useEffect(() => {
+        if (!open)
+            return;
+        const originalOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = originalOverflow;
+        };
+    }, [open]);
     if (!open || !mounted)
         return null;
     const modalRoot = document.getElementById("modal-root");
     if (!modalRoot)
         return null;
-    return createPortal(_jsx("div", { className: styles.overlay, onClick: onClose, children: _jsx("div", { className: styles.modal, onClick: (e) => e.stopPropagation(), children: children }) }), modalRoot);
+    return createPortal(_jsx("div", { className: styles.overlay, onClick: onClose, children: _jsx("div", { className: [styles.modal, className].filter(Boolean).join(" "), onClick: (e) => e.stopPropagation(), children: children }) }), modalRoot);
 };

package/dist/components/Feedback/Modal/Modal.module.css

@@ -10,11 +10,10 @@
 }
 
 .modal {
-  background: var(--color-surface);
+  background: var(--color-background);
   color: var(--color-on-surface);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  padding: var(--space-lg);
+  box-shadow: var(--shadow-surface-lg);
+  padding: var(--space-2xl);
   min-width: 320px;
-  max-width: 90vw;
 }

package/dist/components/Feedback/Modal/Modal.stories.js

@@ -14,7 +14,7 @@ export const Default = {
                             display: "flex",
                             flexDirection: "column",
                             alignItems: "center",
-                            gap: 32,
+                            gap: 48,
                         }, children: [_jsx("h2", { children: "Modal Title" }), _jsx("p", { children: "This is a modal content." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close" })] }) })] }));
     },
 };

package/dist/components/Feedback/Modal/types.d.ts

@@ -3,4 +3,5 @@ export type ModalProps = {
     open: boolean;
     onClose?: () => void;
     children: ReactNode;
+    className?: string;
 };

package/dist/components/ThemeProvider/ThemeProvider.module.css

@@ -15,6 +15,7 @@
   --font-size-16: 16px;
   --font-size-18: 18px;
   --font-size-20: 20px;
+  --font-size-24: 24px;
   --font-size-28: 28px;
   --font-size-40: 40px;
   --font-size-48: 48px;
@@ -29,6 +30,7 @@
   --font-weight-black: 700;
 
   /* ===== Radius ===== */
+  --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-max: 999px;
@@ -102,6 +104,9 @@
   --shadow-lg:
     -4px -4px 16px 8px var(--color-shadow-l),
     4px 4px 16px 8px var(--color-shadow-d);
+
+  --shadow-surface-lg:
+    0px 4px 16px 8px var(--color-shadow-d);
 }
 
 .dark {

package/dist/components/Typography/typography.module.css

@@ -21,13 +21,13 @@
 .heading-lg {
   font-size: var(--font-size-24);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
 }
 
 .heading-md {
   font-size: var(--font-size-20);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
 }
 
 .heading-sm {
@@ -39,7 +39,7 @@
 .heading-xs {
   font-size: var(--font-size-16);
   line-height: var(--line-snug);
-  font-weight: var(--font-weight-mideum);
+  font-weight: var(--font-weight-medium);
 }
 
 /* ========================================

package/dist/styles/font.css

@@ -21,11 +21,3 @@
   font-style: normal;
   font-display: swap;
 }
-
-@font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Black.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "React UI design token and component system based on neumorphism, featuring two color themes: light and dark.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",