extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'colors'
  - var parent = 'utilities'
  - var title = 'Color utilities - Utilities - Spectre.css CSS Framework'
  - var description = 'Color utilities are used for changing colors for text, link and background. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('colors', 'Color utilities')
    include ../_layout/_ad-g.pug

    p Color utilities are used for changing colors for text, link and background.

    +docs-subheading('colors-text', 'Text colors')

    .docs-demo.columns
      .column.col-12
        p
          span.text-primary primary color
        p
          span.text-secondary secondary color
        p
          span.text-dark dark color
        p
          span.text-gray gray color
        p
          span.text-light.bg-dark.p-1.rounded light color
        p
          span.text-success success color
        p
          span.text-warning warning color
        p
          span.text-error error color

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <span class="text-primary">primary color</span>
          <span class="text-secondary">secondary color</span>
          <span class="text-dark">dark color</span>
          <span class="text-gray">gray color</span>
          <span class="text-light">light color</span>
          <span class="text-success">success color</span>
          <span class="text-warning">warning color</span>
          <span class="text-error">error color</span>

    .docs-demo.columns
      .column.col-12
        p
          a.text-primary.p-1(href="#colors") primary link
        p
          a.text-secondary.p-1(href="#colors") secondary link
        p
          a.text-dark.p-1(href="#colors") dark link
        p
          a.text-gray.p-1(href="#colors") gray link
        p
          a.text-light.bg-dark.p-1.rounded(href="#colors") light link
        p
          a.text-success.p-1(href="#colors") success link
        p
          a.text-warning.p-1(href="#colors") warning link
        p
          a.text-error.p-1(href="#colors") error link

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <a class="text-primary" href="#">primary color</a>
          <a class="text-secondary" href="#">secondary color</a>
          <a class="text-dark" href="#">dark color</a>
          <a class="text-gray" href="#">gray color</a>
          <a class="text-light" href="#">light color</a>
          <a class="text-success" href="#">success color</a>
          <a class="text-warning" href="#">warning color</a>
          <a class="text-error" href="#">error color</a>

    +docs-subheading('colors-background', 'Background colors')

    .docs-demo.columns
      .column.col-12
        p
          span.bg-primary.p-1.rounded primary bg
        p
          span.bg-secondary.text-primary.p-1.rounded secondary bg
        p
          span.bg-dark.p-1.rounded dark bg
        p
          span.bg-gray.p-1.rounded gray bg
        p
          span.bg-success.p-1.rounded success bg
        p
          span.bg-warning.p-1.rounded warning bg
        p
          span.bg-error.p-1.rounded error bg

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="bg-primary">primary bg</div>
          <div class="bg-secondary">secondary bg</div>
          <div class="bg-dark">dark bg</div>
          <div class="bg-gray">gray bg</div>
          <div class="bg-success">success bg</div>
          <div class="bg-warning">warning bg</div>
          <div class="bg-error">error bg</div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug