Skip to content

Commit

Permalink
refactor(docusaurus): eea color palette in separate file
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-stamatis
g-stamatis committed Sep 13, 2022
1 parent 0248fd1 commit 6c855df
Show file tree
Hide file tree
Showing 10 changed files with 2,675 additions and 4,684 deletions.
510 changes: 510 additions & 0 deletions website/docs/webdev/3-Guidelines/2-colours.mdx
View file

Large diffs are not rendered by default.

972 changes: 0 additions & 972 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Biodiversity.md
View file

This file was deleted.

436 changes: 436 additions & 0 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Biodiversity.mdx
View file

Large diffs are not rendered by default.

910 changes: 0 additions & 910 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Fise.md
View file

This file was deleted.

374 changes: 374 additions & 0 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Fise.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,374 @@
---
title: Forest Information System
description: ""
order: 4

---

import EEAColorPalette from '../partials/_markdown_eea_color_palette.mdx';

![](../../md_components/static/FISE_logo.svg)


## Communication is key

Although we value an aesthetically pleasing use of color, clear communication is our focus. We use colors to support the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.

## Accessibility

Accessibility is crucial and AA colour contrast must be achieved. It is up to the designer to ensure these standards are met but please refer to the accessibility guide for support. The color system is designed to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for visitors who are color blind or who have low vision. However, you should never convey information using color alone.


## Brand Colors

This color should be eye-catching but not harsh. It can be liberally applied to your layout as its main identity. A primary color is the color displayed most frequently across your screens and components.

<div style={{width:'100%',float:'left'}}>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#007B6C'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#007B6C </div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#005248'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#005248 </div>
</td>
</tr>
</tbody>
</table>

</div>
<h3>Shades</h3>
<div style={{ width:'100%', float:'left', marginBottom: '40px'}}>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#C8FFF8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#C8FFF8</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#85FFF1'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#85FFF1</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#00F5D8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00F5D8</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#00CCB4'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00CCB4</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#00A390'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00A390</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#007B6C'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#007B6C</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#005248'}} className="small-color-td-box-70">
<div style={{color:'white'}} className="small-color-box-70">#005248</div>
</td>
</tr>
</tbody> </table>

</div>

<br/>


## Supplementary color

These colors highlight or complement the primary colors. These are to be used sparingly to make the UI elements stand out. These colors can be used together together or separately.

<div class="row">
<div class="col col--5">
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#3D5265'}} className="large-color-box-td">
<div style={{color:'#F9F9F9'}} className="large-color-box">#3D5265 <br/>AAA</div>
</td>
<td style={{backgroundColor:'#F9F9F9'}} className="large-color-box-td">
<div style={{color:'#3D5265'}} className="large-color-box">#F9F9F9<br/> AAA </div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col col--7">
<div style={{float:'right'}}> ΕΕΑ main background color is white but the secondary colors can also be used as background to
compliment text elements or components.
<br/> <br/>
<b>You can use #F9F9F9 as background with #3D5265 text (10.44:1 AAA) or,
you can use #3D5265 background with #F9F9F9 text (10.44:1 AAA)</b>
</div>
</div>
</div>

<div style={{width:'100%',float:'left'}}>
<h3>Shades</h3>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#DAE8F4'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#DAE8F4</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#ACCAE5'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#ACCAE5</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#8EA6C2'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#8EA6C2</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#6989A5'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#6989A5</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#4C677F'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#4C677F</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#3D5265'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#3D5265</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#3D5265'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#3D5265</div>
</td>
</tr>
</tbody> </table>

</div>

<br />
<div style={ {width:'100%', float:'left', marginBottom: '40px'}}>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#FFFFFF'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#FFFFFF</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#F9F9F9'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#F9F9F9</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#E6E7E8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#E6E7E8</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#BCBEC0'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#BCBEC0</div>
</td>
</tr>
</tbody> </table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#808285'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#808285</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#323232'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#323232</div>
</td>
</tr>
</tbody>
</table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#000000'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#000000</div>
</td>
</tr>
</tbody>
</table>
</div>

## Core colors

<table style={{ width:"100%", float:'left', marginBottom: '20px'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#3D5265'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#3D5265 <br/>Text color</div>
</td>
<td style={{backgroundColor:'#FFFFFF'}} className="large-color-box-td">
<div style={{color:'#3D5265'}} className="large-color-box">#FFFFFF <br/>Background color</div>
</td>
<td style={{backgroundColor:'#005248'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#005248<br/> Elements </div>
</td>
<td style={{backgroundColor:'#007B6C'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#007B6C<br/> Highlight </div>
</td>
</tr>
</tbody>
</table>

### Link

<table style={{ width:"100%", float:'left', marginBottom: '40px'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#006BB8'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#006BB8 <br/>Default color</div>
</td>
<td style={{backgroundColor:'#004B7F'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#004B7F <br/>Hover color</div>
</td>
<td style={{backgroundColor:'#0083E0'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#0083E0<br/>Visited color</div>
</td>
<td style={{backgroundColor:'#003052'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#003052<br/>Active color</div>
</td>
</tr>
</tbody>
</table>


## State colors

These are the colors that communicate purpose. They help users convey messages.
For example, Green has a positive connotation. We use Green to convey success, confirmation messages, etc.

<table style={{ width:"100%", float:'left', marginBottom: '40px'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#B83230'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#B83230 <br/>ERROR</div>
</td>
<td style={{backgroundColor:'#FF9933'}} className="large-color-box-td">
<div style={{color:'#3D5265'}} className="large-color-box">#FF9933<br/> WARNING </div>
</td>
<td style={{backgroundColor:'#007B6C'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#007B6C <br/>SUCCESS</div>
</td>
<td style={{backgroundColor:'#004B7F'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#004B7F<br/> INFO </div>
</td>
</tr>
</tbody>
</table>

<EEAColorPalette />

##### Legend:
<b>AA:</b> Compatible with WCAG AA requirements
<br/>
<b>AAA:</b> Compatible with WCAG AAA requirements
<br/>
<b>AA L:</b> Compatible with WCAG AA requirements only for Large text (WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.)
<br/>
<br/>

You can find more on WCAG requirements <a href="https://www.w3.org/TR/WCAG21/">here</a>

## Tools for creating color palettes

You can use the following tools for creating color wheels and additional shades for every main color at each of EEA's network sites.

https://color.adobe.com/create/color-wheel

https://coolors.co/


**Colors for maps**

For optional creation of additional color shades to use in maps and charts you can use the following tools.

https://colorbrewer2.org

https://carto.com/carto-colors/
Loading

0 comments on commit 6c855df

Please sign in to comment.