Bootstrap のバージョンアップに伴うデザイン修正

[nanasess]

概要(Overview・Refs Issue)

Fixes #6095
Bootstrap 5.1.3 の button-variant を移植

方針(Policy)

Bootstrap 5.2 から CSS variables に変更されたため、Bootstrap 5.1.3 の button-variant を移植することで互換性を維持する

実装に関する補足(Appendix)

Bootstrap 5.2 から CSS variables を使用して、カスタマイズするように変更された。
https://getbootstrap.com/docs/5.3/migration/#more-css-variables
その影響で、 button-variant の実装が大幅に変更され、従来どおりの色指定ができなくなってしまった模様
https://github.com/twbs/bootstrap/blob/edf9c40956d19e6ab3f9151bfe0dfac6be06fa21/scss/mixins/_buttons.scss#L7-L60

フロント側の scss は、 bootstrap のカラーテーマを使用しておらず、 mixin の仕組みのみ流用している。
今回影響を受けたのは button-variant のみなので、 Bootstrap 5.1.3 の button-variant を移植すれば問題ない
https://github.com/twbs/bootstrap/blob/1a6fdfae6be09b09eaced8f0e442ca6f7680a61e/scss/mixins/_buttons.scss#L7-L74

管理画面側は、 bootstrap のカラーテーマをそのまま流用しているため影響無いはず。

テスト（Test)

各所のボタンが正常に表示されるのを確認

相談（Discussion）

本質的には CSS variables を使用してカスタマイズした方が良い。そうすれば scss のコンパイルも必要無くなり、 minify も有効に活用できる

マイナーバージョン互換性保持のための制限事項チェックリスト

• 既存機能の仕様変更はありません
• フックポイントの呼び出しタイミングの変更はありません
• フックポイントのパラメータの削除・データ型の変更はありません
• twigファイルに渡しているパラメータの削除・データ型の変更はありません
• Serviceクラスの公開関数の、引数の削除・データ型の変更はありません
• 入出力ファイル(CSVなど)のフォーマット変更はありません

レビュワー確認項目

• 動作確認
• コードレビュー
• E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
• 互換性が保持されているか
• セキュリティ上の問題がないか
  • 権限を超えた操作が可能にならないか
  • 不要なファイルアップロードがないか
  • 外部へ公開されるファイルや機能の追加ではないか
  • テンプレートでのエスケープ漏れがないか

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 82.77%. Comparing base (ebec3e1) to head (adecb27).

Additional details and impacted files

@@           Coverage Diff           @@
##              4.3    #6133   +/-   ##
=======================================
  Coverage   82.77%   82.77%           
=======================================
  Files         480      480           
  Lines       26062    26062           
=======================================
  Hits        21573    21573           
  Misses       4489     4489           

Flag	Coverage Δ
E2E	82.77% <ø> (ø)
Unit	82.77% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.