@vcl/vcl/theme/demo/example-semantic-colors.html

The whole VCL in one package

<div>
  <h3>Semantic Colors</h3>
  <div class="col demo">
    <div class="row center">
      <div class="label">--emphasized-dark-color</div>
      <div class="color empdc"></div>
    </div>
    <div class="row center">
      <div class="label">--emphasized-medium-color</div>
      <div class="color empmc"></div>
    </div>
    <div class="row center">
      <div class="label">--emphasized-light-color</div>
      <div class="color emplc"></div>
    </div>

    <div class="row center">
      <div class="label">--primary-dark-color</div>
      <div class="color primdc"></div>
    </div>
    <div class="row center">
      <div class="label">--primary-medium-color</div>
      <div class="color primmc"></div>
    </div>
    <div class="row center">
      <div class="label">--primary-light-color</div>
      <div class="color primlc"></div>
    </div>

    <div class="row center">
      <div class="label">--success-dark-color</div>
      <div class="color succdc"></div>
    </div>
    <div class="row center">
      <div class="label">--success-medium-color</div>
      <div class="color succmc"></div>
    </div>
    <div class="row center">
      <div class="label">--success-light-color</div>
      <div class="color succlc"></div>
    </div>

    <div class="row center">
      <div class="label">--info-dark-color</div>
      <div class="color infodc"></div>
    </div>
    <div class="row center">
      <div class="label">--info-medium-color</div>
      <div class="color infomc"></div>
    </div>
    <div class="row center">
      <div class="label">--info-light-color</div>
      <div class="color infolc"></div>
    </div>

    <div class="row center">
      <div class="label">--warning-dark-color</div>
      <div class="color warningdc"></div>
    </div>
    <div class="row center">
      <div class="label">--warning-medium-color</div>
      <div class="color warningmc"></div>
    </div>
    <div class="row center">
      <div class="label">--warning-light-color</div>
      <div class="color warninglc"></div>
    </div>

    <div class="row center">
      <div class="label">--error-dark-color</div>
      <div class="color errordc"></div>
    </div>
    <div class="row center">
      <div class="label">--error-medium-color</div>
      <div class="color errormc"></div>
    </div>
    <div class="row center">
      <div class="label">--error-light-color</div>
      <div class="color errorlc"></div>
    </div>

    <div class="row center">
      <div class="label">--danger-dark-color</div>
      <div class="color dangerdc"></div>
    </div>
    <div class="row center">
      <div class="label">--danger-medium-color</div>
      <div class="color dangermc"></div>
    </div>
    <div class="row center">
      <div class="label">--danger-light-color</div>
      <div class="color dangerlc"></div>
    </div>
  </div>
</div>