lucentia-ui 0.2.8 → 0.2.10

package/README.md

@@ -1,3 +1,9 @@
 # lucentia-ui
 
 React UI design token and component system based on neumorphism, featuring two color themes: light and dark.
+
+---
+
+Not stable until version 1.00
+
+---

package/dist/components/Button/types.d.ts

@@ -1,5 +1,8 @@
+import type React from "react";
+export type ButtonVariant = "ghost" | "primary" | "secondary" | "danger";
+export type ButtonSize = "sm" | "md";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "ghost" | "primary" | "secondary" | "danger";
-    size?: "sm" | "md";
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     fullWidth?: boolean;
 }

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.d.ts

@@ -1,3 +1 @@
-import React from "react";
-import type { ThemeSwitchProps } from "./types";
-export declare const ThemeSwitch: React.FC<ThemeSwitchProps>;
+export declare function ThemeSwitch(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.js

@@ -1,17 +1,9 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../ThemeProvider";
 import styles from "./ThemeSwitch.module.css";
-import clsx from "clsx";
-export const ThemeSwitch = ({ checked, defaultChecked, onChange, onCheckedChange, disabled = false, id, name, className, }) => {
-    const handleChange = (e) => {
-        if (disabled)
-            return;
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(e.target.checked);
-    };
-    return (_jsxs("label", { className: clsx(styles.themeSwitch, className), style: {
-            opacity: disabled ? 0.6 : 1,
-            cursor: disabled ? "not-allowed" : "pointer",
-        }, children: [_jsx("input", { type: "checkbox", id: id, name: name, 
-                // CSS Modules側のクラス名と一致させる（styles.input もしくは styles.themeSwitchCheckbox）
-                className: styles.themeSwitchCheckbox, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange }), _jsx("span", { className: styles.slider, children: _jsxs("span", { className: styles.circle, children: [[...Array(8)].map((_, i) => (_jsx("span", { className: clsx(styles.shine, styles[`shine-${i + 1}`]) }, i))), _jsx("span", { className: styles.moon })] }) })] }));
-};
+export function ThemeSwitch() {
+    const { theme, toggleTheme } = useTheme();
+    const isDark = theme === "dark";
+    return (_jsxs("label", { className: styles.switch, children: [_jsx("input", { type: "checkbox", checked: isDark, onChange: toggleTheme, "aria-label": "Toggle theme" }), _jsx("span", { className: styles.slider, children: _jsxs("span", { className: styles.circle, children: [Array.from({ length: 8 }).map((_, i) => (_jsx("span", { className: `${styles.shine} ${styles[`shine${i + 1}`]}` }, i))), _jsx("span", { className: styles.moon })] }) })] }));
+}

package/dist/components/Extra/ThemeSwitch/ThemeSwitch.module.css

@@ -1,98 +1,112 @@
-.themeSwitch {
-  font-size: 18px;
-  position: relative;
-  display: inline-block;
-  width: 3.5em;
-  height: 2em;
+/* The switch - the box around the slider */
+.switch {
+    font-size: 17px;
+    position: relative;
+    display: inline-block;
+    width: 4.8em;
+    height: 2.4em;
 }
 
-/* input単体にスタイルを当てる */
-.input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
 }
 
+/* The slider */
 .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #333;
-  transition: 0.4s;
-  border-radius: 30px;
-  overflow: hidden;
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: var(--color-surface-container);
+    box-shadow: var(--shadow-md-in);
+    transition: 0.4s;
+    border-radius: 30px;
+    overflow: hidden;
 }
 
 .circle {
-  position: absolute;
-  height: 1.4em;
-  width: 1.4em;
-  border-radius: 20px;
-  left: 0.3em;
-  bottom: 0.3em;
-  background-color: #fff000;
-  transition: 0.4s;
+    position: absolute;
+    height: 1.2em;
+    width: 1.2em;
+    border-radius: 20px;
+    left: 1em;
+    bottom: 0.7em;
+    background-color: var(--color-primary);
+    transition: 0.4s;
 }
 
