Web Design Guide 2023-12-11 10:29:21 | 2.0.0

Theme Colors 

<div class="color-palette">
    <div class="color-palette__list">
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-primary"></div>
                <p class="color-panel__description">
                    $primary
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-secondary"></div>
                <p class="color-panel__description">
                    $secondary
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-tertiary"></div>
                <p class="color-panel__description">
                    $tertiary
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-success"></div>
                <p class="color-panel__description">
                    $success
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-danger"></div>
                <p class="color-panel__description">
                    $danger
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-dark"></div>
                <p class="color-panel__description">
                    $dark
                </p>
            </div>

        </div>
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-light"></div>
                <p class="color-panel__description">
                    $light
                </p>
            </div>

        </div>
    </div>
</div>
 
{{render '@helper-color-palette' _self.context}}
 
{
  "colors": [
    {
      "prefix": "$",
      "color": "primary"
    },
    {
      "prefix": "$",
      "color": "secondary"
    },
    {
      "prefix": "$",
      "color": "tertiary"
    },
    {
      "prefix": "$",
      "color": "success"
    },
    {
      "prefix": "$",
      "color": "danger"
    },
    {
      "prefix": "$",
      "color": "dark"
    },
    {
      "prefix": "$",
      "color": "light"
    }
  ]
}

There are no notes for this item.