Top App Bar (regular)@1.0.0

<div class="c-top-app-bar--dark">
  <div class="c-top-app-bar__left">
    <div class="c-top-app-bar__logo">
      <i class="material-icons">arrow_back</i>
    </div>
    <h1 class="c-top-app-bar__title">
      Foo Bar
    </h1>
    <div class="c-top-app-bar__actions">
      <button class="c-icon-button--light">
        <i class="c-icon-button__icon--dark material-icons">edit</i>
        <i class="c-icon-button__icon--dark material-icons">arrow_drop_down</i>
      </button>
    </div>
  </div>

  <div class="c-top-app-bar__right">
    <div class="c-top-app-bar__notifications">
        <div class="c-top-app-bar__notifications-container">
            <p>3</p>
        </div>
    </div>
    <div class="c-top-app-bar__profile-menu material-icons">account_circle</div>
  </div>
</div>

<br>

<div class="c-top-app-bar--light">
  <div class="c-top-app-bar__left">
    <div class="c-top-app-bar__logo">
      <i class="material-icons">arrow_back</i>
    </div>
    <h1 class="c-top-app-bar__title">
      Foo Bar
    </h1>
    <div class="c-top-app-bar__actions">
      <button class="c-icon-button--dark">
        <i class="c-icon-button__icon--dark material-icons">edit</i>
        <i class="c-icon-button__icon--dark material-icons">arrow_drop_down</i>
      </button>
    </div>
  </div>

  <div class="c-top-app-bar__right">
    <div class="c-top-app-bar__notifications">
        <div class="c-top-app-bar__notifications-container">
            <p>3</p>
        </div>
    </div>
    <div class="c-top-app-bar__profile-menu material-icons">account_circle</div>
  </div>
</div>

<br>

<div class="c-top-app-bar--dark">
  <div class="c-top-app-bar__left">
    <div class="c-top-app-bar__logo">
      <i class="material-icons">arrow_back</i>
    </div>
    <input class="c-top-app-bar__title" value="Foo Bar">
    <div class="c-top-app-bar__actions">
      <button class="c-icon-button--light">
        <i class="c-icon-button__icon--dark material-icons">edit</i>
        <i class="c-icon-button__icon--dark material-icons">arrow_drop_down</i>
      </button>
    </div>
  </div>

  <div class="c-top-app-bar__right">
    <div class="c-top-app-bar__notifications">
        <div class="c-top-app-bar__notifications-container">
            <p>3</p>
        </div>
    </div>
    <div class="c-top-app-bar__profile-menu material-icons">account_circle</div>
  </div>
</div>

<br>

<div class="c-top-app-bar--light">
  <div class="c-top-app-bar__left">
    <div class="c-top-app-bar__logo">
      <i class="material-icons">arrow_back</i>
    </div>
    <input class="c-top-app-bar__title" value="Foo Bar">
    <div class="c-top-app-bar__actions">
      <button class="c-icon-button--dark">
        <i class="c-icon-button__icon--dark material-icons">edit</i>
        <i class="c-icon-button__icon--dark material-icons">arrow_drop_down</i>
      </button>
    </div>
  </div>

  <div class="c-top-app-bar__right">
    <div class="c-top-app-bar__notifications">
        <div class="c-top-app-bar__notifications-container">
            <p>3</p>
        </div>
    </div>
    <div class="c-top-app-bar__profile-menu material-icons">account_circle</div>
  </div>
</div>