-/* ThemeSwitch.module.css */
+/* checked state */
+.switch input:checked+.slider .circle {
+    transform: translateX(1.5em);
+}
 
-/* inputのクラス名をTSXと合わせる */
-.themeSwitchCheckbox {
-  opacity: 0;
-  width: 0;
-  height: 0;
-  position: absolute;
+.switch input:checked+.slider .circle .shine {
+    transform: translate(0%, 0%);
 }
 
-/* チェック時の隣接セレクタを調整 */
-.themeSwitchCheckbox:checked + .slider .circle {
-  transform: rotate(0deg) translateX(1.5em) !important;
+.switch input:checked+.slider .circle .moon {
+    left: -10%;
+    opacity: 1;
+    transform: translateY(-60%);
 }
 
-.themeSwitchCheckbox:checked + .slider .circle .shine {
-  transform: translate(0%, 0%) !important;
+/* Moon */
+.moon {
+    position: absolute;
+    left: -100%;
+    top: 50%;
+    opacity: 0;
+    background-color: var(--color-surface-container);
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 99999px;
+    transform: translateY(-50%);
+    transition: all 0.4s;
 }
 
-.themeSwitchCheckbox:checked + .slider .circle .moon {
-  left: -10%;
-  opacity: 1;
-  transform: translateY(-60%);
+/* Shine */
+.shine {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.25rem;
+    height: 0.25rem;
+    background-color: var(--color-primary);
+    border-radius: 1rem;
+    transition: all 0.4s;
 }
 
-.moon {
-  position: absolute;
-  left: -100%;
-  top: 50%;
-  opacity: 0;
-  background-color: #333;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 99999px;
-  transform: translateY(-50%);
-  transition: all 0.4s;
+/* Individual shine positions */
+.shine1 {
+    transform: translate(-50%, -375%);
 }
 
-.shine {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0.25rem;
-  height: 0.25rem;
-  background-color: #fff000;
-  border-radius: 1rem;
-  transition: all 0.4s;
-}
-
-/* 個別のshine配置 */
-.shine-1 { transform: translate(-50%, -375%); }
-.shine-2 { transform: translate(175%, -275%); }
-.shine-3 { transform: translate(275%, -50%); }
-.shine-4 { transform: translate(175%, 175%); }
-.shine-5 { transform: translate(-50%, 275%); }
-.shine-6 { transform: translate(-275%, 175%); }
-.shine-7 { transform: translate(-375%, -50%); }
-.shine-8 { transform: translate(-275%, -275%); }
+.shine2 {
+    transform: translate(175%, -275%);
+}
+
+.shine3 {
+    transform: translate(275%, -50%);
+}
+
+.shine4 {
+    transform: translate(175%, 175%);
+}
+
+.shine5 {
+    transform: translate(-50%, 275%);
+}
+
+.shine6 {
+    transform: translate(-275%, 175%);
+}
+
+.shine7 {
+    transform: translate(-375%, -50%);
+}
+
+.shine8 {
+    transform: translate(-275%, -275%);
+}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { IconButtonProps } from "./types";
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import clsx from "clsx";
+import styles from "./IconButton.module.css";
+export const IconButton = React.forwardRef((props, ref) => {
+    const { icon, children, variant = "ghost", size = "md", className, ...rest } = props;
+    // a11y guard (dev only)
+    if (process.env.NODE_ENV !== "production" &&
+        !children &&
+        !rest["aria-label"]) {
+        console.warn("IconButton: icon-only usage requires `aria-label`.");
+    }
+    return (_jsxs("button", { ref: ref, className: clsx(styles.iconButton, styles[variant], styles[size], {
+            [styles.iconOnly]: !children,
+            [styles.withText]: !!children,
+        }, className), ...rest, children: [_jsx("span", { className: styles.icon, children: icon }), children && _jsx("span", { className: styles.text, children: children })] }));
+});
+IconButton.displayName = "IconButton";

package/dist/components/IconButton/IconButton.module.css

@@ -0,0 +1,154 @@
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: fit-content;
+  height: fit-content;
+  font-family: var(--font);
+  font-weight: var(--font-weight-medium);
+  border: 2px solid transparent;
+  cursor: pointer;
+
+  border-radius: var(--radius-sm);
+
+  transition:
+    box-shadow 0.2s ease,
+    opacity 0.2s ease,
+    background 0.25s ease-in-out,
+    color 0.25s ease;
+}
+
+
+
+/* ===== Variant ===== */
+.ghost {
+  background: var(--color-surface);
+  color: var(--color-on-surface);
+}
+.ghost:hover:not(:disabled) {
+  background: var(--color-surface-container);
+}
+
+
+.primary {
+  background: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}
+
+.sm.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 2px var(--color-primary),
+    0 0 4px var(--color-primary);
+}
+
+.md.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 4px var(--color-primary),
+    0 0 8px var(--color-primary);
+}
+
+.md.primary:hover:not(:disabled) {
+  border: 2px solid var(--color-primary);
+  box-shadow:
+    0 0 4px var(--color-primary),
+    0 0 8px var(--color-primary);
+}
+
+.secondary {
+  background: var(--color-secondary-container);
+  color: var(--color-on-secondary-container);
+}
+
+.sm.secondary:hover:not(:disabled) {
+  border: 2px solid var(--color-secondary);
+  box-shadow:
+    0 0 2px var(--color-secondary),
+    0 0 4px var(--color-secondary);
+}
+
+.md.secondary:hover:not(:disabled) {
+  border: 2px solid var(--color-secondary);
+  box-shadow:
+    0 0 4px var(--color-secondary),
+    0 0 8px var(--color-secondary);
+}
+
+
+.danger {
+  background: var(--color-error-container);
+  color: var(--color-on-error-container);
+}
+
+.sm.danger:hover:not(:disabled) {
+  border: 2px solid var(--color-error);
+  box-shadow:
+    0 0 2px var(--color-error),
+    0 0 4px var(--color-error);
+}
+
+.md.danger:hover:not(:disabled) {
+  border: 2px solid var(--color-error);
+  box-shadow:
+    0 0 4px var(--color-error),
+    0 0 8px var(--color-error);
+}
+
+.md.danger:active:not(:disabled) {
+  box-shadow: none;
+}
+
+
+/* ===== Size ===== */
+
+.sm {
+  padding: var(--space-xs) var(--space-lg);
+  font-size: var(--font-size-14);
+  box-shadow: var(--shadow-sm);
+}
+
+.md {
+  padding: var(--space-sm) var(--space-2xl);
+  font-size: var(--font-size-16);
+  box-shadow: var(--shadow-md);
+}
+
+/* icon-only */
+.sm.iconOnly {
+  padding: var(--space-xs) var(--space-md);
+}
+
+.md.iconOnly {
+  padding: var(--space-sm) var(--space-md);
+}
+
+
+
+.icon {
+  display: inline-flex;
+}
+
+.text {
+  white-space: nowrap;
+}
+
+
+
+/* ===== State ===== */
+
+.sm.iconButton:active:not(:disabled),
+.md.iconButton:active:not(:disabled),
+.iconButton[data-state="pressed"] {
+  box-shadow: none;
+}
+
+.iconButton:focus-visible {
+  outline: none;
+}
+
+.iconButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/components/IconButton/IconButton.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "./IconButton";
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Default: Story;
+export declare const State: Story;
+export declare const Variants: Story;
+export declare const Sizes: Story;

package/dist/components/IconButton/IconButton.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton } from "./IconButton";
+// Storybook only
+import { HomeIcon } from "../../icons/Home";
+const meta = {
+    title: "Components/IconButton",
+    component: IconButton,
+    args: {
+        children: "IconButton",
+        variant: "ghost",
+        size: "md",
+    },
+    argTypes: {
+        variant: {
+            control: "radio",
+            options: ["ghost", "primary", "secondary", "danger"],
+            description: "Buttonの表示バリエーション",
+        },
+        size: {
+            control: "radio",
+            options: ["sm", "md"],
+            description: "Buttonのサイズ",
+        },
+        disabled: {
+            control: "boolean",
+            description: "無効状態",
+        },
+        onClick: {
+            action: "clicked",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost" }),
+};
+export const State = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", children: "Default" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", style: { background: "var(--color-surface-container)" }, "data-state": "pressed", children: "Pressed" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", disabled: true, children: "Disabled" })] })),
+};
+export const Variants = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "ghost", children: "Ghost" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "primary", children: "Primary" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "secondary", children: "Secondary" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), variant: "danger", children: "Danger" })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 32,
+        }, children: [_jsx(IconButton, { icon: _jsx(HomeIcon, { size: 20 }), size: "sm", children: "Small" }), _jsx(IconButton, { icon: _jsx(HomeIcon, {}), size: "md", children: "Medium" })] })),
+};

