Feature/theme (#22)

* 🩹 chore: (components) include source files

* ✨ feat: (components) feat: include preset themes

.changeset/khaki-planets-talk.md

@@ -0,0 +1,5 @@
+---
+"@x7ddf74479jn5/psui": patch
+---
+
+chore: include source files

.changeset/orange-bobcats-shout.md

@@ -0,0 +1,5 @@
+---
+"@x7ddf74479jn5/psui": minor
+---
+
+✨ feat: include preset themes

README.md

@@ -37,4 +37,16 @@ module.exports = {
 };
 ```
 
-3. CSS変数をグローバルcssファイルに追加します。[Concepts/Colors](https://x7ddf74479jn5.github.io/psui/?path=/docs/concepts-colors--docs)を参考にしてください。
+3. グローバルcssファイルを編集します。
+
+プリセットテーマ *(default, bubblegum, gunmetal)* を使う場合は下記のようにインポートします。
+
+```css
+@import url("@x7ddf74479jn5/psui/dist/themes/default.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+自分でテーマを作成する場合は[Concepts/Colors](https://x7ddf74479jn5.github.io/psui/?path=/docs/concepts-colors--docs)を参考にしてください。

packages/components/README.md

@@ -38,4 +38,16 @@ module.exports = {
 };
 ```
 
-3. CSS変数をグローバルcssファイルに追加します。[Concepts/Colors](https://x7ddf74479jn5.github.io/psui/?path=/docs/concepts-colors--docs)を参考にしてください。
+3. グローバルcssファイルを編集します。
+
+プリセットテーマ *(default, bubblegum, gunmetal)* を使う場合は下記のようにインポートします。
+
+```css
+@import url("@x7ddf74479jn5/psui/dist/themes/default.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+自分でテーマを作成する場合は[Concepts/Colors](https://x7ddf74479jn5.github.io/psui/?path=/docs/concepts-colors--docs)を参考にしてください。

packages/components/docs/themeing.mdx

@@ -4,7 +4,19 @@ import { Meta } from "@storybook/blocks";
 
 # Themeing
 
-PSUI は、Tailwind で美しいライト＆ダークモードやマルチテーマ対応を設定する最も簡単な方法です！
+PSUI は、Tailwind で美しいライト＆ダークモードやマルチテーマ対応を設定する最も簡単な方法です！すぐに使えるようにプリセットのテーマも同梱されています。
+
+## Quick Start
+
+グローバル css ファイルを編集します。プリセットテーマ _(default, bubblegum, gunmetal)_ を使うには下記のようにインポートします。
+
+```css
+@import url("@x7ddf74479jn5/psui/dist/themes/default.css");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
 
 ## PSUI における Theme の仕組み
 

packages/components/package.json

@@ -23,19 +23,29 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "license": "MIT",
   "sideEffects": [
-    "**/*.css"
+    "*.css"
   ],
   "files": [
-    "dist/**"
+    "dist",
+    "src",
+    "!src/**/*.stories.tsx"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsc -p tsconfig.build.json && vite build && pnpm cpx",
+    "dev": "vite --watch",
+    "cpx": "npx cpx -C 'src/themes/*.css' 'dist/themes'",
     "lint": "eslint \"src/*.{ts,tsx}\" --cache",
     "lint:fix": "eslint --fix \"src/*.{ts,tsx}\" --cache",
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
@@ -55,6 +65,7 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react": "4.0.3",
     "@x7ddf74479jn5/tw-plugin-psui": "workspace:*",
     "autoprefixer": "10.4.14",
     "eslint": "^8.44.0",
@@ -67,7 +78,6 @@
     "tailwind-config": "workspace:*",
     "tailwindcss": "3.3.2",
     "tsconfig": "workspace:*",
-    "tsup": "7.1.0",
     "typescript": "^5.1.6",
     "vite": "4.3.9"
   },

packages/components/src/themes/bubblegum.css

@@ -0,0 +1,54 @@
+@layer base {
+  :root {
+    --base: hsl(180, 98%, 50%);
+    --base-focus: hsl(180, 98%, 34%);
+    --base-2: hsl(180, 98%, 46%);
+    --base-2-focus: hsl(180, 98%, 42%);
+    --base-content: hsl(180, 98%, 0%);
+    --base-content-2: hsl(180, 98%, 11%);
+    --base-content-3: hsl(180, 98%, 33%);
+    --overlay: hsl(180, 98%, 43%);
+    --overlay-focus: hsl(180, 98%, 25%);
+    --overlay-2: hsl(180, 98%, 36%);
+    --overlay-2-focus: hsl(180, 98%, 25%);
+    --overlay-content: hsl(180, 98%, 0%);
+    --overlay-content-2: hsl(180, 98%, 11%);
+    --overlay-content-3: hsl(180, 98%, 22%);
+    --line: hsl(180, 98%, 41.2%);
+    --line-focus: hsl(180, 98%, 26.2%);
+    --input: hsl(180, 98%, 53.3%);
+    --input-focus: hsl(180, 98%, 53.3%);
+    --input-content: hsl(180, 98%, 0%);
+    --input-content-2: hsl(180, 98%, 22%);
+    --primary: hsl(309, 100%, 61%);
+    --primary-focus: hsl(309, 100%, 55.5%);
+    --primary-subtle: hsl(309, 100%, 88.5%);
+    --primary-content: hsl(309, 100%, 100%);
+    --primary-subtle-content: hsl(309, 100%, 0%);
+    --secondary: hsl(227, 88%, 50%);
+    --secondary-focus: hsl(227, 88%, 44.5%);
+    --secondary-subtle: hsl(227, 88%, 77.5%);
+    --secondary-subtle-content: hsl(227, 88%, 0%);
+    --secondary-content: hsl(227, 88%, 100%);
+    --info: hsl(212, 50%, 40%);
+    --info-focus: hsl(212, 50%, 34.5%);
+    --info-subtle: hsl(212, 50%, 67.5%);
+    --info-subtle-content: hsl(212, 50%, 0%);
+    --info-content: hsl(212, 50%, 100%);
+    --danger: hsl(0, 75%, 42%);
+    --danger-focus: hsl(0, 75%, 36.5%);
+    --danger-subtle: hsl(0, 75%, 69.5%);
+    --danger-subtle-content: hsl(0, 75%, 0%);
+    --danger-content: hsl(0, 75%, 100%);
+    --success: hsl(159, 61%, 41%);
+    --success-focus: hsl(159, 61%, 35.5%);
+    --success-subtle: hsl(159, 61%, 16%);
+    --success-subtle-content: hsl(159, 61%, 100%);
+    --success-content: hsl(159, 61%, 0%);
+    --warning: hsl(49, 95%, 53%);
+    --warning-focus: hsl(49, 95%, 47.5%);
+    --warning-subtle: hsl(49, 95%, 28%);
+    --warning-subtle-content: hsl(49, 95%, 100%);
+    --warning-content: hsl(49, 95%, 0%);
+  }
+}

packages/components/src/themes/default.css

@@ -0,0 +1,54 @@
+@layer base {
+  :root {
+    --base: hsl(60, 5%, 96%);
+    --base-focus: hsl(60, 5%, 80%);
+    --base-2: hsl(60, 5%, 92%);
+    --base-2-focus: hsl(60, 5%, 88%);
+    --base-content: hsl(60, 5%, 8%);
+    --base-content-2: hsl(60, 5%, 19%);
+    --base-content-3: hsl(60, 5%, 41%);
+    --overlay: hsl(60, 5%, 89%);
+    --overlay-focus: hsl(60, 5%, 71%);
+    --overlay-2: hsl(60, 5%, 82%);
+    --overlay-2-focus: hsl(60, 5%, 71%);
+    --overlay-content: hsl(60, 5%, 8%);
+    --overlay-content-2: hsl(60, 5%, 19%);
+    --overlay-content-3: hsl(60, 5%, 30%);
+    --line: hsl(60, 5%, 87.2%);
+    --line-focus: hsl(60, 5%, 72.2%);
+    --input: hsl(60, 5%, 99.3%);
+    --input-focus: hsl(60, 5%, 99.3%);
+    --input-content: hsl(60, 5%, 14.3%);
+    --input-content-2: hsl(60, 5%, 36.3%);
+    --primary: hsl(41, 100%, 51%);
+    --primary-focus: hsl(41, 100%, 45.5%);
+    --primary-subtle: hsl(41, 100%, 78.5%);
+    --primary-content: hsl(41, 100%, 0%);
+    --primary-subtle-content: hsl(41, 100%, 0%);
+    --secondary: hsl(200, 97%, 41%);
+    --secondary-focus: hsl(200, 97%, 35.5%);
+    --secondary-subtle: hsl(200, 97%, 68.5%);
+    --secondary-subtle-content: hsl(200, 97%, 0%);
+    --secondary-content: hsl(200, 97%, 100%);
+    --info: hsl(212, 50%, 40%);
+    --info-focus: hsl(212, 50%, 34.5%);
+    --info-subtle: hsl(212, 50%, 67.5%);
+    --info-subtle-content: hsl(212, 50%, 0%);
+    --info-content: hsl(212, 50%, 100%);
+    --danger: hsl(0, 75%, 42%);
+    --danger-focus: hsl(0, 75%, 36.5%);
+    --danger-subtle: hsl(0, 75%, 69.5%);
+    --danger-subtle-content: hsl(0, 75%, 0%);
+    --danger-content: hsl(0, 75%, 100%);
+    --success: hsl(159, 61%, 41%);
+    --success-focus: hsl(159, 61%, 35.5%);
+    --success-subtle: hsl(159, 61%, 16%);
+    --success-subtle-content: hsl(159, 61%, 100%);
+    --success-content: hsl(159, 61%, 0%);
+    --warning: hsl(49, 95%, 53%);
+    --warning-focus: hsl(49, 95%, 47.5%);
+    --warning-subtle: hsl(49, 95%, 28%);
+    --warning-subtle-content: hsl(49, 95%, 100%);
+    --warning-content: hsl(49, 95%, 0%);
+  }
+}

packages/components/src/themes/gunmetal.css

@@ -0,0 +1,55 @@
+@layer base {
+  :root {
+    --base: hsl(120, 2%, 10%);
+    --base-focus: hsl(120, 2%, 27.6%);
+    --base-2: hsl(120, 2%, 14.4%);
+    --base-2-focus: hsl(120, 2%, 18.8%);
+    --base-content: hsl(120, 2%, 100%);
+    --base-content-2: hsl(120, 2%, 90%);
+    --base-content-3: hsl(120, 2%, 70%);
+    --overlay: hsl(120, 2%, 17.7%);
+    --overlay-focus: hsl(120, 2%, 37.5%);
+    --overlay-2: hsl(120, 2%, 25.4%);
+    --overlay-2-focus: hsl(120, 2%, 37.5%);
+    --overlay-content: hsl(120, 2%, 100%);
+    --overlay-content-2: hsl(120, 2%, 90%);
+    --overlay-content-3: hsl(120, 2%, 80%);
+    --line: hsl(120, 2%, 1.2%);
+    --line-focus: hsl(120, 2%, 17.7%);
+    --input: hsl(120, 2%, 13.3%);
+    --input-focus: hsl(120, 2%, 13.3%);
+    --input-content: hsl(120, 2%, 100%);
+    --input-content-2: hsl(120, 2%, 80%);
+    --primary: hsl(180, 21%, 74%);
+    --primary-focus: hsl(180, 21%, 68.5%);
+    --primary-subtle: hsl(180, 21%, 100%);
+    --primary-content: hsl(180, 21%, 0%);
+    --primary-content-inverse: hsl(180, 21%, 100%);
+    --primary-subtle-content: hsl(180, 21%, 5%);
+    --secondary: hsl(0, 0%, 40%);
+    --secondary-focus: hsl(0, 0%, 34.5%);
+    --secondary-subtle: hsl(0, 0%, 67.5%);
+    --secondary-subtle-content: hsl(0, 0%, 0%);
+    --secondary-content: hsl(0, 0%, 100%);
+    --info: hsl(212, 50%, 40%);
+    --info-focus: hsl(212, 50%, 34.5%);
+    --info-subtle: hsl(212, 50%, 67.5%);
+    --info-subtle-content: hsl(212, 50%, 0%);
+    --info-content: hsl(212, 50%, 100%);
+    --danger: hsl(0, 75%, 42%);
+    --danger-focus: hsl(0, 75%, 36.5%);
+    --danger-subtle: hsl(0, 75%, 69.5%);
+    --danger-subtle-content: hsl(0, 75%, 0%);
+    --danger-content: hsl(0, 75%, 100%);
+    --success: hsl(159, 61%, 41%);
+    --success-focus: hsl(159, 61%, 35.5%);
+    --success-subtle: hsl(159, 61%, 16%);
+    --success-subtle-content: hsl(159, 61%, 100%);
+    --success-content: hsl(159, 61%, 0%);
+    --warning: hsl(49, 95%, 53%);
+    --warning-focus: hsl(49, 95%, 47.5%);
+    --warning-subtle: hsl(49, 95%, 28%);
+    --warning-subtle-content: hsl(49, 95%, 100%);
+    --warning-content: hsl(49, 95%, 0%);
+  }
+}

packages/components/tsconfig.build.json

@@ -1,5 +1,10 @@
 {
   "extends": "tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules", "src/**/*.stories.tsx"],
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  }
 }

packages/components/tsconfig.json

@@ -1,7 +1,6 @@
 {
-  "extends": "./tsconfig.build.json",
+  "extends": "tsconfig/react-library",
   "compilerOptions": {
-    "declaration": false,
-    "declarationMap": false
+    "noEmit": true
   }
 }

packages/components/vite.config.ts

@@ -0,0 +1,25 @@
+import { resolve } from "node:path";
+
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: "dist",
+    emptyOutDir: false,
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["react"],
+      output: {
+        globals: {
+          react: "React",
+        },
+      },
+    },
+  },
+});