デザインチームは、モダンなウェブ標準により近づけるために、Foundationテーマに小規模ながら強力な変更/調整を加えています。これらの変更をmetaでライブで確認するには、このグループに参加してください。
https://meta.discourse.org/g/modernized-foundation
これらの変更は、Discourseで利用可能になる新しいUpcoming Changes機能を通じてライブ化されます。これにより、サイト所有者は、テーマや現在のカスタマイズを壊す可能性を恐れることなく、指定したグループに対して変更を有効にし、変更のロールアウトをテストできるようになります。
変更点
ヘッダーの高さが縮小
画面の表示領域を有効活用するため、ヘッダーのサイズと一部のアイコンおよびアバターをわずかに縮小しました。
デフォルトボタン
デフォルトのボタンの背景をグレーから、枠線付きの透明/「セカンダリ」の背景に変更します。
- グレーの背景を削除
- 枠線の追加
- アイコンの色をテキストの色に合わせる
- ボタンに固定の高さを設定
トピック一覧ページの「新しいトピックを作成」ボタン
Horizonと合わせて、「CTA」（Call to Action）の背景色をtertiaryに変更します。
多くのグレーの背景の削除
トピック一覧
- 3pxの太い上部ボーダーの削除
- テーブルヘッダーデータのフォントサイズを縮小
- テーブルデータ項目の色の統一
- 既読/未読を示す色の値の変更
- 未読のフォントウェイトをわずかに増加
カテゴリ
- テキストの左揃え
- 太い左側のカラーボーダーの削除
- バッジの角をわずかに丸くする
- ボックスのボーダーを細くする
ナビゲーションバー
- トピック一覧ページのナビゲーションピルが、この領域のボタンと同じ高さになります
- 選択キットのテキストとアイコンの色を濃くする
サイドバー
- アイコンとテキストの色を一致させる
- テキストとアイコンを濃くする
- アクティブ時の背景を明るくする
- アクティブ時のフォントウェイトを太くする
ウェルカムバナー
- スペースのバランス調整
- カスタマイズによる左右/中央揃えを容易にするための変数の追加
- ヘッダーのフォントウェイトを減少
- サブタイトルのフォントサイズを縮小
カレンダー
- 「ボタン」からグレーの背景を削除
- グレーは「アクティブ」を示すためにのみ使用
- 「枠線付き透明」ボタンのスタイルに変更
ドロップダウン
- ドロップダウンコンテナにパディングを追加
- 高さ、パディング、間隔をサイドバーの項目と一致させる
- 「クリック可能なリスト」の統一
- ボーダーが
--d-border-radius変数を継承する
新しい変数
ここでの変更の一部は、コアに追加される追加の変数を通じて導入されます。
ウェルカムバナーの配置
ウェルカムバナーの配置は、以下を通じて変更できるようになります。
// デフォルト
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// カスタム
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
ボタンの高さ
ボタンの高さは、以下を通じて固定されるようになります。
// デフォルト
--button-height: var(--space-8);
フォントスムージング
Horizonでは既に行われていますが、Foundationにも導入するのは理にかなっています。
// 新しいデフォルト
--webkit-font-smoothing: antialiased;