package/dist/components/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./IconButton";
+export * from "./types";

package/dist/components/IconButton/index.js

@@ -0,0 +1,2 @@
+export * from "./IconButton";
+export * from "./types";

package/dist/components/IconButton/types.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { ButtonVariant, ButtonSize } from "../Button/types";
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Icon element (required) */
+    icon: React.ReactNode;
+    /** Optional text */
+    children?: React.ReactNode;
+    /** Inherit from Button */
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** icon-only の場合に必須 */
+    "aria-label"?: string;
+}

package/dist/components/IconButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,7 +1,8 @@
 import type { Theme } from "./types";
-type ThemeProviderProps = {
-    theme?: Theme;
+type Props = {
+    defaultTheme?: Theme;
+    persist?: boolean;
     children: React.ReactNode;
 };
-export declare function ThemeProvider({ theme, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ defaultTheme, persist, children, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,5 +1,26 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import styles from "./ThemeProvider.module.css";
-export function ThemeProvider({ theme = "light", children, }) {
-    return (_jsx("div", { className: `${styles.theme} ${theme === "dark" ? styles.dark : styles.light}`, children: children }));
+import { useEffect, useState, useCallback } from "react";
+import { ThemeContext } from "./context";
+export function ThemeProvider({ defaultTheme = "light", persist = false, children, }) {
+    const [theme, setTheme] = useState(defaultTheme);
+    // 初期化
+    useEffect(() => {
+        if (!persist)
+            return;
+        const stored = localStorage.getItem("theme");
+        if (stored)
+            setTheme(stored);
+    }, [persist]);
+    // html[data-theme] 反映 + 永続化
+    useEffect(() => {
+        document.documentElement.dataset.theme = theme;
+        if (persist) {
+            localStorage.setItem("theme", theme);
+        }
+    }, [theme, persist]);
+    const toggleTheme = useCallback(() => {
+        setTheme((prev) => (prev === "dark" ? "light" : "dark"));
+    }, []);
+    return (_jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: children }));
 }

package/dist/components/ThemeProvider/context.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from "./types";
+export type ThemeContextValue = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+};
+export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;

package/dist/components/ThemeProvider/context.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const ThemeContext = createContext(null);

package/dist/components/ThemeProvider/index.d.ts

@@ -1,2 +1,3 @@
 export { ThemeProvider } from "./ThemeProvider";
+export { useTheme } from "./useTheme";
 export type { Theme } from "./types";

package/dist/components/ThemeProvider/index.js

@@ -1 +1,2 @@
 export { ThemeProvider } from "./ThemeProvider";
+export { useTheme } from "./useTheme";

package/dist/components/ThemeProvider/useTheme.d.ts

@@ -0,0 +1 @@
+export declare function useTheme(): import("./context").ThemeContextValue;

package/dist/components/ThemeProvider/useTheme.js

@@ -0,0 +1,10 @@
+"use client";
+import { useContext } from "react";
+import { ThemeContext } from "./context";
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used within ThemeProvider");
+    }
+    return ctx;
+}

