Next.js Site

デザインシステム - 色の確認

globals.cssで設定された色とスタイルのサンプル

セクション要素

このセクションは --color-surface の背景色と--color-border のボーダー色を使用しています。

これは --color-surface-2 の背景色を使用したネストした要素です。

リンク要素 (aタグ)

通常のリンク: これは通常のリンクです

ホバー状態: ホバーすると色が変わります

訪問済みリンク: 訪問済みリンクの色

使用色: --link, --link-hover, --link-visited

コード要素

インラインコード: const example = "Hello World";

// ブロックコードの例
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

使用色: --color-code-bg (背景), --text (テキスト)

プライマリ色とアクセント色

プライマリ色

プライマリ色 (--color-primary)

フォーカスリング色 (--ring-primary)

アクセント色

アクセント色 (--color-accent)

テキスト色

通常のテキスト (--text)

ミュートされたテキスト (--text-muted)

背景色: --color-surface-2

フォーム要素

テキスト選択

以下のテキストを選択して、セレクション色を確認してください:

このテキストを選択すると、--selection-bg と --selection-fg の色が表示されます。 選択されたテキストの背景色と文字色が設定されています。

スクロールバー

以下の要素をスクロールして、カスタムスクロールバーの色を確認してください:

スクロールバーのサンプルテキスト 1

スクロールバーのサンプルテキスト 2

スクロールバーのサンプルテキスト 3

スクロールバーのサンプルテキスト 4

スクロールバーのサンプルテキスト 5

スクロールバーのサンプルテキスト 6

スクロールバーのサンプルテキスト 7

スクロールバーのサンプルテキスト 8

スクロールバーのサンプルテキスト 9

スクロールバーのサンプルテキスト 10

スクロールバーのサンプルテキスト 11

スクロールバーのサンプルテキスト 12

スクロールバーのサンプルテキスト 13

スクロールバーのサンプルテキスト 14

スクロールバーのサンプルテキスト 15

スクロールバーのサンプルテキスト 16

スクロールバーのサンプルテキスト 17

スクロールバーのサンプルテキスト 18

スクロールバーのサンプルテキスト 19

スクロールバーのサンプルテキスト 20

スクロールバー背景: --color-surface-2
スクロールバーサム: --color-primary

フォーカス状態

以下の要素をクリックして、フォーカスリングの色を確認してください:

フォーカス可能なリンク

フォーカスリング色: --ring-primary