the-new-css-resetの導入

.storybook/preview-head.html

@@ -26,5 +26,6 @@
 
   body {
     font-family: Cica, sans-serif;
+    min-height: 100svh;
   }
 </style>

.storybook/preview.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { colors } from '../src/styles/themes.css';
 
 import type { Parameters } from '@storybook/react';
-import 'modern-css-reset/dist/reset.min.css';
+import 'the-new-css-reset/css/reset.css';
 
 export const parameters: Parameters = {
   controls: {

docs/tech.md

@@ -28,7 +28,7 @@
 
 ## スタイリング
 
-- [modern-css-reset](https://github.com/hankchizljaw/modern-css-reset)
+- [the-new-css-reset](https://github.com/elad2412/the-new-css-reset)
 - [vanilla-extract](https://vanilla-extract.style)
   - [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles)
   - [Recipes](https://vanilla-extract.style/documentation/packages/recipes)

package.json

@@ -32,6 +32,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.43.7",
+    "the-new-css-reset": "^1.11.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -70,7 +71,6 @@
     "lint-staged": "^12.1.2",
     "micromatch": "^4.0.5",
     "minimist": "^1.2.8",
-    "modern-css-reset": "^1.4.0",
     "pathpida": "^0.20.1",
     "prettier": "^2.8.3",
     "serve": "^14.2.1",

src/components/base/Textarea/index.stories.tsx

@@ -40,7 +40,9 @@ export const Textarea: Story = {
             <BaseTextarea errors={errors} id="description" register={register} />
           </dd>
         </dl>
-        <button type="submit">Submit</button>
+        <button style={{ color: 'white' }} type="submit">
+          Submit
+        </button>
       </form>
     );
   },

src/components/base/Textbox/index.stories.tsx

@@ -40,7 +40,9 @@ export const Textbox: Story = {
             <BaseTextbox errors={errors} id="title" register={register} />
           </dd>
         </dl>
-        <button type="submit">Submit</button>
+        <button style={{ color: 'white' }} type="submit">
+          Submit
+        </button>
       </form>
     );
   },

src/pages/_app.tsx

@@ -1,5 +1,5 @@
-import 'modern-css-reset/dist/reset.min.css';
 import Head from 'next/head';
+import 'the-new-css-reset/css/reset.css';
 
 import { cica } from '@/styles/font';
 

yarn.lock

@@ -12764,13 +12764,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"modern-css-reset@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "modern-css-reset@npm:1.4.0"
-  checksum: b69603972fd4b5f03ced962c0c6c81447b2f343e33b396e86413501c14a873b20c532337b21fa0a7017a24c37fe134482e3dae36feb549f28bc02bd46adbc40b
-  languageName: node
-  linkType: hard
-
 "mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -13233,7 +13226,6 @@ __metadata:
     lint-staged: "npm:^12.1.2"
     micromatch: "npm:^4.0.5"
     minimist: "npm:^1.2.8"
-    modern-css-reset: "npm:^1.4.0"
     next: "npm:14.0.3"
     pathpida: "npm:^0.20.1"
     prettier: "npm:^2.8.3"
@@ -13243,6 +13235,7 @@ __metadata:
     serve: "npm:^14.2.1"
     sharp: "npm:^0.32.6"
     storybook: "npm:^7.5.3"
+    the-new-css-reset: "npm:^1.11.2"
     ts-node: "npm:^10.9.1"
     typescript: "npm:4.9.5"
     webpack-merge: "npm:^5.9.0"
@@ -15952,6 +15945,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"the-new-css-reset@npm:^1.11.2":
+  version: 1.11.2
+  resolution: "the-new-css-reset@npm:1.11.2"
+  checksum: 2b5e6e7a3d06c2be8e05191a4ac345805740d2df948b6559b5445716147d354ab76f363f98266064a8814192e21850db31250187cb174a43a086150ced4eb829
+  languageName: node
+  linkType: hard
+
 "third-party-web@npm:^0.23.3":
   version: 0.23.3
   resolution: "third-party-web@npm:0.23.3"