Skip to content

Commit

Permalink
refactor(docusaurus): move supplementary, state and link colors to pa…
Browse files Browse the repository at this point in the history 
…rtials
  • Loading branch information
@g-stamatis
g-stamatis committed Sep 14, 2022
1 parent 2b81c55 commit 2776be3
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 1,026 deletions.
210 changes: 6 additions & 204 deletions website/docs/webdev/3-Guidelines/2-colours.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ order: 2
---

import EEAColorPalette from './_partials/_markdown-eea-color-palette.mdx';
import SupplementaryColors from './_partials/_markdown-supplementary-colors.mdx';
import LinkColors from './_partials/_markdown-link-colors.mdx';
import StateColors from './_partials/_markdown-state-colors.mdx';

## Communication is key

Expand Down Expand Up @@ -173,167 +176,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
</table>
</div>

## 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 className="row">
<div className="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 className="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:'#2E3E4C'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#2E3E4C</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>
<SupplementaryColors />

## Core colors

Expand All @@ -353,26 +196,7 @@ These colors highlight or complement the primary colors. These are to be used sp
</tbody>
</table>

### Link colors

<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</div>
</td>
<td style={{backgroundColor:'#004B7F'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#004B7F<br/>Hover</div>
</td>
<td style={{backgroundColor:'#5C3285'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#5C3285<br/>Visited</div>
</td>
<td style={{backgroundColor:'#003052'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#003052<br/>Active</div>
</td>
</tr>
</tbody>
</table>
<LinkColors />

### Discrete colors

Expand All @@ -389,28 +213,6 @@ These colors highlight or complement the primary colors. These are to be used sp
</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>
<StateColors />

<EEAColorPalette />
Loading

0 comments on commit 2776be3

Please sign in to comment.