lucentia-ui 0.1.6 → 0.1.7

package/README.md

@@ -37,6 +37,7 @@ export default function App() {
 }
 ```
 
+
 ## 利用可能なテーマ
 
 ```ts
@@ -47,6 +48,16 @@ type Theme = "light" | "dark";
 <ThemeProvider theme="dark">
 ```
 
+## 追加CSSのFont.css、Base.cssの導入は任意
+- `base` : reset, box-sizing, typography base, color tokens
+- `font` : Noto Sans JP font-face definitions
+
+```tsx
+import "lucentia-ui/styles/base";
+import "lucentia-ui/styles/font";
+```
+
+
 ### 2.コンポーネントをそのまま使う
 
 ```tsx
@@ -63,10 +74,9 @@ export default function Example() {
 }
 ```
 
-- 追加の CSS import は不要
 - ThemeProvider 配下であればスタイルは自動適用
 
-### なぜ ThemeProvider が必要なのか？
+### ThemeProvider は必須
 
 lucentia-ui のコンポーネントは
 CSS Variables（Design Tokens） に依存しています。
@@ -86,7 +96,7 @@ ThemeProvider は：
 
 という役割を持ちます。
 
-### テーマ切り替え例
+### テーマ切り替え例(Next.js)
 
 ```tsx
 import { useState } from "react";
