Europa Component Library

Colorize

Documentation • Demo

Colorize utilities

You can use these utilities to quickly set a background color or a text color

See examples for all possible colors.

<h3 class="ecl-heading ecl-heading--h3">Background colours</h3>

<div class="example">
  <div class="ecl-u-bg-default ecl-u-color-shade">ecl-u-bg-default</div>
  <div class="ecl-u-bg-primary" style="color: #fff">ecl-u-bg-primary</div>
  <div class="ecl-u-bg-secondary">ecl-u-bg-secondary</div>
  <div class="ecl-u-bg-shade" style="color: #fff">ecl-u-bg-shade</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Main colours</h3>

<div class="example">
  <div class="ecl-u-color-primary">ecl-u-color-primary</div>
  <div class="ecl-u-color-shade">ecl-u-color-shade</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Notification colours</h3>

<div class="example">
  <div class="ecl-u-color-info">ecl-u-color-info</div>
  <div class="ecl-u-color-warning">ecl-u-color-warning</div>
  <div class="ecl-u-color-success">ecl-u-color-success</div>
  <div class="ecl-u-color-error">ecl-u-color-error</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Other text colours</h3>

<div class="example">
  <div class="ecl-u-color-blue-120">ecl-u-color-blue-120</div>
  <div class="ecl-u-color-blue-110">ecl-u-color-blue-110</div>
  <div class="ecl-u-color-blue-100">ecl-u-color-blue-100</div>
  <div class="ecl-u-color-blue-75">ecl-u-color-blue-75</div>
  <div class="ecl-u-color-blue-50">ecl-u-color-blue-50</div>
  <div class="ecl-u-color-blue-25">ecl-u-color-blue-25</div>
</div>

<div class="example">
  <div class="ecl-u-color-grey-100">ecl-u-color-grey-100</div>
  <div class="ecl-u-color-grey-75">ecl-u-color-grey-75</div>
  <div class="ecl-u-color-grey-50">ecl-u-color-grey-50</div>
  <div class="ecl-u-color-grey-25">ecl-u-color-grey-25</div>
  <div class="ecl-u-color-grey-15">ecl-u-color-grey-15</div>
  <div class="ecl-u-color-grey-10">ecl-u-color-grey-10</div>
  <div class="ecl-u-color-grey-5">ecl-u-color-grey-5</div>
  <div class="ecl-u-color-white" style="background-color: #404040">ecl-u-color-white</div>
</div>

<style type="text/css">
  body {
    margin: 2rem;
  }
  .example div {
    padding: 1rem;
    text-align: center;
  }
</style>
 
/* No context defined for this component. */
 
<h3 class="ecl-heading ecl-heading--h3">Background colours</h3>

<div class="example">
  <div class="ecl-u-bg-default ecl-u-color-shade">ecl-u-bg-default</div>
  <div class="ecl-u-bg-primary" style="color: #fff">ecl-u-bg-primary</div>
  <div class="ecl-u-bg-secondary">ecl-u-bg-secondary</div>
  <div class="ecl-u-bg-shade" style="color: #fff">ecl-u-bg-shade</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Main colours</h3>

<div class="example">
  <div class="ecl-u-color-primary">ecl-u-color-primary</div>
  <div class="ecl-u-color-shade">ecl-u-color-shade</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Notification colours</h3>

<div class="example">
  <div class="ecl-u-color-info">ecl-u-color-info</div>
  <div class="ecl-u-color-warning">ecl-u-color-warning</div>
  <div class="ecl-u-color-success">ecl-u-color-success</div>
  <div class="ecl-u-color-error">ecl-u-color-error</div>
</div>

<h3 class="ecl-heading ecl-heading--h3">Other text colours</h3>

<div class="example">
  <div class="ecl-u-color-blue-120">ecl-u-color-blue-120</div>
  <div class="ecl-u-color-blue-110">ecl-u-color-blue-110</div>
  <div class="ecl-u-color-blue-100">ecl-u-color-blue-100</div>
  <div class="ecl-u-color-blue-75">ecl-u-color-blue-75</div>
  <div class="ecl-u-color-blue-50">ecl-u-color-blue-50</div>
  <div class="ecl-u-color-blue-25">ecl-u-color-blue-25</div>
</div>

<div class="example">
  <div class="ecl-u-color-grey-100">ecl-u-color-grey-100</div>
  <div class="ecl-u-color-grey-75">ecl-u-color-grey-75</div>
  <div class="ecl-u-color-grey-50">ecl-u-color-grey-50</div>
  <div class="ecl-u-color-grey-25">ecl-u-color-grey-25</div>
  <div class="ecl-u-color-grey-15">ecl-u-color-grey-15</div>
  <div class="ecl-u-color-grey-10">ecl-u-color-grey-10</div>
  <div class="ecl-u-color-grey-5">ecl-u-color-grey-5</div>
  <div class="ecl-u-color-white" style="background-color: #404040">ecl-u-color-white</div>
</div>

<style type="text/css">
  body {
    margin: 2rem;
  }

  .example div {
    padding: 1rem;
    text-align: center;
  }
</style>
  • Content: 
    /*
  ECL Colorize
  ===========
*/

@each $key, $value in $ecl-colors {
  // Filter out yellow colors (text should not be yellow)
  @if not str-index($key, 'yellow-') {
    .ecl-u-color-#{$key} {
      color: $value;
    }
  }
}

@each $key, $value in $ecl-colors-bg {
  .ecl-u-bg-#{$key} {
    background-color: $value;
  }
}

.ecl-u-color-primary {
  color: $ecl-color-primary;
}
.ecl-u-color-secondary {
  color: $ecl-color-secondary;
}
.ecl-u-color-shade {
  color: $ecl-color-shade;
}
.ecl-u-color-info {
  color: $ecl-color-info;
}
.ecl-u-color-warning {
  color: $ecl-color-warning;
}
.ecl-u-color-success {
  color: $ecl-color-success;
}
.ecl-u-color-error {
  color: $ecl-color-error;
}
.ecl-u-color-white {
  color: #fff;
}
  • URL: /components/raw/ecl-u-colorize/ecl-u-colorize.scss
  • Filesystem Path: framework/utilities/ecl-u-colorize/ecl-u-colorize.scss
  • Size: 734 Bytes
  • Handle: @ec-europa/ecl-u-colorize
  • Preview:
  • Filesystem Path: framework/utilities/ecl-u-colorize/ecl-u-colorize.twig