update utilities and doc (#2771)

ec-europa · Feb 15, 2023 · e544939 · e544939 · github-actions · Feb 15, 2023
1 parent aee9793
commit e544939
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 145 deletions.
diff --git a/src/implementations/vanilla/utilities/typography/_typography.scss b/src/implementations/vanilla/utilities/typography/_typography.scss
@@ -191,11 +191,8 @@ $_heading6: null !default;
 * Font colour
 */
 @each $key, $value in theme.$color {
-  // Filter out yellow colours (text should not be yellow)
-  @if not str-index($key, 'yellow-') {
-    .ecl-u-type-color-#{$key} {
-      color: $value !important;
-    }
+  .ecl-u-type-color-#{$key} {
+    color: $value !important;
   }
 }
 

diff --git a/src/themes/dev/maps/color.scss b/src/themes/dev/maps/color.scss
@@ -1,11 +1,29 @@
 // EC colours are used by default,
 // EU colours are set in corresponding themes
 $color: (
+  // semantic colours
+  'primary': #004494,
+  'secondary': #ffd617,
+  'tertiary': #e3e3e3,
+  'error': #da2131,
+  'info': #006fb4,
+  'success': #467a39,
+  'warning': #f29527,
+  'text': #404040,
+
+  // main colours
+  'black': #000,
+  'white': #fff,
   'blue': #004494,
   'yellow': #ffd617,
   'grey': #404040,
-  'black': #000,
-  'white': #fff,
+  'blue-n': #006fb4,
+  'orange': #f29527,
+  'green': #467a39,
+  'red': #da2131,
+
+  // other colours
+  'black-100': #000,
   'blue-130': #002f67,
   'blue-120': #003776,
   'blue-110': #003d84,
@@ -14,12 +32,7 @@ $color: (
   'blue-50': #7fa1c9,
   'blue-25': #bfd0e4,
   'blue-5': #f2f5f9,
-  'yellow-120': #f8ae21,
-  'yellow-110': #fbc11d,
-  'yellow-100': #ffd617,
-  'yellow-75': #ffde39,
-  'yellow-50': #ffe879,
-  'yellow-25': #fff4bb,
+  'green-100': #467a39,
   'grey-100': #404040,
   'grey-75': #707070,
   'grey-50': #9f9f9f,
@@ -29,24 +42,16 @@ $color: (
   'grey-10': #ebebeb,
   'grey-5': #f5f5f5,
   'grey-3': #f9f9f9,
-  'blue-n': #006fb4,
-  'orange': #f29527,
-  'green': #467a39,
-  'red-130': #981722,
-  'red': #da2131,
-  'primary': #004494,
-  'secondary': #ffd617,
-  'tertiary': #e3e3e3,
-  'text': #404040,
-  'white-100': #fff,
-  'black-100': #000,
-  'error': #da2131,
-  'info': #006fb4,
-  'success': #467a39,
-  'warning': #f29527,
   'orange-100': #f29527,
-  'green-100': #467a39,
-  'red-100': #da2131,
-  'purple-100': #4b0076,
   'purple-25': #d2bfdd,
+  'purple-100': #4b0076,
+  'red-100': #da2131,
+  'red-130': #981722,
+  'yellow-120': #f8ae21,
+  'yellow-110': #fbc11d,
+  'yellow-100': #ffd617,
+  'yellow-75': #ffde39,
+  'yellow-50': #ffe879,
+  'yellow-25': #fff4bb,
+  'white-100': #fff
 ) !default;
diff --git a/src/themes/eu/_index.scss b/src/themes/eu/_index.scss
@@ -1,115 +1,120 @@
 @forward '@ecl/theme-dev/maps/color' with (
   $color: (
-    // temporary copy of ec colours, until components are updated
-    'black': #000,
-    'white': #fff,
-    'blue-75': #4073af,
-    'blue-50': #7fa1c9,
-    'blue-25': #bfd0e4,
-    'yellow-75': #ffde39,
-    'yellow-50': #ffe879,
-    'yellow-25': #fff4bb,
-    'grey-75': #707070,
-    'grey-50': #9f9f9f,
-    'grey-25': #cfcfcf,
-    'grey-15': #e3e3e3,
-    'blue-n': #006fb4,
-    'primary': #004494,
-    'secondary': #ffd617,
-    'tertiary': #e3e3e3,
-    'text': #404040,
-    'white-100': #fff,
-    'black-100': #000,
-    'error': #bf0036,
+    // semantic colours
+    'primary': #0e47cb,
+    'secondary': #fc0,
+    'tertiary': #262b38,
+    'error': #ef0044,
     'info': #0e47cb,
     'success': #00c991,
     'warning': #ff6200,
-    'purple-25': #d2bfdd,
-    // EU colours
-    'accent-blue-30': #b3f8ff,
-    'accent-blue-100': #00e9ff,
+    'text': #262b38,
+
+    // main colours
+    'black': #000,
+    'white': #fff,
     'blue': #0e47cb,
     'yellow': #fc0,
     'grey': #262b38,
     'red': #ef0044,
-    'blue-5': #f3f6fc,
-    'blue-10': #e7edfa,
-    'blue-20': #cfdaf5,
-    'blue-40': #9fb5ea,
-    'blue-60': #6e91e0,
-    'blue-80': #3e6cd5,
-    'blue-100': #0e47cb,
-    'blue-110': #0d40b7,
-    'blue-120': #0b39a2,
-    'blue-130': #0a328e,
+
+    // other colours
+    'accent-blue-100': #00e9ff,
+    'accent-blue-30': #b3f8ff,
+    'black-100': #000,
     'blue-140': #082b7a,
-    'green-5': #f2fcf9,
-    'green-10': #e6faf4,
-    'green-20': #ccf4e9,
-    'green-40': #99e9d3,
-    'green-60': #66dfbd,
-    'green-80': #33d4a7,
-    'green-100': #00c991,
-    'green-110': #00b583,
-    'green-120': #00a174,
-    'green-130': #008d66,
+    'blue-130': #0a328e,
+    'blue-120': #0b39a2,
+    'blue-110': #0d40b7,
+    'blue-100': #0e47cb,
+    'blue-80': #3e6cd5,
+    'blue-60': #6e91e0,
+    'blue-40': #9fb5ea,
+    'blue-20': #cfdaf5,
+    'blue-10': #e7edfa,
+    'blue-5': #f3f6fc,
     'green-140': #007957,
-    'grey-3': #f9f9f9,
-    'grey-5': #f4f5f5,
-    'grey-10': #e9eaeb,
-    'grey-20': #d4d5d7,
-    'grey-40': #a8aaaf,
-    'grey-60': #7d8088,
-    'grey-80': #515560,
-    'grey-100': #262b38,
-    'grey-110': #222732,
-    'grey-120': #1e222d,
-    'grey-130': #1b1e27,
+    'green-130': #008d66,
+    'green-120': #00a174,
+    'green-110': #00b583,
+    'green-100': #00c991,
+    'green-80': #33d4a7,
+    'green-60': #66dfbd,
+    'green-40': #99e9d3,
+    'green-20': #ccf4e9,
+    'green-10': #e6faf4,
+    'green-5': #f2fcf9,
     'grey-140': #171a22,
-    'orange-5': #fff7f2,
-    'orange-10': #ffefe6,
-    'orange-20': #ffd0b3,
-    'orange-40': #ffb180,
-    'orange-60': #ff914d,
-    'orange-80': #ff8133,
-    'orange-100': #ff6200,
-    'orange-110': #e65800,
-    'orange-120': #cc4e00,
-    'orange-130': #b34500,
+    'grey-130': #1b1e27,
+    'grey-120': #1e222d,
+    'grey-110': #222732,
+    'grey-100': #262b38,
+    'grey-80': #515560,
+    'grey-60': #7d8088,
+    'grey-40': #a8aaaf,
+    'grey-20': #d4d5d7,
+    'grey-10': #e9eaeb,
+    'grey-5': #f4f5f5,
+    'grey-3': #f9f9f9,
     'orange-140': #993b00,
-    'purple-5': #f6f3fc,
-    'purple-10': #eee7fa,
-    'purple-20': #dccff5,
-    'purple-40': #bf9af1,
-    'purple-60': #976ee1,
-    'purple-80': #743dd7,
-    'purple-100': #510dcd,
-    'purple-110': #490cb9,
-    'purple-120': #410aa4,
-    'purple-130': #390990,
+    'orange-130': #b34500,
+    'orange-120': #cc4e00,
+    'orange-110': #e65800,
+    'orange-100': #ff6200,
+    'orange-80': #ff8133,
+    'orange-60': #ff914d,
+    'orange-40': #ffb180,
+    'orange-20': #ffd0b3,
+    'orange-10': #ffefe6,
+    'orange-5': #fff7f2,
     'purple-140': #31087b,
-    'red-5': #fef2f5,
-    'red-10': #fde6ec,
-    'red-20': #fcccda,
-    'red-40': #f999b4,
-    'red-60': #f5668f,
-    'red-80': #f23369,
-    'red-100': #ef0044,
-    'red-110': #d7003d,
-    'red-120': #bf0036,
-    'red-130': #a70030,
+    'purple-130': #390990,
+    'purple-120': #410aa4,
+    'purple-110': #490cb9,
+    'purple-100': #510dcd,
+    'purple-80': #743dd7,
+    'purple-60': #976ee1,
+    'purple-40': #bf9af1,
+    'purple-20': #dccff5,
+    'purple-10': #eee7fa,
+    'purple-5': #f6f3fc,
     'red-140': #8f0029,
-    'yellow-5': #fffcf2,
-    'yellow-10': #fffae6,
-    'yellow-20': #fff5cc,
-    'yellow-40': #ffeb99,
-    'yellow-60': #ffe066,
-    'yellow-80': #ffd633,
-    'yellow-100': #fc0,
-    'yellow-110': #e6b800,
-    'yellow-120': #cca300,
-    'yellow-130': #b38f00,
+    'red-130': #a70030,
+    'red-120': #bf0036,
+    'red-110': #d7003d,
+    'red-100': #ef0044,
+    'red-80': #f23369,
+    'red-60': #f5668f,
+    'red-40': #f999b4,
+    'red-20': #fcccda,
+    'red-10': #fde6ec,
+    'red-5': #fef2f5,
     'yellow-140': #997a00,
+    'yellow-130': #b38f00,
+    'yellow-120': #cca300,
+    'yellow-110': #e6b800,
+    'yellow-100': #fc0,
+    'yellow-80': #ffd633,
+    'yellow-60': #ffe066,
+    'yellow-40': #ffeb99,
+    'yellow-20': #fff5cc,
+    'yellow-10': #fffae6,
+    'yellow-5': #fffcf2,
+    'white-100': #fff,
+
+    // deprecated colours
+    'blue-75': #4073af,
+    'blue-50': #7fa1c9,
+    'blue-25': #bfd0e4,
+    'yellow-75': #ffde39,
+    'yellow-50': #ffe879,
+    'yellow-25': #fff4bb,
+    'grey-75': #707070,
+    'grey-50': #9f9f9f,
+    'grey-25': #cfcfcf,
+    'grey-15': #e3e3e3,
+    'blue-n': #006fb4,
+    'purple-25': #d2bfdd,
   )
 );
 @forward '@ecl/theme-dev/maps/icon';

diff --git a/src/website/src/pages/ec/guidelines/iconography/index.md b/src/website/src/pages/ec/guidelines/iconography/index.md
@@ -3,7 +3,7 @@ title: Iconography
 order: 5
 ---
 
-import { IconList } from '@ecl/website-components';
+import { Link, IconList } from '@ecl/website-components';
 
 ## ECL EC icons
 
@@ -16,3 +16,7 @@ import { IconList } from '@ecl/website-components';
 ## Flag icons
 
 <IconList set="flag" />
+
+## Icon colour
+
+Every non coloured icons (apprearing grey here) could be colorized using the <Link to="/ec/utilities/typography/usage/">text colours utilities</Link>
diff --git a/src/website/src/pages/ec/utilities/typography/docs/usage.md b/src/website/src/pages/ec/utilities/typography/docs/usage.md
@@ -27,15 +27,9 @@ See <Link to="/ec/guidelines/typography/">typography guidelines</Link> for more
 ## Text colour
 
 By using classes `ecl-u-type-color-*` you can set the colour of the text.
-Available colours are:
+All the colours listed <Link to="/ec/guidelines/colours/">in the guidelines</Link> are available.
 
-- primary colours (blue, yellow, grey)
-- black and white
-- the <Link to="/ec/guidelines/colours/">grey palette</Link>
-- the <Link to="/ec/guidelines/colours/">blue palette</Link>
-- the <Link to="/ec/guidelines/colours/">notification palette</Link>
-
-Note that the yellow palette is not available for text colour; text should not be displayed in yellow.
+These utilities can also be used to change icons colour. 
 
 **Accessibility warning**
 

diff --git a/src/website/src/pages/eu/guidelines/iconography/index.md b/src/website/src/pages/eu/guidelines/iconography/index.md
@@ -3,7 +3,7 @@ title: Iconography
 order: 5
 ---
 
-import { IconList } from '@ecl/website-components';
+import { Link, IconList } from '@ecl/website-components';
 
 ## ECL EU icons
 
@@ -16,3 +16,7 @@ import { IconList } from '@ecl/website-components';
 ## Flag icons
 
 <IconList set="flag" />
+
+## Icon colour
+
+Every non coloured icons (apprearing grey here) could be colorized using the <Link to="/eu/utilities/typography/usage/">text colours utilities</Link>
diff --git a/src/website/src/pages/eu/utilities/typography/docs/usage.md b/src/website/src/pages/eu/utilities/typography/docs/usage.md
@@ -27,15 +27,9 @@ See <Link to="/eu/guidelines/typography/">typography guidelines</Link> for more
 ## Text colour
 
 By using classes `ecl-u-type-color-*` you can set the colour of the text.
-Available colours are:
+All the colours listed <Link to="/eu/guidelines/colours/">in the guidelines</Link> are available.
 
-- primary colours (blue, yellow, grey)
-- black and white
-- the <Link to="/eu/guidelines/colours/">grey palette</Link>
-- the <Link to="/eu/guidelines/colours/">blue palette</Link>
-- the <Link to="/eu/guidelines/colours/">notification palette</Link>
-
-Note that the yellow palette is not available for text colour; text should not be displayed in yellow.
+These utilities can also be used to change icons colour. 
 
 **Accessibility warning**