fix(item): styling of icon is now applied also to item text #268931 i…

…tem styling issues (#439)

* change(docusaurus): update to latest 2 version which is 2.4.3 and modified dev port to 4000

- Mac has AirPlay Receiver on by default which is on port 5000 which means you can't run docusaurus as
  it responds instead of the docusaurus serving

* change(docusaurus): end every link with /

- Docusaurus needs it to properly handle links

* feat(docusaurus): added initial info for Draft Content section and reduce size of p and li width

* feat(draft-content): Added storybook Draft Content to Layout section

- it reuses the Header story to show the draft image

* Add link to storybook usage within the docusaurus page

* fix(jenkins): comment to build storybook

* change(jenkins): removed cleaning of yarn cache

- We want for the installation to go as fast as possible which means having
  cached versions of yarn packages

* Added some Do's and Dont's information to the Docusaurus page

* Corrected Draft Content not DraftBackground

* change(docusaurus): splitted the listing of situations when the draft image appears or not

* Tweak info  to explainations of when the draft image shows up or not

* fix(items): item color now affects also the text not just the icon

- Added white filter to the icons when the item is inside a content-box with a primary, secondary or tertiary class just like we do with the text

theme/themes/eea/views/item.overrides

@@ -71,6 +71,10 @@
 }
 
 // color item images that are svg files
+
+.content-box[class*='ary'] .item img {
+  filter: @itemWhiteFilterColor;
+}
 .item.primary img {
   filter: @itemPrimaryFilterColor;
 }
@@ -266,16 +270,19 @@
 .ui.items > .item {
   &.primary,
   > .icon.primary {
-    color: @primaryColor;
+    --text-color: @primaryColorCSSVar;
+    color: @primaryColorCSSVar;
   }
 
   &.secondary,
   > .icon.secondary {
-    color: @secondaryColor;
+    --text-color: @secondaryColorCSSVar;
+    color: @secondaryColorCSSVar;
   }
 
   &.tertiary,
   > .icon.tertiary {
-    color: @tertiaryColor;
+    --text-color: @tertiaryColorCSSVar;
+    color: @tertiaryColorCSSVar;
   }
 }

theme/themes/eea/views/item.variables

@@ -22,6 +22,7 @@
 @zIndex: '';
 @transition: box-shadow @defaultDuration @defaultEasing;
 // black to desired color filter option resulted from https://codepen.io/sosuke/pen/Pjoqqp
+@itemWhiteFilterColor: invert(100%) sepia(100%) saturate(1%) hue-rotate(306deg) brightness(103%) contrast(101%);
 @itemPrimaryFilterColor: invert(9%) sepia(89%) saturate(5332%) hue-rotate(194deg) brightness(98%) contrast(101%);
 @itemSecondaryFilterColor: invert(33%) sepia(14%) saturate(5566%) hue-rotate(139deg) brightness(98%) contrast(101%);
 @itemTertiaryFilterColor: invert(27%) sepia(15%) saturate(1161%) hue-rotate(167deg) brightness(93%) contrast(80%);
@@ -106,7 +107,7 @@
 @headerLinkHoverColor: @linkHoverColor;
 @metaLinkColor: @lightTextColor;
 @metaLinkHoverColor: @textColor;
-@contentLinkColor: '';
+@contentLinkColor: inherit;
 @contentLinkHoverColor: '';
 @contentLinkTransition: color @defaultDuration @defaultEasing;