merge develop into main

README.md

@@ -33,6 +33,7 @@ npm install @digital-go-jp/tailwind-theme-plugin
 
 | Figma のバージョン | パッケージのバージョン |
 | ------------------ | ---------------- |
+| 2.0.4              | 0.2.1            |
 | 2.0.3              | 0.2.0            |
 | 2.0.2              | 0.1.17           |
 | 2.0.1              | 0.1.16           |

examples/README.md

@@ -3,11 +3,11 @@
 ## セットアップ
 
 ```
-sh setup.sh
+$ npm install
 ```
 
 ## 実行
 
 ```
-npm run dev
+$ npm run dev
 ```

examples/package.json

@@ -17,13 +17,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.14",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   }
 }

examples/src/elevation/ElevationSection.tsx

@@ -6,35 +6,35 @@ export const ElevationSection = () => {
       </div>
       <div className='flex flex-wrap gap-8'>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-1'} />
+          <div className={'h-32 w-32 shadow-1'} />
           <span className='text-dns-14N-130'>Style 1</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-2'} />
+          <div className={'h-32 w-32 shadow-2'} />
           <span className='text-dns-14N-130'>Style 2</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-3'} />
+          <div className={'h-32 w-32 shadow-3'} />
           <span className='text-dns-14N-130'>Style 3</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-4'} />
+          <div className={'h-32 w-32 shadow-4'} />
           <span className='text-dns-14N-130'>Style 4</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-5'} />
+          <div className={'h-32 w-32 shadow-5'} />
           <span className='text-dns-14N-130'>Style 5</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-6'} />
+          <div className={'h-32 w-32 shadow-6'} />
           <span className='text-dns-14N-130'>Style 6</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-7'} />
+          <div className={'h-32 w-32 shadow-7'} />
           <span className='text-dns-14N-130'>Style 7</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 shadow-8'} />
+          <div className={'h-32 w-32 shadow-8'} />
           <span className='text-dns-14N-130'>Style 8</span>
         </div>
       </div>

examples/src/radius/RadiusSection.tsx

@@ -6,23 +6,31 @@ export const RadiusSection = () => {
       </div>
       <div className='flex flex-wrap gap-8'>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 bg-solid-gray-400'} />
+          <div className={'h-32 w-32 bg-solid-gray-400'} />
           <span className='text-dns-14N-130'>none</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 bg-solid-gray-400 rounded-8'} />
+          <div className={'h-32 w-32 bg-solid-gray-400 rounded-4'} />
+          <span className='text-dns-14N-130'>4px</span>
+        </div>
+        <div className='flex flex-col gap-2'>
+          <div className={'h-32 w-32 bg-solid-gray-400 rounded-8'} />
           <span className='text-dns-14N-130'>8px</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 bg-solid-gray-400 rounded-16'} />
+          <div className={'h-32 w-32 bg-solid-gray-400 rounded-16'} />
           <span className='text-dns-14N-130'>16px</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 bg-solid-gray-400 rounded-32'} />
+          <div className={'h-32 w-32 bg-solid-gray-400 rounded-24'} />
+          <span className='text-dns-14N-130'>24px</span>
+        </div>
+        <div className='flex flex-col gap-2'>
+          <div className={'h-32 w-32 bg-solid-gray-400 rounded-32'} />
           <span className='text-dns-14N-130'>32px</span>
         </div>
         <div className='flex flex-col gap-2'>
-          <div className={'h-14 w-14 bg-solid-gray-400 rounded-full'} />
+          <div className={'h-32 w-32 bg-solid-gray-400 rounded-full'} />
           <span className='text-dns-14N-130'>full</span>
         </div>
       </div>

examples/tailwind-theme-plugin/index.d.ts

@@ -0,0 +1,5 @@
+declare const daPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config>;
+};
+export default daPlugin;