Fix/form page section design

[totocalcio]

issue

https://github.com/vuejs-jp/vuefes-2024-backside/issues/140

1. ラベルのフォントカラーが違う（実装は#000、デザインはvue-blue）
2. フォーム部分のborderの有無（実装はあり、デザインはなし）
3. 同ドロップシャドウ（実装は0 0 2px #35495e、デザインはもっと異なる）
4. placeholderのフォントカラーが違う
5. 背景画像が違う

1,2,4はすでに修正済みのため3,5を対応。

作業内容

3. 同ドロップシャドウ（実装は0 0 2px #35495e、デザインはもっと異なる）

Figma

• box-shadowのカスタムプロパティ名をFigma上のトークン名と合わせる
  • もともと--box-shadow を使用しているコンポーネントはなかったので削除
    • Buttonコンポーネント内で同名で使用されていたが、コンポーネント内で定義したカスタムプロパティを参照していた。
    • 今回の修正に合わせてグローバルで定義したカスタムプロパティを参照するように修正。
  • --box-shadow-inputを--box-shadow-buttonに変更
  • --box-shadow-cardを新規追加
• box-shadowの値を修正
  • issueの時よりあとで修正は入っていたが、数値がFigmaと異なっていたため対応
• 直接box-shadowを定義していたコンポーネントは、カスタムプロパティを参照するように変更

5. 背景画像が違う

Figma

• 最背面に#fffを定義
• Figmaで定義されている画像とグラデーションを適用

影響確認

• LinkButtonコンポーネント使用箇所
  • ローカルサーバー上、及びNetlifyのデプロイページで確認
• Buttonコンポーネント
  • 現在公開ページで使用されている箇所はないためStorybook上で確認

確認事項

• 背景画像はFigmaでタイルとして定義されていたため繰り返しとして設定。
• レスポンシブの設定はしておらずサイズは1040✗901固定。

修正前

修正後

[netlify]

✅ Deploy Preview for vuefes-2024 ready!

Name	Link
🔨 Latest commit	f6bd2eb
🔍 Latest deploy log	https://app.netlify.com/sites/vuefes-2024/deploys/662fb928127d2e00085e0502
😎 Deploy Preview	https://deploy-preview-130--vuefes-2024.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jiyuujin]

Thanks, LGTM