<commit_before><header>
  <h1>Color</h1>
  <p>
    Firefox colors are bold, vibrant and attractive. They enhance the experience by providing visual clues and by bringing attention to primary actions.
  </p>
</header>

<section>
  <h2>Firefox Colors</h2>
  <% include ../includes/color/color-palette-primary.html %>
  <% include ../includes/color/color-palette-secondary.html %>
</section>

<section>
  <h2>Palettes</h2>
  <p>
    The color palette includes primary and secondary colors that can be used for interfaces and illustrations.
  </p>
  <p>

  <h3>Blue</h3>
  <p>
    Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop.
  </p>
  <% include ../includes/color/color-blue.html %>

  <h3>Teal</h3>
  <p>
    Firefox Teal is one of our primary colors. We use teal as an attention color.
  </p>
  <% include ../includes/color/color-teal.html %>

  <h3>Magenta</h3>
  <p>
    Firefox Magenta is one of our primary colors. We currently have no common usage for it.
  </p>
  <% include ../includes/color/color-magenta.html %>

  <h3>Green</h3>
  <p>
    Firefox Green is commonly used to indicate success.
  </p>
  <% include ../includes/color/color-green.html %>

  <h3>Yellow</h3>
  <p>
    Firefox Yellow is commonly used for warnings.
  </p>
  <% include ../includes/color/color-yellow.html %>

  <h3>Red</h3>
  <p>
    Firefox Red is commonly used for errors.
  </p>
  <% include ../includes/color/color-red.html %>

  <h3>Purple</h3>
  <p>
    Firefox Purple is commonly used to indicate privacy.
  </p>
  <% include ../includes/color/color-purple.html %>

  <h3>Orange</h3>
  <p>
    Firefox Orange is only used for branding. Do not use it otherwise.
  </p>
  <% include ../includes/color/color-orange.html %>

  <h3>Ink</h3>
  <p>
    Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme).
  </p>
  <% include ../includes/color/color-ink.html %>

  <h3>Grey</h3>
  <p>
     Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme).
  </p>
  <% include ../includes/color/color-grey.html %>

  <h3>White</h3>
  <p>
    We use white for the background of doorhangers or in-content menus.
  </p>
  <% include ../includes/color/color-white.html %>
</section>

<section>
  <h2>Opacity</h2>
  <% include ../includes/color/color-opacity.html %>
</section>

<section>
  <h2>Text and Background Colors</h2>
  <p>
    Visit <a href="typography.html">typography</a> for more information on text color.
  </p>
  <h3>Dark Text on Light Background</h3>
  <% include ../includes/color/color-dark-text-light-background.html %>
  <h3>Light Text on Dark Background</h3>
  <% include ../includes/color/color-light-text-dark-background.html %>
  <h3>Color Combinations</h3>
  <% include ../includes/color/color-system.html %>
</section>

<section>
  <h2>Icons and Other Elements</h2>
  <p>
    Visit <a href="iconography.html">iconography</a> for more information about icon colors.
  </p>
  <% include ../includes/color/color-icons.html %>
</section>

<section>
  <h2>Themes</h2>
  <p>
    Firefox features default themes and supports custom themes. Ensure that changes that affect the interface will continue to support a variety of backgrounds like images and, light or dark colors.
  </p>
  <h3>Light Theme</h3>
  <% include ../includes/color/color-theme-light.html %>
  <h3>Dark Theme</h3>
  <% include ../includes/color/color-theme-dark.html %>
  <blockquote>
    <p>
      <a href="https://addons.mozilla.org/firefox/themes/?sort=popular">Most Popular Firefox Themes</a>
    </p>
    <p>
      <a href="https://docs.microsoft.com/windows/uwp/style/color">Windows 10 Accent Colors</a> (used like themes)
    </p>
  </blockquote>
</section>

<section>
  <h2>Accessibility</h2>

  <h3>Color Contrast</h3>
  <p>
    Follow the <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> Level AA guidelines to ensure proper color contrast.
  </p>

  <h4>Color Contrast Values</h4>
  <ul>
    <li><commit_msg>[edit] Update theme intro<commit_after><header>
  <h1>Color</h1>
  <p>
    Firefox colors are bold, vibrant and attractive. They enhance the experience by providing visual clues and by bringing attention to primary actions.
  </p>
</header>

<section>
  <h2>Firefox Colors</h2>
  <% include ../includes/color/color-palette-primary.html %>
  <% include ../includes/color/color-palette-secondary.html %>
