<commit_before><template>

  <!-- eslint-disable max-len -->
  <PageTemplate>

    <PageSection title="Overview" anchor="#overview">
      <p>
        During design and development, colors should be referenced by name. Using named colors has a few important benefits:
      </p>
      <ul>
        <li>More meaningful than hex values in mockups and code</li>
        <li>Encourages consistency and accessibility across the application</li>
        <li>Support for alternate themes</li>
      </ul>
      <p>
        Some examples of named colors in the Kolibri design system include:
      </p>
      <ColorBlock name="$themeTokens.text" />
      <ColorBlock name="$themeTokens.error" />
      <ColorBlock name="$themeTokens.primary" />
      <ColorBlock name="$themeBrand.primary.v_900" />
      <ColorBlock name="$themeBrand.secondary.v_200" />
      <ColorBlock name="$themePalette.grey.v_400" />

      <p>
        Care must be taken as we adjust the colors in the application. There are a number of considerations to take into account, including:
      </p>
      <ul>
        <li>Branding, aesthetics, and color harmony</li>
        <li>Sufficient contrast between foreground and background colors</li>
        <li>Accommodation of color blind users</li>
        <li>Maintainability and consistency of the application and code</li>
        <li>Amenability to theming by using tokens correctly</li>
      </ul>

    </PageSection>

    <PageSection title="Tokens" anchor="#tokens">
      <p>
        Color tokens are the most important set of named colors because they have a specific, well-defined usage within the application. Over time, our set of tokens should grow and shrink as necessary to fit the needs of the application.
      </p>
      <p>
        Color tokens are by themselves abstract and defined by a purpose, not a color value. A
        <router-link to="#theme">
          theme
        </router-link>
        makes them concrete by mapping them to specific
        <router-link to="#brand">
          brand colors
        </router-link>
        and
        <router-link to="#palette">
          palette colors
        </router-link>.
      </p>
      <p>
        When using tokens, it's very important to use them because of their purposes, not because of their color values. Multiple tokens will commonly share a single color value.
      </p>

      <h3>Brand shortcuts</h3>
      <ColorBlock name="$themeTokens.primary">
        Default primary brand color. Commonly used for interactive elements
      </ColorBlock>
      <ColorBlock name="$themeTokens.primaryDark">
        Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements
      </ColorBlock>

      <h3>UI Colors</h3>
      <ColorBlock name="$themeTokens.surface">
        Default background color
      </ColorBlock>
      <ColorBlock name="$themeTokens.text">
        Normal text color. (Typically used on top of the <code>$themeTokens.surface</code> color)
      </ColorBlock>
      <ColorBlock name="$themeTokens.annotation">
        Text color with lower visual weight. (Typically used on top of the <code>$themeTokens.surface</code> color)
      </ColorBlock>
      <ColorBlock name="$themeTokens.textDisabled">
        Text color with lowest visual weight. (Typically used on top of the <code>$themeTokens.surface</code> color)
      </ColorBlock>
      <ColorBlock name="$themeTokens.textInverted">
        Text color for creating sufficient contrast when used on dark backgrounds (such as <code>$themeTokens.primary</code>)
      </ColorBlock>
      <ColorBlock name="$themeTokens.loading">
        Color for loaders, spinners, and other progress indicators
      </ColorBlock>
      <ColorBlock name="$themeTokens.focusOutline">
        Used to indicate keyboard focus
      </ColorBlock>
      <ColorBlock name="$themeTokens.fineLine">
        Used for divider lines and rules
      </ColorBlock>
      <ColorBlock name="$themeTokens.error">
        Indicates an application or validation error
      </ColorBlock>
      <ColorBlock name="$themeTokens.success">
        Indicates the successful completion of an action in the application
      </ColorBlock>

      <h3>Learner activity</h3>
      <ColorBlock name="$themeTokens.progress">
        Indicates "in-progress" learner activity
      </ColorBlock>
      <ColorBlock name="$themeTokens.mastered">
        Indicates learner mastery or completion
      </ColorBlock>
      <ColorBlock name="$themeTokens.correct">
        Indicates a correct response by a learner
      </ColorBlock>
      <ColorBlock name="$themeTokens.incorrect">
        Indicates an incorrect response by a learner
      </ColorBlock>

      <h3>User-related labels</h3>
      <ColorBlock name="$themeTokens.coachContent">
        Used for coloring coach content icons
      </ColorBlock>
      <ColorBlock name="$themeTokens.superAdmin">
        Used for coloring super admin permission key icons
      </ColorBlock>

      <h3>Content-related labels</h3>
      <ColorBlock name="$themeTokens.exercise" />
      <ColorBlock name="$themeTokens.video" />
      <ColorBlock name="$themeTokens.audio" />
      <ColorBlock name="$themeTokens.document" />
      <ColorBlock name="$themeTokens.html5" />
      <ColorBlock name="$themeTokens.topic" />

    </PageSection>

    <PageSection title="Scales" anchor="#scales">
      <p>
        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In Kolibri, we follow <ExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into ten brightness levels, named <code>v_50</code>, <code>v_100</code>, <code>v_20</code>, … <code>v_800</code>, <code>v_900</code>:
      </p>
      <ColorBlock name="$themePalette.blue.v_50" />
      <ColorBlock name="$themePalette.blue.v_100" />
      <ColorBlock name="$themePalette.blue.v_200" />
      <p style="margin-left: 60px">
        …
      </p>
      <ColorBlock name="$themePalette.blue.v_800" />
      <ColorBlock name="$themePalette.blue.v_900" />
      <p>
        Due to the inconsistent way that humans perceive color and light, computing these scales is <ExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <ExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
      </p>
    </PageSection>

    <PageSection title="Brand colors" anchor="#brand">
      <p>
        Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
      </p>
      <p>
        Kolibri has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:
      </p>
      <table>
        <tr>
          <td>
            <ColorBlock name="$themeBrand.primary.v_50" />
            <ColorBlock name="$themeBrand.primary.v_100" />
            <ColorBlock name="$themeBrand.primary.v_200" />
            <ColorBlock name="$themeBrand.primary.v_300" />
            <ColorBlock name="$themeBrand.primary.v_400" />
            <ColorBlock name="$themeBrand.primary.v_500" />
            <ColorBlock name="$themeBrand.primary.v_600" />
            <ColorBlock name="$themeBrand.primary.v_700" />
            <ColorBlock name="$themeBrand.primary.v_800" />
            <ColorBlock name="$themeBrand.primary.v_900" />
          </td>
          <td>
            <ColorBlock name="$themeBrand.secondary.v_50" />
            <ColorBlock name="$themeBrand.secondary.v_100" />
            <ColorBlock name="$themeBrand.secondary.v_200" />
            <ColorBlock name="$themeBrand.secondary.v_300" />
            <ColorBlock name="$themeBrand.secondary.v_400" />
            <ColorBlock name="$themeBrand.secondary.v_500" />
            <ColorBlock name="$themeBrand.secondary.v_600" />
            <ColorBlock name="$themeBrand.secondary.v_700" />
            <ColorBlock name="$themeBrand.secondary.v_800" />
            <ColorBlock name="$themeBrand.secondary.v_900" />
          </td>
        </tr>
      </table>

    </PageSection>

    <PageSection title="Palette" anchor="#palette">
      <p>
        A color palette is a set of generic base colors that cover a wide range of the color spectrum. We use the <ExternalLink text="2014 Material Design color palette" href="https://material.io/archive/guidelines/style/color.html#color-color-tool" />, which has many colors to choose from.
      </p>
      <p>
        In our design system, colors from the palette have names like <code>pink</code>, <code>grey</code>, and <code>amber</code>:
      </p>
      <ColorBlock name="$themePalette.pink.v_600" />
      <ColorBlock name="$themePalette.grey.v_600" />
      <ColorBlock name="$themePalette.amber.v_600" />

      <p>
        With the exception of grey values, choosing arbitrary colors from the palette is only slightly better than choosing arbitrary hex values from the full color spectrum. No consistency or meaning is ensured, and they should generally be avoided in favor of specific color tokens and brand colors.
      </p>

      <h3>Grey values</h3>
      <p>A scale of standard greys</p>
      <ColorBlock name="$themePalette.white" />
      <ColorBlock name="$themePalette.black" /><commit_msg>remove unnecessary examples<commit_after><template>

  <!-- eslint-disable max-len -->
  <PageTemplate>

    <PageSection title="Overview" anchor="#overview">
      <p>
        During design and development, colors should be referenced by name. Using named colors has a few important benefits:
      </p>
      <ul>
        <li>More meaningful than hex values in mockups and code</li>
        <li>Encourages consistency and accessibility across the application</li>
        <li>Support for alternate themes</li>
      </ul>
      <p>
        Some examples of named colors in the Kolibri design system include:
      </p>
      <ColorBlock name="$themeTokens.text" />
      <ColorBlock name="$themeTokens.error" />
      <ColorBlock name="$themeTokens.primary" />
      <ColorBlock name="$themeBrand.primary.v_900" />
      <ColorBlock name="$themeBrand.secondary.v_200" />
      <ColorBlock name="$themePalette.grey.v_400" />

      <p>
        Care must be taken as we adjust the colors in the application. There are a number of considerations to take into account, including:
      </p>
      <ul>
        <li>Branding, aesthetics, and color harmony</li>
        <li>Sufficient contrast between foreground and background colors</li>
        <li>Accommodation of color blind users</li>
        <li>Maintainability and consistency of the application and code</li>
        <li>Amenability to theming by using tokens correctly</li>
      </ul>

    </PageSection>

    <PageSection title="Tokens" anchor="#tokens">
      <p>
        Color tokens are the most important set of named colors because they have a specific, well-defined usage within the application. Over time, our set of tokens should grow and shrink as necessary to fit the needs of the application.
      </p>
      <p>
        Color tokens are by themselves abstract and defined by a purpose, not a color value. A
        <router-link to="#theme">
          theme
        </router-link>
        makes them concrete by mapping them to specific
        <router-link to="#brand">
          brand colors
        </router-link>
        and
        <router-link to="#palette">
          palette colors
        </router-link>.
      </p>
      <p>
        When using tokens, it's very important to use them because of their purposes, not because of their color values. Multiple tokens will commonly share a single color value.
      </p>

      <h3>Brand shortcuts</h3>
      <ColorBlock name="$themeTokens.primary">
        Default primary brand color. Commonly used for interactive elements
      </ColorBlock>
      <ColorBlock name="$themeTokens.primaryDark">
        Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements
      </ColorBlock>

      <h3>UI Colors</h3>
      <ColorBlock name="$themeTokens.surface">
        Default background color
      </ColorBlock>
      <ColorBlock name="$themeTokens.text">
        Normal text color. (Typically used on top of the <code>$themeTokens.surface</code> color)
      </ColorBlock>
      <ColorBlock name="$themeTokens.annotation">
        Text color with lower visual weight. (Typically used on top of the <code>$themeTokens.surface</code> color)
      </ColorBlock>
      <ColorBlock name="$themeTokens.textDisabled">
        Text color with lowest visual weight. (Typically used on top of the <code>$themeTokens.surface</code> color)
      </ColorBlock>
      <ColorBlock name="$themeTokens.textInverted">
        Text color for creating sufficient contrast when used on dark backgrounds (such as <code>$themeTokens.primary</code>)
      </ColorBlock>
      <ColorBlock name="$themeTokens.loading">
        Color for loaders, spinners, and other progress indicators
      </ColorBlock>
      <ColorBlock name="$themeTokens.focusOutline">
        Used to indicate keyboard focus
      </ColorBlock>
      <ColorBlock name="$themeTokens.fineLine">
        Used for divider lines and rules
      </ColorBlock>
      <ColorBlock name="$themeTokens.error">
        Indicates an application or validation error
      </ColorBlock>
      <ColorBlock name="$themeTokens.success">
        Indicates the successful completion of an action in the application
      </ColorBlock>

      <h3>Learner activity</h3>
      <ColorBlock name="$themeTokens.progress">
        Indicates "in-progress" learner activity
      </ColorBlock>
      <ColorBlock name="$themeTokens.mastered">
        Indicates learner mastery or completion
      </ColorBlock>
      <ColorBlock name="$themeTokens.correct">
        Indicates a correct response by a learner
      </ColorBlock>
      <ColorBlock name="$themeTokens.incorrect">
        Indicates an incorrect response by a learner
      </ColorBlock>

      <h3>User-related labels</h3>
      <ColorBlock name="$themeTokens.coachContent">
        Used for coloring coach content icons
      </ColorBlock>
      <ColorBlock name="$themeTokens.superAdmin">
        Used for coloring super admin permission key icons
      </ColorBlock>

      <h3>Content-related labels</h3>
      <ColorBlock name="$themeTokens.exercise" />
      <ColorBlock name="$themeTokens.video" />
      <ColorBlock name="$themeTokens.audio" />
      <ColorBlock name="$themeTokens.document" />
      <ColorBlock name="$themeTokens.html5" />
      <ColorBlock name="$themeTokens.topic" />

    </PageSection>

    <PageSection title="Scales" anchor="#scales">
      <p>
        A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In Kolibri, we follow <ExternalLink text="Google's Material convention" href="https://material.io/archive/guidelines/style/color.html" /> and segment colors into ten brightness levels, named <code>v_50</code>, <code>v_100</code>, <code>v_20</code>, … <code>v_800</code>, <code>v_900</code>:
      </p>
      <ColorBlock name="$themePalette.blue.v_50" />
      <ColorBlock name="$themePalette.blue.v_100" />
      <ColorBlock name="$themePalette.blue.v_200" />
      <p style="margin-left: 60px">
        …
      </p>
      <ColorBlock name="$themePalette.blue.v_800" />
      <ColorBlock name="$themePalette.blue.v_900" />
      <p>
        Due to the inconsistent way that humans perceive color and light, computing these scales is <ExternalLink text="both art and science" href="https://uxplanet.org/designing-systematic-colors-b5d2605b15c" />. It should not be done by simply sliding a "brightness" setting. We used <ExternalLink text="materialpalettes.com" href="https://materialpalettes.com/" /> to generate the scales for our primary and secondary brand colors. The same should be done for new themes.
      </p>
    </PageSection>

    <PageSection title="Brand colors" anchor="#brand">
      <p>
        Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues.
      </p>
      <p>
        Kolibri has what we call "Kolibri Purple" as its primary and "Kolibri Teal" as its secondary, available across the full brightness scale:
      </p>
      <table>
        <tr>
          <td>
            <ColorBlock name="$themeBrand.primary.v_50" />
            <ColorBlock name="$themeBrand.primary.v_100" />
            <ColorBlock name="$themeBrand.primary.v_200" />
            <ColorBlock name="$themeBrand.primary.v_300" />
            <ColorBlock name="$themeBrand.primary.v_400" />
            <ColorBlock name="$themeBrand.primary.v_500" />
            <ColorBlock name="$themeBrand.primary.v_600" />
            <ColorBlock name="$themeBrand.primary.v_700" />
            <ColorBlock name="$themeBrand.primary.v_800" />
            <ColorBlock name="$themeBrand.primary.v_900" />
          </td>
          <td>
            <ColorBlock name="$themeBrand.secondary.v_50" />
            <ColorBlock name="$themeBrand.secondary.v_100" />
            <ColorBlock name="$themeBrand.secondary.v_200" />
            <ColorBlock name="$themeBrand.secondary.v_300" />
            <ColorBlock name="$themeBrand.secondary.v_400" />
            <ColorBlock name="$themeBrand.secondary.v_500" />
            <ColorBlock name="$themeBrand.secondary.v_600" />
            <ColorBlock name="$themeBrand.secondary.v_700" />
            <ColorBlock name="$themeBrand.secondary.v_800" />
            <ColorBlock name="$themeBrand.secondary.v_900" />
          </td>
        </tr>
      </table>

    </PageSection>

    <PageSection title="Palette" anchor="#palette">
      <p>
        A color palette is a set of generic base colors that cover a wide range of the color spectrum. We use the <ExternalLink text="2014 Material Design color palette" href="https://material.io/archive/guidelines/style/color.html#color-color-tool" />, which has many colors to choose from.
      </p>
      <p>
        In our design system, colors from the palette have names like <code>pink</code>, <code>grey</code>, and <code>amber</code>.
      </p>
      <p>
        With the exception of grey values, choosing arbitrary colors from the palette is only slightly better than choosing arbitrary hex values from the full color spectrum. No consistency or meaning is ensured, and they should generally be avoided in favor of specific color tokens and brand colors.
      </p>

      <h3>Grey values</h3>
      <p>A scale of standard greys</p>
      <ColorBlock name="$themePalette.white" />
      <ColorBlock name="$themePalette.black" />
{'fraction_non_alphanumeric': 0.10940358580314673, 'fraction_numerical': 0.01301552454132037, 'mean_word_length': 2.8088791558829387, 'pattern_counts': {'":': 0, '<': 388, '<?xml version=': 0, '>': 388, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, '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': '1919349', 'n_tokens_mistral': 5396, 'n_tokens_neox': 5137, 'n_words': 1666}