Reactive Graph - Design System

Progress: Chartreuse 

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Progress
        <span class="token string" style="font-size: var(--font-size-2)">chartreuse</span>
    </h1>
    <hr>
    <div>
        <progress class="chartreuse" max="100" value="0"></progress>
    </div>
    <div>
        <progress class="chartreuse" max="100" value="25"></progress>
    </div>
    <div>
        <progress class="chartreuse" max="100" value="50"></progress>
    </div>
    <div>
        <progress class="chartreuse" max="100" value="75"></progress>
    </div>
    <div>
        <progress class="chartreuse" max="100" value="100"></progress>
    </div>
    <div>
        <progress class="chartreuse"></progress>
    </div>
</div>
 
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Progress
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="0"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="25"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="50"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="75"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}} max="100" value="100"></progress>
  </div>
  <div>
    <progress {{#if modifier}}class="{{modifier}}"{{/if}}></progress>
  </div>
</div>
 
{
  "modifier": "chartreuse"
}

No notes defined.