modmore component library

Site Colors

Colors

Usage

Colours can be referenced with the Sass function color():

.foobar {
    background: color(primary);
}

Loops

You may need to loop through each of the theme colors to generate specifically themed components. This should be used sparingly as it will bloat the CSS. Instead try and rely on the helper classes.

@each $name, $color in $colors {
    .foobar--#{$name} {
        background: $color;
    }
}
<div class="color-box-group">
    <div class="color-box color-box--primary">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">primary</div>
            <div class="color-box__color-code">#1F4A7F</div>
        </div>
    </div>
    <div class="color-box color-box--primary-dark">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">primary-dark</div>
            <div class="color-box__color-code">#153256</div>
        </div>
    </div>
    <div class="color-box color-box--secondary">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">secondary</div>
            <div class="color-box__color-code">#FE9D2E</div>
        </div>
    </div>
    <div class="color-box color-box--secondary-dark">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">secondary-dark</div>
            <div class="color-box__color-code">#eb6e05</div>
        </div>
    </div>
    <div class="color-box color-box--charcoal">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">charcoal</div>
            <div class="color-box__color-code">#748494</div>
        </div>
    </div>
    <div class="color-box color-box--error">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">error</div>
            <div class="color-box__color-code">#ca3a24</div>
        </div>
    </div>
    <div class="color-box color-box--grey-xdark">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-xdark</div>
            <div class="color-box__color-code">#111111</div>
        </div>
    </div>
    <div class="color-box color-box--grey-dark">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-dark</div>
            <div class="color-box__color-code">#333333</div>
        </div>
    </div>
    <div class="color-box color-box--grey-base">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-base</div>
            <div class="color-box__color-code">#999999</div>
        </div>
    </div>
    <div class="color-box color-box--grey-mid">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-mid</div>
            <div class="color-box__color-code">#cccccc</div>
        </div>
    </div>
    <div class="color-box color-box--grey-light">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-light</div>
            <div class="color-box__color-code">#e6e6e6</div>
        </div>
    </div>
    <div class="color-box color-box--grey-xlight">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-xlight</div>
            <div class="color-box__color-code">#f9fafa</div>
        </div>
    </div>
    <div class="color-box color-box--grey-xlight-tint">
        <div class="color-box__color"></div>
        <div class="color-box__context">
            <div class="color-box__color-name">grey-xlight-tint</div>
            <div class="color-box__color-code">#d2e3ee</div>
        </div>
    </div>
</div>
 
{
  "colors": [
    {
      "name": "primary",
      "hex": "#1F4A7F"
    },
    {
      "name": "primary-dark",
      "hex": "#153256"
    },
    {
      "name": "secondary",
      "hex": "#FE9D2E"
    },
    {
      "name": "secondary-dark",
      "hex": "#eb6e05"
    },
    {
      "name": "charcoal",
      "hex": "#748494"
    },
    {
      "name": "error",
      "hex": "#ca3a24"
    },
    {
      "name": "grey-xdark",
      "hex": "#111111"
    },
    {
      "name": "grey-dark",
      "hex": "#333333"
    },
    {
      "name": "grey-base",
      "hex": "#999999"
    },
    {
      "name": "grey-mid",
      "hex": "#cccccc"
    },
    {
      "name": "grey-light",
      "hex": "#e6e6e6"
    },
    {
      "name": "grey-xlight",
      "hex": "#f9fafa"
    },
    {
      "name": "grey-xlight-tint",
      "hex": "#d2e3ee"
    }
  ]
}