initial commit

1 files changed, 343 insertions, 0 deletions

diff --git a/files/ja/tools/devtoolscolors/index.html b/files/ja/tools/devtoolscolors/index.html
new file mode 100644
index 0000000000..fc375c4720
--- /dev/null
+++ b/files/ja/tools/devtoolscolors/index.html
@@ -0,0 +1,343 @@
+---
+title: DevToolsカラー
+slug: Tools/DevToolsColors
+tags:
+  - CSS
+translation_of: Tools/DevToolsColors
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="warning">
+<p>これらの値のいずれかを変更する必要がある場合は、<code>/browser/themes/*/devtools/</code>の中のCSSコードを変更する必要があります。それに応じてDevToolsのバグを報告してください。</p>
+</div>
+
+<p class="summary"><span class="seoSummary">このチャートには、開発者ツールのダークテーマとライトテーマで実装されている色とCSS変数が一覧で表示されています。</span></p>
+
+<table>
+ <thead>
+  <tr>
+   <th> </th>
+   <th>ダークテーマ</th>
+   <th>ライトテーマ</th>
+   <th>CSS 変数</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="3">
+    <h3 id="Chrome_Colors">Chrome Colors</h3>
+   </th>
+   <th> </th>
+  </tr>
+  <tr>
+   <th>タブツールバー</th>
+   <td>
+    <div class="swatch" style="background: #252c33;"> </div>
+
+    <p>#252c33<br>
+     rgba(37, 44, 51, 1)</p>
+   </td>
+   <td>
+    <div class="swatch" style="background: #ebeced;"> </div>
+    #ebeced<br>
+    rgba(235, 236, 237, 1)</td>
+   <td>--theme-tab-toolbar-background</td>
+  </tr>
+  <tr>
+   <th>ツールバー</th>
+   <td>
+    <div class="swatch" style="background: #343c45;"> </div>
+    #343c45<br>
+    rgba(52, 60, 69, 1)</td>
+   <td>
+    <div class="swatch" style="background: #f0f1f2;"> </div>
+    #f0f1f2<br>
+    rgba(240, 241, 242, 1)</td>
+   <td>--theme-toolbar-background</td>
+  </tr>
+  <tr>
+   <th>選択箇所の背景</th>
+   <td>
+    <div class="swatch" style="background: #1d4f73;"> </div>
+    #1d4f73<br>
+    rgba(29, 79, 115, 1)</td>
+   <td>
+    <div class="swatch" style="background: #4c9ed9;"> </div>
+    #4c9ed9<br>
+    rgba(76, 158, 217, 1)</td>
+   <td>--theme-selection-background</td>
+  </tr>
+  <tr>
+   <th>選択したテキストの色</th>
+   <td>
+    <div class="swatch" style="background: #f5f7fa;"> </div>
+    #f5f7fa<br>
+    rgba(245, 247, 250, 1)</td>
+   <td>
+    <div class="swatch" style="background: #f5f7fa;"> </div>
+    #f5f7fa<br>
+    rgba(245, 247, 250, 1)</td>
+   <td>--theme-selection-color</td>
+  </tr>
+  <tr>
+   <th>スプリッタ</th>
+   <td>
+    <div class="swatch" style="background: #000000;"> </div>
+    #000000<br>
+    rgba(0, 0, 0, 1)</td>
+   <td>
+    <div class="swatch" style="background: #aaaaaa;"> </div>
+    #aaaaaa<br>
+    rgba(170, 170, 170, 1)</td>
+   <td>--theme-splitter-color</td>
+  </tr>
+  <tr>
+   <th>コメント</th>
+   <td>
+    <div class="swatch" style="background: #5c6773;"> </div>
+
+    <p>#5c6773<br>
+     rgba(92, 103, 115, 1)</p>
+   </td>
+   <td>
+    <div class="swatch" style="background: #747573;"> </div>
+
+    <p>#747573<br>
+     rgba(116, 117, 115, 1)</p>
+   </td>
+   <td>--theme-comment</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="3">
+    <h3 id="コンテンツの色">コンテンツの色</h3>
+   </th>
+   <th> </th>
+  </tr>
+  <tr>
+   <th>背景 - ボディ</th>
+   <td>
+    <div class="swatch" style="background: #14171a;"> </div>
+    #14171a<br>
+    rgba(17, 19, 21, 1)</td>
+   <td>
+    <div class="swatch" style="background: #fcfcfc;"> </div>
+    #fcfcfc<br>
+    rgba(252, 252, 252, 1)</td>
+   <td>--theme-body-background</td>
+  </tr>
+  <tr>
+   <th>背景 - サイドバー</th>
+   <td>
+    <div class="swatch" style="background: #181d20;"> </div>
+    #181d20<br>
+    rgba(24, 29, 32, 1)</td>
+   <td>
+    <div class="swatch" style="background: #f7f7f7;"> </div>
+    #f7f7f7<br>
+    rgba(247, 247, 247, 1)</td>
+   <td>--theme-sidebar-background</td>
+  </tr>
+  <tr>
+   <th>背景 - 注意</th>
+   <td>
+    <div class="swatch" style="background: #b28025;"> </div>
+    #b28025<br>
+    rgba(178, 128, 37, 1)</td>
+   <td>
+    <div class="swatch" style="background: #e6b064;"> </div>
+    #e6b064<br>
+    rgba(230, 176, 100, 1)</td>
+   <td>--theme-contrast-background</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="3">
+    <h3 id="テキストの色">テキストの色</h3>
+   </th>
+   <th> </th>
+  </tr>
+  <tr>
+   <th>ボディテキスト</th>
+   <td>
+    <div class="swatch" style="background: #8fa1b2;"> </div>
+    #8fa1b2<br>
+    rgba(143, 161, 178, 1)</td>
+   <td>
+    <div class="swatch" style="background: #18191a;"> </div>
+    #18191a<br>
+    rgba(24, 25, 26, 1)</td>
+   <td>--theme-body-color</td>
+  </tr>
+  <tr>
+   <th>フォアグラウンド (テキスト) - グレー</th>
+   <td>
+    <div class="swatch" style="background: #b6babf;"> </div>
+    #b6babf<br>
+    rgba(182, 186, 191, 1)</td>
+   <td>
+    <div class="swatch" style="background: #585959;"> </div>
+    #585959<br>
+    rgba(88, 89, 89, 1)</td>
+   <td>--theme-body-color-alt</td>
+  </tr>
+  <tr>
+   <th>コンテンツ (テキスト) - ハイコントラスト</th>
+   <td>
+    <div class="swatch" style="background: #a9bacb;"> </div>
+    #a9bacb<br>
+    rgba(169, 186, 203, 1)</td>
+   <td>
+    <div class="swatch" style="background: #292e33;"> </div>
+    #292e33<br>
+    rgba(41, 46, 51, 1)</td>
+   <td>--theme-content-color1</td>
+  </tr>
+  <tr>
+   <th>コンテンツ (テキスト) - グレー</th>
+   <td>
+    <div class="swatch" style="background: #8fa1b2;"> </div>
+    #8fa1b2<br>
+    rgba(143, 161, 178, 1)</td>
+   <td>
+    <div class="swatch" style="background: #8fa1b2;"> </div>
+    #8fa1b2<br>
+    rgba(143, 161, 178, 1)</td>
+   <td>--theme-content-color2</td>
+  </tr>
+  <tr>
+   <th>コンテンツ (テキスト) - ダークグレー</th>
+   <td>
+    <div class="swatch" style="background: #667380;"> </div>
+    #667380<br>
+    rgba(102, 115, 128, 1)</td>
+   <td>
+    <div class="swatch" style="background: #667380;"> </div>
+    #667380<br>
+    rgba(102, 115, 128, 1)</td>
+   <td>--theme-content-color3</td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="3">
+    <h3 id="ハイライトカラー">ハイライトカラー</h3>
+   </th>
+   <th> </th>
+  </tr>
+  <tr>
+   <th>青</th>
+   <td>
+    <div class="swatch" style="background: #46afe3;"> </div>
+    #46afe3<br>
+    rgba(70, 175, 227, 1)</td>
+   <td>
+    <div class="swatch" style="background: #0088cc;"> </div>
+    #0088cc<br>
+    rgba(0, 136, 204, 1)</td>
+   <td>--theme-highlight-blue</td>
+  </tr>
+  <tr>
+   <th>紫</th>
+   <td>
+    <div class="swatch" style="background: #6b7abb;"> </div>
+    #6b7abb<br>
+    rgba(107, 122, 187, 1)</td>
+   <td>
+    <div class="swatch" style="background: #5b5fff;"> </div>
+    #5b5fff<br>
+    rgba(91, 95, 255, 1)</td>
+   <td>--theme-highlight-purple</td>
+  </tr>
+  <tr>
+   <th>ピンク</th>
+   <td>
+    <div class="swatch" style="background: #df80ff;"> </div>
+    #df80ff<br>
+    rgba(223, 128, 255, 1)</td>
+   <td>
+    <div class="swatch" style="background: #b82ee5;"> </div>
+    #b82ee5<br>
+    rgba(184, 46, 229, 1)</td>
+   <td>--theme-highlight-pink</td>
+  </tr>
+  <tr>
+   <th>赤</th>
+   <td>
+    <div class="swatch" style="background: #eb5368;"> </div>
+    #eb5368<br>
+    rgba(235, 83, 104, 1)</td>
+   <td>
+    <div class="swatch" style="background: #ed2655;"> </div>
+    #ed2655<br>
+    rgba(237, 38, 85, 1)</td>
+   <td>--theme-highlight-red</td>
+  </tr>
+  <tr>
+   <th>オレンジ</th>
+   <td>
+    <div class="swatch" style="background: #d96629;"> </div>
+    #d96629<br>
+    rgba(217, 102, 41, 1)</td>
+   <td>
+    <div class="swatch" style="background: #f13c00;"> </div>
+    #f13c00<br>
+    rgba(241, 60, 0, 1)</td>
+   <td>--theme-highlight-orange</td>
+  </tr>
+  <tr>
+   <th>ライトオレンジ</th>
+   <td>
+    <div class="swatch" style="background: #d99b28;"> </div>
+    #d99b28<br>
+    rgba(217, 155, 40, 1)</td>
+   <td>
+    <div class="swatch" style="background: #d97e00;"> </div>
+    #d97e00<br>
+    rgba(217, 126, 0, 1)</td>
+   <td>--theme-highlight-lightorange</td>
+  </tr>
+  <tr>
+   <th>緑</th>
+   <td>
+    <div class="swatch" style="background: #70bf53;"> </div>
+    #70bf53<br>
+    rgba(112, 191, 83, 1)</td>
+   <td>
+    <div class="swatch" style="background: #2cbb0f;"> </div>
+    #2cbb0f<br>
+    rgba(44, 187, 15, 1)</td>
+   <td>--theme-highlight-green</td>
+  </tr>
+  <tr>
+   <th>ブルーグレー</th>
+   <td>
+    <div class="swatch" style="background: #5e88b0;"> </div>
+    #5e88b0<br>
+    rgba(94, 136, 176, 1)</td>
+   <td>
+    <div class="swatch" style="background: #0072ab;"> </div>
+    #0072ab<br>
+    rgba(0, 114, 171, 1)</td>
+   <td>--theme-highlight-bluegrey</td>
+  </tr>
+  <tr>
+   <th>黄</th>
+   <td>
+    <div class="swatch" style="background: #ffffb4;"> </div>
+    #ffffb4<br>
+    rgba(255, 255, 180, 1)</td>
+   <td>
+    <div class="swatch" style="background: #ffffb4;"> </div>
+    #ffffb4<br>
+    rgba(255, 255, 180, 1)</td>
+   <td>--theme-highlight-yellow</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="warning">
+<p>まだ修正されていません。進行状況については、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916766">bug 916766</a>を参照してください。</p>
+</div>