</section>

<section>
  <h2>Palettes</h2>
  <p>
    The color palette includes primary and secondary colors that can be used for interfaces and illustrations.
  </p>
  <p>

  <h3>Blue</h3>
  <p>
    Firefox Blue is one of our primary colors. We use blue as accent color for highlighting buttons, links, and active states like the current tab in Firefox for desktop.
  </p>
  <% include ../includes/color/color-blue.html %>

  <h3>Teal</h3>
  <p>
    Firefox Teal is one of our primary colors. We use teal as an attention color.
  </p>
  <% include ../includes/color/color-teal.html %>

  <h3>Magenta</h3>
  <p>
    Firefox Magenta is one of our primary colors. We currently have no common usage for it.
  </p>
  <% include ../includes/color/color-magenta.html %>

  <h3>Green</h3>
  <p>
    Firefox Green is commonly used to indicate success.
  </p>
  <% include ../includes/color/color-green.html %>

  <h3>Yellow</h3>
  <p>
    Firefox Yellow is commonly used for warnings.
  </p>
  <% include ../includes/color/color-yellow.html %>

  <h3>Red</h3>
  <p>
    Firefox Red is commonly used for errors.
  </p>
  <% include ../includes/color/color-red.html %>

  <h3>Purple</h3>
  <p>
    Firefox Purple is commonly used to indicate privacy.
  </p>
  <% include ../includes/color/color-purple.html %>

  <h3>Orange</h3>
  <p>
    Firefox Orange is only used for branding. Do not use it otherwise.
  </p>
  <% include ../includes/color/color-orange.html %>

  <h3>Ink</h3>
  <p>
    Firefox Ink is commonly used for interfaces (e.g., the Firefox for desktop dark theme).
  </p>
  <% include ../includes/color/color-ink.html %>

  <h3>Grey</h3>
  <p>
     Firefox Grey is commonly used for interfaces (e.g., the Firefox for desktop light theme).
  </p>
  <% include ../includes/color/color-grey.html %>

  <h3>White</h3>
  <p>
    We use white for the background of doorhangers or in-content menus.
  </p>
  <% include ../includes/color/color-white.html %>
</section>

<section>
  <h2>Opacity</h2>
  <% include ../includes/color/color-opacity.html %>
</section>

<section>
  <h2>Text and Background Colors</h2>
  <p>
    Visit <a href="typography.html">typography</a> for more information on text color.
  </p>
  <h3>Dark Text on Light Background</h3>
  <% include ../includes/color/color-dark-text-light-background.html %>
  <h3>Light Text on Dark Background</h3>
  <% include ../includes/color/color-light-text-dark-background.html %>
  <h3>Color Combinations</h3>
  <% include ../includes/color/color-system.html %>
</section>

<section>
  <h2>Icons and Other Elements</h2>
  <p>
    Visit <a href="iconography.html">iconography</a> for more information about icon colors.
  </p>
  <% include ../includes/color/color-icons.html %>
</section>

<section>
  <h2>Themes</h2>
  <p>
    Firefox features default themes and supports custom themes. Ensure that changes affecting the interface will continue to support a variety of backgrounds, images, and both light or dark colors.
  </p>
  <h3>Light Theme</h3>
  <% include ../includes/color/color-theme-light.html %>
  <h3>Dark Theme</h3>
  <% include ../includes/color/color-theme-dark.html %>
  <blockquote>
    <p>
      <a href="https://addons.mozilla.org/firefox/themes/?sort=popular">Most Popular Firefox Themes</a>
    </p>
    <p>
      <a href="https://docs.microsoft.com/windows/uwp/style/color">Windows 10 Accent Colors</a> (used like themes)
    </p>
  </blockquote>
</section>

<section>
  <h2>Accessibility</h2>

  <h3>Color Contrast</h3>
  <p>
    Follow the <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> Level AA guidelines to ensure proper color contrast.
  </p>

  <h4>Color Contrast Values</h4>
  <ul>
    <li>
{'fraction_non_alphanumeric': 0.15147076772854876, 'fraction_numerical': 0.013914317099963384, 'mean_word_length': 3.1362948006057545, 'pattern_counts': {'":': 0, '<': 283, '<?xml version=': 0, '>': 283, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7290701', 'n_tokens_mistral': 3003, 'n_tokens_neox': 2793, 'n_words': 797}