City of Ghent Style Guide

Colors

Primary and secondary colors

Colors are defined in the $colors SASS map inside the _colors.scss partial.

Tints of colors

We provide a number of tints you can apply to your components in the $tints SASS map.

Using a color in your SASS files

When implementing a color for a component always use the colors() function defined in the _colors.scss partial.

Examples

.my-selector {
  color: color('cyan', 1);
}

This example calculates the color for .my-selector based on the base color cyan and makes it 1 tint darker.

.my-selector {
  color: color('red', -31);
}

This example calculates the color for .my-selector based on the base color red and makes it 3 tints lighter.

Defining colors based on themes

We provide a themify system that allows you to “themify” your components. This means they will change colors based on predefined sub themes.

To make a property themable use the mixin theme() in your component.

The $themes map exists out of multiple keys that define the themes for the style guide. Based on these maps you have to require some basic colors such as color-primary and color-secondary. See the $themes map inside _themes.scss for more information. These form the basic of the theming system. Through a syntax convention you can theme the colors of your components:

  @include theme('background', 'color-primary--lighten-4', 'field-background');

gets transformed by the system to:

  background: #some-hex-value;

It does this by searching for the key color-primary in the $themes map. Everything just before the double dashes gets used as the key value.

It then checks the part after the double dashes -- and strips out lighten or darken (everything before the dash -). Based on that result it applies the color() mixin with the correct parameters.

The themify theme() function converts sass like this:

.parent {
  .child {
    theme('background-color', 'color-primary--lighten-4', 'field-background');
  }
}

gets transformed to css:

.cs--blue .parent .child {
    background-color: #00f;
}

Where .cs--blue is the theme color class which is added to the <body> element.

But sometimes the .parent selector is a body class which is not supported by the theme() function. The theme-body() function adds the color class to the first element of the selector:

.parent {
  .child {
    theme-body('background-color', 'color-primary--lighten-4', 'field-background');
  }
}

gets transformed to css:

.cs--blue.parent .child {
    background-color: #00f;
}

Colors 

<h3 id="styleguide-colors" class="styleguide-title">{{ 'Primary colors' }}</h3>
{% for text, color in primary %}
  <div class="color-wrapper {{ text == 'white' ? 'white' : '' }}">
    <div>
      <div class="color" style="background: {{ color|e }}"></div>
      <p><strong>{{ text|e }}</strong></p>
      <code>color('{{ text }}');</code>
      <code>{{ color|e }}</code>
    </div>
  </div>
{% endfor %}

<h3 class="styleguide-title">{{ 'Secondary colors' }}</h3>
{% for text, color in secondary %}
  <div class="color-wrapper {{ text == 'white' ? 'white' : '' }}">
    <div>
      <div class="color" style="background: {{ color|e }}"></div>
      <p><strong>{{ text|e }}</strong></p>
      <code>color('{{ text }}');</code>
      <code>{{ color|e }}</code>
    </div>
  </div>
{% endfor %}
 
<h3 id="styleguide-colors" class="styleguide-title">Primary colors</h3>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #005ba9"></div>
        <p><strong>blue</strong></p>
        <code>color('blue');</code>
        <code>#005ba9</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ccdeee"></div>
        <p><strong>blue-light</strong></p>
        <code>color('blue-light');</code>
        <code>#ccdeee</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ffdb5a"></div>
        <p><strong>yellow</strong></p>
        <code>color('yellow');</code>
        <code>#ffdb5a</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ffec93"></div>
        <p><strong>yellow-pastel:</strong></p>
        <code>color('yellow-pastel:');</code>
        <code>#ffec93</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #fff8d4"></div>
        <p><strong>yellow-light</strong></p>
        <code>color('yellow-light');</code>
        <code>#fff8d4</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #009de0"></div>
        <p><strong>cyan</strong></p>
        <code>color('cyan');</code>
        <code>#009de0</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #7ed9ff"></div>
        <p><strong>cyan-pastel</strong></p>
        <code>color('cyan-pastel');</code>
        <code>#7ed9ff</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #e6f8ff"></div>
        <p><strong>cyan-light</strong></p>
        <code>color('cyan-light');</code>
        <code>#e6f8ff</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #1abcff"></div>
        <p><strong>cyan-hover</strong></p>
        <code>color('cyan-hover');</code>
        <code>#1abcff</code>
    </div>
</div>

<h3 class="styleguide-title">Secondary colors</h3>
<div class="color-wrapper white">
    <div>
        <div class="color" style="background: #ffffff"></div>
        <p><strong>white</strong></p>
        <code>color('white');</code>
        <code>#ffffff</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #001823"></div>
        <p><strong>gray</strong></p>
        <code>color('gray');</code>
        <code>#001823</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #687278"></div>
        <p><strong>gray-medium</strong></p>
        <code>color('gray-medium');</code>
        <code>#687278</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #e6e8ea"></div>
        <p><strong>gray-light</strong></p>
        <code>color('gray-light');</code>
        <code>#e6e8ea</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #f0f1f2"></div>
        <p><strong>gray-ultra-light</strong></p>
        <code>color('gray-ultra-light');</code>
        <code>#f0f1f2</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ea0d33"></div>
        <p><strong>red</strong></p>
        <code>color('red');</code>
        <code>#ea0d33</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ff8a9d"></div>
        <p><strong>red-pastel</strong></p>
        <code>color('red-pastel');</code>
        <code>#ff8a9d</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ffe8ec"></div>
        <p><strong>red-light</strong></p>
        <code>color('red-light');</code>
        <code>#ffe8ec</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #e06c00"></div>
        <p><strong>orange</strong></p>
        <code>color('orange');</code>
        <code>#e06c00</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #ffb673"></div>
        <p><strong>orange-pastel</strong></p>
        <code>color('orange-pastel');</code>
        <code>#ffb673</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #fff2e5"></div>
        <p><strong>orange-light</strong></p>
        <code>color('orange-light');</code>
        <code>#fff2e5</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #2c8726"></div>
        <p><strong>green</strong></p>
        <code>color('green');</code>
        <code>#2c8726</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #8ee088"></div>
        <p><strong>green-pastel</strong></p>
        <code>color('green-pastel');</code>
        <code>#8ee088</code>
    </div>
</div>
<div class="color-wrapper ">
    <div>
        <div class="color" style="background: #e1fde1"></div>
        <p><strong>green-light</strong></p>
        <code>color('green-light');</code>
        <code>#e1fde1</code>
    </div>
</div>
 
{
  "primary": {
    "blue": "#005ba9",
    "blue-light": "#ccdeee",
    "yellow": "#ffdb5a",
    "yellow-pastel:": "#ffec93",
    "yellow-light": "#fff8d4",
    "cyan": "#009de0",
    "cyan-pastel": "#7ed9ff",
    "cyan-light": "#e6f8ff",
    "cyan-hover": "#1abcff"
  },
  "secondary": {
    "white": "#ffffff",
    "gray": "#001823",
    "gray-medium": "#687278",
    "gray-light": "#e6e8ea",
    "gray-ultra-light": "#f0f1f2",
    "red": "#ea0d33",
    "red-pastel": "#ff8a9d",
    "red-light": "#ffe8ec",
    "orange": "#e06c00",
    "orange-pastel": "#ffb673",
    "orange-light": "#fff2e5",
    "green": "#2c8726",
    "green-pastel": "#8ee088",
    "green-light": "#e1fde1"
  }
}