Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Color Palette 

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

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

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

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

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

        </div>
    </div>
</div>


<!-- Grays -->
<div class="color-palette">
    <div class="color-palette__list">
        <div class="color-palette__item">
            <div class="color-panel">
                <div class="color-panel__color -bg-gray-darker"></div>
                <p class="color-panel__description">
                    $gray-darker
                </p>
            </div>

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

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

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

        </div>
    </div>
</div>


<!-- Theme -->
<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}}
 
/* Default */
{
  "colors": [
    {
      "prefix": "$",
      "color": "black"
    },
    {
      "prefix": "$",
      "color": "gray"
    },
    {
      "prefix": "$",
      "color": "white"
    },
    {
      "prefix": "$",
      "color": "active-red"
    },
    {
      "prefix": "$",
      "color": "dynamic-green"
    }
  ]
}


/* Grays */
{
  "colors": [
    {
      "prefix": "$",
      "color": "gray-darker"
    },
    {
      "prefix": "$",
      "color": "gray-dark"
    },
    {
      "prefix": "$",
      "color": "gray-light"
    },
    {
      "prefix": "$",
      "color": "gray-lighter"
    }
  ]
}


/* Theme */
{
  "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.