package/dist/components/ThemeProvider/useThemeStorage.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from "./types";
+export declare function useThemeStorage(theme: Theme): void;

package/dist/components/ThemeProvider/useThemeStorage.js

@@ -0,0 +1,7 @@
+"use client";
+import { useEffect } from "react";
+export function useThemeStorage(theme) {
+    useEffect(() => {
+        localStorage.setItem("theme", theme);
+    }, [theme]);
+}

package/dist/icons/Home.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface IconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+}
+export declare const HomeIcon: React.FC<IconProps>;
+export default HomeIcon;

package/dist/icons/Home.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HomeIcon = ({ size = 24, color = "currentColor", className = "", }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M13.5 14H10.5C9.94772 14 9.5 14.4477 9.5 15V20.5C9.5 21.0523 9.05228 21.5 8.5 21.5H4C3.44772 21.5 3 21.0523 3 20.5V10.931C3 10.6559 3.11335 10.3929 3.31338 10.204L11.3134 2.64848C11.6988 2.28449 12.3012 2.28449 12.6866 2.64848L20.6866 10.204C20.8866 10.3929 21 10.6559 21 10.931V20.5C21 21.0523 20.5523 21.5 20 21.5H15.5C14.9477 21.5 14.5 21.0523 14.5 20.5V15C14.5 14.4477 14.0523 14 13.5 14Z", fill: "currentColor" }) }));
+};
+export default HomeIcon;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/Checkbox";
 export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