@@ -105,6 +115,8 @@ export default function App() {
 }
 ```
 
+
+
 ## コンポーネント設計方針
 
 - **HTML ネイティブ要素を尊重**
@@ -122,9 +134,9 @@ export default function App() {
 - Input
 - Select
 - Switch
+- Textarea
 - Modal
 
-詳細は **Storybook** を参照してください。
 
 ---
 

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

@@ -16,6 +16,10 @@
   background: var(--color-surface-container);
   color: var(--color-on-surface);
 }
+.default:hover:not(:disabled) {
+  border: 2px solid var(--color-border);
+  box-shadow: 0 0 4px var(--color-border), 0 0 8px var(--color-border);
+}
 
 .primary {
   background: var(--color-primary-container);
@@ -52,7 +56,7 @@
 .sm {
   padding: var(--space-xs) var(--space-lg);
   font-size: 0.875rem;
-    box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-sm);
 }
 
 .md {
@@ -73,6 +77,6 @@
 }
 
 .button:disabled {
-  opacity: 0.25;
+  opacity: 0.5;
   cursor: not-allowed;
 }

package/dist/components/{Modal → Feedback/Modal}/Modal.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { Modal } from "./Modal";
-import { Button } from "../Button/Button";
+import { Button } from "../../Button/Button";
 const meta = {
     title: "Components/Feedback/Modal",
     component: Modal,
@@ -10,6 +10,11 @@ export default meta;
 export const Default = {
     render: () => {
         const [open, setOpen] = useState(false);
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal" }), _jsx(Modal, { open: open, onClose: () => setOpen(false), children: _jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 32 }, children: [_jsx("h2", { children: "Modal Title" }), _jsx("p", { children: "This is a modal content." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close" })] }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Modal" }), _jsx(Modal, { open: open, onClose: () => setOpen(false), children: _jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            gap: 32,
+                        }, children: [_jsx("h2", { children: "Modal Title" }), _jsx("p", { children: "This is a modal content." }), _jsx(Button, { onClick: () => setOpen(false), children: "Close" })] }) })] }));
     },
 };

package/dist/components/Input/Input.module.css

@@ -4,8 +4,6 @@
   border-radius: var(--radius-sm);
   border: 2px solid var(--color-surface);
   outline: none;
-  box-shadow: var(--shadow-md-in);
-
   background: var(--color-surface-container);
   color: var(--color-on-surface);
 
@@ -18,6 +16,17 @@
   border: 2px solid var(--color-primary);
 }
 
+
+/* ===== Readonly ===== */
+.input:read-only:not(:disabled)  {
+  box-shadow: none;
+  cursor: text;
+}
+
+.input:read-only:not(:disabled) :focus {
+  border: 2px solid var(--color-surface);
+}
+
 /* ===== Error ===== */
 .error {
   border: 2px solid var(--color-error);
@@ -31,12 +40,13 @@
 
 /* ===== size ===== */
 .sm {
-  padding: var(--space-sm) var(--space-md);
   font-size: 0.875rem;
+  padding: var(--space-sm) var(--space-md);
   box-shadow: var(--shadow-sm-in);
 }
 
 .md {
-  padding: var(--space-md) var(--space-lg);
   font-size: 1rem;
+  padding: var(--space-md) var(--space-lg);
+  box-shadow: var(--shadow-md-in);
 }

package/dist/components/Input/Input.stories.js

@@ -12,7 +12,12 @@ export const Default = {
 };
 export const State = {
     render: () => {
-        return (_jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 32 }, children: [_jsx(Input, { placeholder: "Default State", state: "default" }), _jsx(Input, { placeholder: "Error State", state: "error" }), _jsx(Input, { placeholder: "Disabled State", disabled: true })] }));
+        return (_jsxs("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: 32,
+            }, children: [_jsx(Input, { placeholder: "Default State", state: "default" }), _jsx(Input, { placeholder: "Error State", state: "error" }), _jsx(Input, { placeholder: "Readonly State", readOnly: true }), _jsx(Input, { placeholder: "Disabled State", disabled: true })] }));
     },
 };
 export const Size = {

package/dist/components/Textarea/Textarea.module.css

@@ -24,6 +24,16 @@
   border: 2px solid var(--color-error);
 }
 
+/* ===== Readonly ===== */
+.textarea:read-only {
+  box-shadow: none;
+  cursor: text;
+}
+
+.textarea:read-only:focus {
+  border: 2px solid var(--color-surface);
+}
+
 /* ===== Disabled ===== */
 .textarea:disabled {
   opacity: 0.5;

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

@@ -58,11 +58,11 @@
   /* ===== Effect ===== */
   --blur: blur(8px);
 
-  --shadow-sm: -1px -1px 2px 1px var(--color-shadow-l),
-    1px 1px 2px 1px var(--color-shadow-d);
+  --shadow-sm: -2px -2px 2px 1px var(--color-shadow-l),
+    2px 2px 2px 1px var(--color-shadow-d);
 
-  --shadow-sm-in: inset -2px -2px 2px var(--color-shadow-l),
-    inset 2px 2px 2px var(--color-shadow-d);
+  --shadow-sm-in: inset -2px -2px 2px 1px var(--color-shadow-l),
+    inset 2px 2px 2px 1px var(--color-shadow-d);
 
   --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
     2px 2px 4px 2px var(--color-shadow-d);
@@ -98,7 +98,7 @@
   --color-on-surface-variant: #dde4e380;
   --color-surface-container: #262d2d;
 
-  --color-border: #4b5251;
+  --color-border: #889392;
   --color-scrim: rgba(0, 0, 0, 0.25);
 
   --color-shadow-l: rgba(255, 255, 255, 0.25);
@@ -107,14 +107,14 @@
   /* ===== Effect ===== */
   --blur: blur(8px);
 
-  --shadow-sm: -1px -1px 2px 1px var(--color-shadow-l),
-    1px 1px 2px 1px var(--color-shadow-d);
+  --shadow-sm: -2px -2px 2px 1px var(--color-shadow-l),
+    2px 2px 2px 1px var(--color-shadow-d);
 
-  --shadow-sm-in: inset -2px -2px 2px var(--color-shadow-l),
-    inset 2px 2px 2px var(--color-shadow-d);
+  --shadow-sm-in: inset -2px -2px 2px 1px var(--color-shadow-l),
+    inset 2px 2px 2px 1px var(--color-shadow-d);
 
   --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
-    2px 2px 4px 4px var(--color-shadow-d);
+    2px 2px 4px 2px var(--color-shadow-d);
 
   --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
     inset 4px 4px 4px var(--color-shadow-d);

package/dist/index.d.ts

@@ -7,4 +7,4 @@ export * from "./components/Input";
 export * from "./components/Textarea";
 export * from "./components/Select";
 export * from "./components/Switch";
-export * from "./components/Modal";
+export * from "./components/Feedback/Modal";

package/dist/index.js

@@ -8,4 +8,4 @@ export * from "./components/Input";
 export * from "./components/Textarea";
 export * from "./components/Select";
 export * from "./components/Switch";
-export * from "./components/Modal";
+export * from "./components/Feedback/Modal";

package/dist/styles/base.css

@@ -0,0 +1,107 @@
+/* ------------------------------
+   Reset / Base
+   ------------------------------ */
+
+/* box-sizing を全要素に適用 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* マージン・パディングをリセット */
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+/* html / body 基本設定 */
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  line-height: 1.5;
+  font-family: var(--font, system-ui, -apple-system, sans-serif);
+  color: var(--color-on-background, #161d1d);
+  background-color: var(--color-background, #f4fbfa);
+  padding: 0;
+}  
+
+/* リスト */
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* リンク */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* 画像・メディア */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* フォーム要素 */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+}
+
+/* button */
+button {
+  cursor: pointer;
+}
+
+/* textarea */
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-on-surface-variant, #161D1D80);
+  opacity: 1;
+}
+
+
+/* テーブル */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* アクセシビリティ */
+:focus-visible {
+  outline: 2px solid var(--color-primary, #00a1a1);
+  outline-offset: 2px;
+}

package/dist/styles/font.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "Noto Sans JP";
-  src: url("/fonts/NotoSansJP-Regular.woff2") format("woff2");
+  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -8,7 +8,7 @@
 
 @font-face {
   font-family: "Noto Sans JP";
-  src: url("/fonts/NotoSansJP-Medium.woff2") format("woff2");
+  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
@@ -16,7 +16,7 @@
 
 @font-face {
   font-family: "Noto Sans JP";
-  src: url("/fonts/NotoSansJP-Bold.woff2") format("woff2");
+  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
   font-display: swap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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",
@@ -8,7 +8,9 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./styles/base": "./dist/styles/base.css",
+    "./styles/font": "./dist/styles/font.css"
   },
   "files": [
     "dist",

package/dist/styles/reset.css

@@ -1,106 +0,0 @@
-/* ------------------------------
-   Reset / Base
-   ------------------------------ */
-
-/* box-sizing を全要素に適用 */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* マージン・パディングをリセット */
-html,
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-  padding: 0;
-}
-
-/* html / body 基本設定 */
-html {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-body {
-  line-height: 1.5;
-  font-family: var(--font, system-ui, -apple-system, sans-serif);
-  color: var(--color-text, #000);
-  background-color: var(--color-background, #fff);
-}
-
-/* リスト */
-ul,
-ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* リンク */
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* 画像・メディア */
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-/* フォーム要素 */
-button,
-input,
-select,
-textarea {
-  font: inherit;
-  color: inherit;
-  background: none;
-  border: none;
-  outline: none;
-}
-
-/* button */
-button {
-  cursor: pointer;
-}
-
-/* textarea */
-textarea {
-  resize: vertical;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-on-surface-variant, #161D1D80);
-  opacity: 1;
-}
-
-
-/* テーブル */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* アクセシビリティ */
-:focus-visible {
-  outline: 2px solid var(--color-primary, #00a1a1);
-  outline-offset: 2px;
-}

package/dist/styles/tokens/index.css

@@ -1,2 +0,0 @@
-@import "./theme-light.css";
-@import "./theme-dark.css";

package/dist/styles/tokens/theme-dark.css

@@ -1,58 +0,0 @@
-.theme.dark {
-  --color-primary: #80d5d4;
-  --color-on-primary: #003737;
-  --color-primary-container: #004f4f;
-  --color-on-primary-container: #9cf1f0;
-
-  --color-secondary: #b0cccb;
-  --color-on-secondary: #1b3534;
-  --color-secondary-container: #324b4b;
-  --color-on-secondary-container: #cce8e7;
-
-  --color-error: #ffb4ab;
-  --color-on-error: #690005;
-  --color-error-container: #93000a;
-  --color-on-error-container: #ffdad6;
-
-  --color-background: #2b3a38;
-  --color-on-background: #dde4e3;
-
-  --color-surface: #1a2120bf;
-  --color-on-surface: #dde4e3;
-
-  --color-surface-container: #262d2d;
-  --color-border: #4b5251;
-  --color-scrim: rgba(0, 0, 0, 0.1);
-
-  --color-shadow-l: rgba(255, 255, 255, 0.25);
-  --color-shadow-d: rgba(0, 0, 0, 1);
-
-  --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
-    2px 2px 4px 4px var(--color-shadow-d);
-
-  --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
-    inset 4px 4px 4px var(--color-shadow-d);
-
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
-    4px 4px 16px 8px var(--color-shadow-d);
-
-  /* ===== Radius ===== */
-  --radius-sm: 8px;
-  --radius-md: 16px;
-  --radius-max: 999px;
-
-  /* ===== Space ===== */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 12px;
-  --space-lg: 16px;
-  --space-xl: 24px;
-  --space-2xl: 32px;
-  --space-3xl: 48px;
-  --space-4xl: 64px;
-  --space-5xl: 96px;
-  --gap: 32px;
-
-  /* ===== Layout ===== */
-  --container: 1120px;
-}

package/dist/styles/tokens/theme-light.css

@@ -1,65 +0,0 @@
-.theme.light {
-  /* font */
-  --font: "Noto Sans JP", sans-serif;
-
-  /* ===== Color ===== */
-  --color-primary: #00a1a1;
-  --color-on-primary: #ffffff;
-  --color-primary-container: #9cf1f0;
-  --color-on-primary-container: #004f4f;
-
-  --color-secondary: #7b9695;
-  --color-on-secondary: #ffffff;
-  --color-secondary-container: #cce8e7;
-  --color-on-secondary-container: #324b4b;
-
-  --color-error: #ff5449;
-  --color-on-error: #ffffff;
-  --color-error-container: #ffdad6;
-  --color-on-error-container: #93000a;
-
-  --color-background: #f4fbfa;
-  --color-on-background: #161d1d;
-
-  --color-surface: #f4fbfabf;
-  --color-on-surface: #161d1d;
-  --color-surface-container: #e9efeebf;
-
-  --color-border: #bbcccc;
-  --color-scrim: rgba(129, 129, 129, 0.25);
-
-  /* ===== Effect ===== */
-  --blur: blur(8px);
-
-  --color-shadow-l: rgba(255, 255, 255, 1);
-  --color-shadow-d: rgba(0, 0, 0, 0.2);
-
-  --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
-    2px 2px 4px 2px var(--color-shadow-d);
-
-  --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
-    inset 4px 4px 4px var(--color-shadow-d);
-
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
-    4px 4px 16px 8px var(--color-shadow-d);
-
-  /* ===== Radius ===== */
-  --radius-sm: 8px;
-  --radius-md: 16px;
-  --radius-max: 999px;
-
-  /* ===== Space ===== */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 12px;
-  --space-lg: 16px;
-  --space-xl: 24px;
-  --space-2xl: 32px;
-  --space-3xl: 48px;
-  --space-4xl: 64px;
-  --space-5xl: 96px;
-  --gap: 32px;
-
-  /* ===== Layout ===== */
-  --container: 1120px;
-}

package/dist/styles/tokens.css

@@ -1,107 +0,0 @@
-:root {
-  /* font */
-  --font: "Noto Sans JP", sans-serif;
-
-  /* ===== Color ===== */
-  --color-primary: #00a1a1;
-  --color-on-primary: #ffffff;
-  --color-primary-container: #9cf1f0;
-  --color-on-primary-container: #004f4f;
-
-  --color-secondary: #7b9695;
-  --color-on-secondary: #ffffff;
-  --color-secondary-container: #cce8e7;
-  --color-on-secondary-container: #324b4b;
-
-  --color-error: #ff5449;
-  --color-on-error: #ffffff;
-  --color-error-container: #ffdad6;
-  --color-on-error-container: #93000a;
-
-  --color-background: #f4fbfa;
-  --color-on-background: #161d1d;
-
-  --color-surface: #f4fbfabf;
-  --color-on-surface: #161d1d;
-  --color-on-surface-variant: #161d1d80;
-  --color-surface-container: #e9efeebf;
-
-  --color-border: #bbcccc;
-  --color-scrim: rgba(129, 129, 129, 0.25);
-
-  /* ===== Effect ===== */
-  --blur: blur(8px);
-
-  --color-shadow-l: rgba(255, 255, 255, 1);
-  --color-shadow-d: rgba(0, 0, 0, 0.2);
-
-  --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
-    2px 2px 4px 2px var(--color-shadow-d);
-
-  --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
-    inset 4px 4px 4px var(--color-shadow-d);
-
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
-    4px 4px 16px 8px var(--color-shadow-d);
-
-  /* ===== Radius ===== */
-  --radius-sm: 8px;
-  --radius-md: 16px;
-  --radius-max: 999px;
-
-  /* ===== Space ===== */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 12px;
-  --space-lg: 16px;
-  --space-xl: 24px;
-  --space-2xl: 32px;
-  --space-3xl: 48px;
-  --space-4xl: 64px;
-  --space-5xl: 96px;
-  --gap: 32px;
-
-  /* ===== Layout ===== */
-  --container: 1120px;
-}
-
-.dark {
-  --color-primary: #80d5d4;
-  --color-on-primary: #003737;
-  --color-primary-container: #004f4f;
-  --color-on-primary-container: #9cf1f0;
-
-  --color-secondary: #b0cccb;
-  --color-on-secondary: #1b3534;
-  --color-secondary-container: #324b4b;
-  --color-on-secondary-container: #cce8e7;
-
-  --color-error: #ffb4ab;
-  --color-on-error: #690005;
-  --color-error-container: #93000a;
-  --color-on-error-container: #ffdad6;
-
-  --color-background: #2b3a38;
-  --color-on-background: #dde4e3;
-
-  --color-surface: #1a2120bf;
-  --color-on-surface: #dde4e3;
-  --color-on-surface-variant: #dde4e380;
-  --color-surface-container: #262d2d;
-
-  --color-border: #4b5251;
-
-  --color-shadow-l: rgba(255, 255, 255, 0.25);
-  --color-shadow-d: rgba(0, 0, 0, 1);
-
-  --shadow-md: -2px -2px 4px 2px var(--color-shadow-l),
-    2px 2px 4px 4px var(--color-shadow-d);
-
-  --shadow-md-in: inset -4px -4px 4px var(--color-shadow-l),
-    inset 4px 4px 4px var(--color-shadow-d);
-
-  --shadow-lg: -4px -4px 16px 8px var(--color-shadow-l),
-    4px 4px 16px 8px var(--color-shadow-d);
-
-  --color-scrim: rgba(0, 0, 0, 0.1);
-}