+export * from "./components/IconButton";
 export * from "./components/Textarea";
 export * from "./components/Typography";
 export * from "./components/Select";

package/dist/index.js

@@ -6,6 +6,7 @@ export * from "./components/Checkbox";
 export * from "./components/Divider";
 export * from "./components/Radio";
 export * from "./components/Input";
+export * from "./components/IconButton";
 export * from "./components/Textarea";
 export * from "./components/Typography";
 export * from "./components/Select";

package/dist/styles/base.css

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

package/dist/styles/font.css

@@ -1,23 +1,28 @@
 @font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
+    font-family: "Noto Sans JP";
+    src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
+    font-family: "Noto Sans JP";
+    src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
-  font-family: "Noto Sans JP";
-  src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
+    font-family: "Noto Sans JP";
+    src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
 }
+
+
+:root{
+    --font: "Noto Sans JP", sans-serif;
+}

package/dist/styles/styles.css

@@ -0,0 +1,10 @@
+/* styles.css */
+
+/* 1. tokens  */
+@import "./tokens.css";
+
+/* 2. base */
+@import "./base.css";
+
+/* 3. font */
+@import "./font.css";

package/dist/styles/tokens.css

@@ -0,0 +1,133 @@
+:root {
+    /* font */
+    --font-size-12: 12px;
+    --font-size-14: 14px;
+    --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;
+
+    --line-tight: 1.2;
+    --line-snug: 1.35;
+    --line-normal: 1.6;
+
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+    --font-weight-black: 700;
+
+    /* ===== Radius ===== */
+    --radius-xs: 4px;
+    --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-sm: 16px;
+    --gap-md: 32px;
+    --gap-lg: 64px;
+
+    /* ===== Layout ===== */
+    --container: 1120px;
+
+    /* ===== 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);
+
+    --color-shadow-l: rgba(255, 255, 255, 1);
+    --color-shadow-d: rgba(0, 0, 0, 0.2);
+
+    /* ===== Effect ===== */
+    --blur: blur(8px);
+
+    --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-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);
+
+    --shadow-surface-lg:
+        0px 4px 16px 8px var(--color-shadow-d);
+}
+
+
+
+html[data-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: #2b3a38bf;
+    --color-on-surface: #dde4e3;
+    --color-on-surface-variant: #dde4e380;
+    --color-surface-container: #262d2d;
+
+    --color-border: #889392;
+    --color-scrim: rgba(0, 0, 0, 0.25);
+
+    --color-shadow-l: rgba(255, 255, 255, 0.25);
+    --color-shadow-d: rgba(0, 0, 0, 1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucentia-ui",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "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",