entrie colors are now dynamiclly loaded from field_color in entree term

had to patch the color_field module
https://www.drupal.org/project/color_field/issues/2854199#comment-12316266

PATCHES.md

@@ -0,0 +1 @@
+https://www.drupal.org/project/color_field/issues/2854199#comment-12316266

sites/all/modules/contrib/fields/color_field/LICENSE.txt

@@ -0,0 +1,339 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

sites/all/modules/contrib/fields/color_field/README.txt

@@ -0,0 +1,66 @@
+-----------------------------------------------------------------------------
+CURRENT FEATURES
+-----------------------------------------------------------------------------
+Formatter
+
+  Plain text HEX code (#FFFFFF)
+  Css Declaration (color/background-color)
+
+Widget
+
+  Plain Text
+  Pre-selected Color Boxes
+  Simple Query Color 
+  (http://recursive-design.com/projects/jquery-simple-color/)
+
+-----------------------------------------------------------------------------
+ROAD MAP
+-----------------------------------------------------------------------------
+1) Make this module a base that could be used by any color picker.
+2) include http://www.eyecon.ro/colorpicker/
+3) include http://www.dematte.at/colorPicker/
+4) include http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
+-----------------------------------------------------------------------------
+REQUIREMENTS
+-----------------------------------------------------------------------------
+No specific requirement
+
+-----------------------------------------------------------------------------
+INSTALLATION
+-----------------------------------------------------------------------------
+To use this module, simply enable it.
+
+-----------------------------------------------------------------------------
+INSTALLATION - jQuery simple color
+-----------------------------------------------------------------------------
+If you want to use the jquery simple color plugin you need to download it and 
+place it in your libraries folder (this will usually be "sites/all/libraries/").
+You can download the plugin by using the following links or by Drush.
+
+  http://recursive-design.com/projects/jquery-simple-color/
+  https://github.com/recurser/jquery-simple-color
+
+-----------------------------------------------------------------------------
+USAGE
+-----------------------------------------------------------------------------
+Field
+1. Add the field to an node/entity
+2. Select the 'Color Field' field type
+3. Select the 'Color' widget you want
+
+-----------------------------------------------------------------------------
+CREDIT
+-----------------------------------------------------------------------------
+Maintainer and developer: targoo
+
+Development sponsored by Marique Calcus and written by Calcus David. 
+For professional support and development services contact targoo@gmail.com.
+
+-----------------------------------------------------------------------------
+More info
+-----------------------------------------------------------------------------
+http://www.w3.org/TR/css3-color/#color
+https://github.com/mikeemoo/ColorJizz-PHP
+http://www.colorhexa.com/ff0000
+https://github.com/PrimalPHP/Color/blob/master/lib/Primal/Color/Parser.php
+https://github.com/matthewbaggett/php-color/blob/master/Color.php

sites/all/modules/contrib/fields/color_field/color_field-2854199-7.patch

@@ -0,0 +1,26 @@
+From ef19dd13dceeb972e9b0fe1920d846901a076dd4 Mon Sep 17 00:00:00 2001
+From: kristiaanvandeneynde <kristiaanvandeneynde@1345130.no-reply.drupal.org>
+Date: Thu, 26 Oct 2017 14:24:28 +0200
+Subject: [PATCH] Issue #2854199 by pclaitte, kristiaanvandeneynde: Color Boxes
+ Widget default values doesn't works
+
+---
+ src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php | 2 +-
+ 1 file changed, 1 insertion(+), 1 deletion(-)
+
+diff --git a/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php b/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
+index 8268704..ad05958 100644
+--- a/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
++++ b/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
+@@ -96,7 +96,7 @@ class ColorFieldWidgetBox extends WidgetBase {
+     $default_colors = $this->getSetting('default_colors');
+     preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
+     foreach ($default_colors as $color) {
+-      $settings['palette'][] = $color[0];
++      $settings['default_colors'][] = $color[0];
+     }
+     $element['#attached']['drupalSettings']['color_field']['color_field_widget_box']['settings'] = $settings;
+ 
+-- 
+2.4.9 (Apple Git-60)
+

sites/all/modules/contrib/fields/color_field/color_field.info.yml

@@ -0,0 +1,13 @@
+name: Color Field
+type: module
+description: 'Provides a color field type to store the color value and opacity'
+# core: 8.x
+package: Field types
+dependencies:
+  - field
+
+# Information added by Drupal.org packaging script on 2017-04-13
+version: '8.x-2.0-rc1+11-dev'
+core: '8.x'
+project: 'color_field'
+datestamp: 1492097733

sites/all/modules/contrib/fields/color_field/color_field.libraries.yml

@@ -0,0 +1,55 @@
+color-field-widget-box:
+  remote: https://github.com/targoo/color_field_widget_box
+  version: 1.0.0
+  js:
+    js/color_field_widget_box.js: {}
+    js/color_field_widget_box.jquery.js: {}
+  css:
+    component:
+      css/color_field_widget_box.css: {}
+  license:
+    name: MIT
+    url: https://github.com/targoo/color_field_widget_box/LICENSE-MIT
+    gpl-compatible: true
+  dependencies:
+    - core/jquery
+    - core/drupalSettings
+
+color-field-widget-spectrum:
+  remote: https://github.com/bgrins/spectrum
+  version: 1.6.0
+  js:
+    /libraries/spectrum/spectrum.js: {}
+    js/color_field_widget_spectrum.jquery.js: {}
+  css:
+    component:
+      /libraries/spectrum/spectrum.css: {}
+  license:
+    name: MIT
+    url: https://github.com/bgrins/spectrum/blob/master/LICENSE
+    gpl-compatible: true
+  dependencies:
+    - core/jquery
+    - core/drupalSettings
+
+color-field-widget-grid:
+  remote: https://github.com/recurser/jquery-simple-color
+  version: 1.2.1
+  js:
+    /libraries/jquery-simple-color/jquery.simple-color.min.js: {}
+    js/color_field_widget_grid.jquery.js: {}
+  css:
+    component:
+      css/color_field_widget_grid.css: {}
+  license:
+    name: MIT
+    url: https://github.com/bgrins/spectrum/blob/master/LICENSE
+    gpl-compatible: true
+  dependencies:
+    - core/jquery
+    - core/drupalSettings
+
+color-field-formatter-swatch:
+  css:
+    component:
+      css/color_field_formatter_swatch.css: {}

sites/all/modules/contrib/fields/color_field/color_field.module

@@ -0,0 +1,160 @@
+<?php
+/**
+ * @file
+ * A color field with a custom color picker using the Field Types API.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Url;
+
+/**
+ * Implements hook_help().
+ */
+function color_field_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    case 'help.page.color_field':
+      $output = '';
+      $output .= '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('Color Field is simple field that use a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). See the <a href="!field">Field module help</a> and the <a href="!field_ui">Field UI help</a> pages for general information on fields and how to create and manage them. For more information, see the <a href="!link_documentation">online documentation for the Link module</a>.', array('!field' => Url::fromRoute('help.page', array('name' => 'field')), '!field_ui' => Url::fromRoute('help.page', array('name' => 'field_ui')), '!link_documentation' => 'https://drupal.org/documentation/modules/link')) . '</p>';
+      $output .= '<h3>' . t('Uses') . '</h3>';
+      $output .= '<dl>';
+      $output .= '<dt>' . t('Managing and displaying color fields') . '</dt>';
+      $output .= '<dd>' . t('The <em>settings</em> and the <em>display</em> of the link field can be configured separately. See the <a href="!field_ui">Field UI help</a> for more information on how to manage fields and their display.', array('!field_ui' => Url::fromRoute('help.page', array('name' => 'field_ui')))) . '</dd>';
+      $output .= '<dt>' . t('Adding link text') . '</dt>';
+      $output .= '<dd>' . t('In the field settings you can define additional link text to be <em>optional</em> or <em>required</em> in any link field.') . '</dd>';
+      $output .= '<dt>' . t('Displaying link text') . '</dt>';
+      $output .= '<dd>' . t('If link text has been submitted for a URL, then by default this link text is displayed as a link to the URL. If you want to display both the link text <em>and</em> the URL, choose the appropriate link format from the drop-down menu in the <em>Manage display</em> page. If you only want to display the URL even if link text has been submitted, choose <em>Link</em> as the format, and then change its <em>Format settings</em> to display <em>URL only</em>.') . '</dd>';
+      $output .= '<dt>' . t('Adding attributes to links') . '</dt>';
+      $output .= '<dd>' . t('You can add attributes to links, by changing the <em>Format settings</em> in the <em>Manage display</em> page. Adding <em>rel="nofollow"</em> notifies search engines that links should not be followed.') . '</dd>';
+      $output .= '<dt>' . t('Validating URLs') . '</dt>';
+      $output .= '<dd>' . t('All links are validated after a link field is filled in. They can include anchors or query strings.') . '</dd>';
+      $output .= '</dl>';
+      return $output;
+  }
+}
+
+/**
+ * Implements hook_theme().
+ */
+function color_field_theme() {
+  $theme = [];
+
+  $theme['color_field_formatter_swatch'] = array(
+      'variables' => array(
+        'shape' => NULL,
+        'color' => NULL,
+        'width' => NULL,
+        'height' => NULL,
+      ),
+  );
+
+  $theme['color_field_widget_box'] = array(
+    'render element' => 'element',
+  );
+
+  $theme['color_field_widget_spectrum'] = array(
+    'render element' => 'element',
+  );
+
+  return $theme;
+}
+
+/**
+ * Prepares variables for the color_field formatter swatch template.
+ *
+ * This template outputs a color swatch.
+ *
+ * Default template: color-field-formatter-swatch.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *     - color: The color background.
+ *     - shape: The shape of the color swatch.
+ *     - width: The width of the color swatch.
+ *     - height: The height of the color swatch.
+ */
+function template_preprocess_color_field_formatter_swatch(&$variables) {
+}
+
+
+/**
+ * Prepares variables for color_field widget box wrapper template.
+ *
+ * Default template: color-field-widget-box.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #title, #children, #required, #attributes.
+ */
+function template_preprocess_color_field_widget_box(&$variables) {
+  $element = $variables['element'];
+
+  if (!empty($element['#title'])) {
+    $variables['title'] = $element['#title'];
+  }
+
+  if (!empty($element['#description'])) {
+    $variables['description'] = $element['#description'];
+  }
+
+  $variables['color'] = $element['color'];
+
+  if (!empty($element['opacity'])) {
+    $variables['opacity'] = $element['opacity'];
+  }
+
+  // Suppress error messages.
+  $variables['errors'] = NULL;
+
+  if (!empty($element['#description'])) {
+    $variables['description'] = $element['#description'];
+  }
+
+  $variables['required'] = FALSE;
+  if (!empty($element['#required'])) {
+    $variables['required'] = TRUE;
+  }
+
+}
+
+/**
+ * Prepares variables for color_field widget box wrapper template.
+ *
+ * Default template: color-field-widget-box.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties of the element.
+ *     Properties used: #title, #children, #required, #attributes.
+ */
+function template_preprocess_color_field_widget_spectrum(&$variables) {
+  $element = $variables['element'];
+
+  if (!empty($element['#title'])) {
+    $variables['title'] = $element['#title'];
+  }
+
+  if (!empty($element['#description'])) {
+    $variables['description'] = $element['#description'];
+  }
+
+  $variables['color'] = $element['color'];
+
+  if (!empty($element['opacity'])) {
+    $variables['opacity'] = $element['opacity'];
+  }
+
+  // Suppress error messages.
+  $variables['errors'] = NULL;
+
+  if (!empty($element['#description'])) {
+    $variables['description'] = $element['#description'];
+  }
+
+  $variables['required'] = FALSE;
+  if (!empty($element['#required'])) {
+    $variables['required'] = TRUE;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/config/schema/color_field.schema.yml

@@ -0,0 +1,111 @@
+# Schema for the configuration files of the color field module.
+
+field.formatter.settings.color_field_formatter_text:
+  type: mapping
+  label: 'Color text format settings'
+  mapping:
+    format:
+      type: label
+      label: 'Format'
+    opacity:
+      type: label
+      label: 'Display opacity'
+
+field.formatter.settings.color_field_formatter_swatch:
+  type: mapping
+  label: 'Color swatch format settings'
+  mapping:
+    shape:
+      type: label
+      label: 'Shape'
+    width:
+      type: label
+      label: 'Width'
+    height:
+      type: label
+      label: 'Height'
+    opacity:
+      type: label
+      label: 'Display opacity'
+
+field.formatter.settings.color_field_formatter_css:
+  type: mapping
+  label: 'Color CSS declaration format settings'
+  mapping:
+    selector:
+      type: label
+      label: 'Selector'
+    property:
+      type: label
+      label: 'Property'
+    important:
+      type: label
+      label: 'Important'
+    opacity:
+      type: label
+      label: 'Display opacity'
+
+field.widget.settings.color_field_widget_default:
+  type: mapping
+  label: 'Color default format settings'
+  mapping:
+    placeholder_color:
+      type: label
+      label: 'Color placeholder'
+    placeholder_opacity:
+      type: label
+      label: 'Opacity placeholder'
+
+field.widget.settings.color_field_widget_box:
+  type: mapping
+  label: 'Color boxes format settings'
+  mapping:
+    default_colors:
+      type: label
+      label: 'Default colors'
+
+field.widget.settings.color_field_widget_grid:
+  type: mapping
+  label: 'Color grid format settings'
+  mapping:
+    cell_width:
+      type: label
+      label: 'Cell width'
+    cell_height:
+      type: label
+      label: 'Height width'
+    cell_margin:
+      type: label
+      label: 'Cell margin'
+    box_width:
+      type: label
+      label: 'Box width'
+    box_height:
+      type: label
+      label: 'Box height'
+    columns:
+      type: label
+      label: 'Columns number'
+
+field.widget.settings.color_field_widget_spectrum:
+  type: mapping
+  label: 'Color spectrum format settings'
+  mapping:
+    show_input:
+      type: label
+      label: 'Show Input'
+    show_palette:
+      type: label
+      label: 'Show Palette'
+    palette:
+      type: label
+      label: 'Color Palette'
+    show_palette_only:
+      type: label
+      label: 'Show Palette Only'
+    show_buttons:
+      type: label
+      label: 'Show Buttons'
+    allow_empty:
+      type: label
+      label: 'Allow Empty'

sites/all/modules/contrib/fields/color_field/css/color_field_formatter_swatch.css

@@ -0,0 +1,15 @@
+.color_field {}
+.color_field__swatch {}
+.color_field__swatch--square {
+}
+.color_field__swatch--circle {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+}
+
+.color_field__swatch--parallelogram {
+  -webkit-transform: skew(20deg);
+  -moz-transform: skew(20deg);
+  -o-transform: skew(20deg);
+}

sites/all/modules/contrib/fields/color_field/css/color_field_widget_box.css

@@ -0,0 +1,32 @@
+.color_field_widget_box {
+}
+
+.color_field_widget_box__square {
+  border: 1px solid #ffffff;
+  cursor: pointer;
+  font-family: monospace;
+  font-size: 1.2em;
+  margin: 0 3px;
+  padding: 1px 8px;
+}
+
+.color_field_widget_box__square.active,
+.color_field_widget_box__square:hover {
+  padding: 9px 16px;
+}
+
+.color_field_widget_box__square--transparent {
+  background-image: url("../images/transparent_box16.gif");
+  background-position: 0 3px;
+  background-repeat: no-repeat;
+  margin: 0 3px;
+  padding: 2px 8px;
+}
+
+.color_field_widget_box__square--transparent.active,
+.color_field_widget_box__square--transparent:hover {
+  background-image: url(../images/transparent_box32.gif);
+  background-position: 0 3px;
+  background-repeat: no-repeat;
+  padding: 10px 16px;
+}

sites/all/modules/contrib/fields/color_field/css/color_field_widget_grid.css

@@ -0,0 +1,12 @@
+.simpleColorDisplay {
+  float: left;
+}
+
+.simpleColorContainer {
+  float: left;
+}
+
+.simpleColorChooser {
+  z-index: 1;
+}
+

sites/all/modules/contrib/fields/color_field/js/color_field_widget_box.jquery.js

@@ -0,0 +1,42 @@
+/**
+ * @file
+ * Attaches behaviors for Drupal's color field.
+ */
+
+(function ($, Drupal) {
+
+    'use strict';
+
+    /**
+     * Enables box widget on color elements.
+     *
+     * @type {Drupal~behavior}
+     *
+     * @prop {Drupal~behaviorAttach} attach
+     *   Attaches a box widget to a color input element.
+     */
+    Drupal.behaviors.color_field = {
+        attach: function (context, settings) {
+
+            var $context = $(context);
+
+            var default_colors = settings.color_field.color_field_widget_box.settings.default_colors;
+
+            $context.find('.color-field-widget-box-form').each(function (index, element) {
+                var $element = $(element);
+                var $input = $element.prev().find('input');
+                $element.empty().addColorPicker({
+                    currentColor: $input.val(),
+                    colors: default_colors,
+                    blotchClass:'color_field_widget_box__square',
+                    blotchTransparentClass:'color_field_widget_box__square--transparent',
+                    clickCallback: function(color) {
+                        $input.val(color).trigger('change');
+                    }
+                });
+            });
+
+        },
+    };
+
+})(jQuery, Drupal);

sites/all/modules/contrib/fields/color_field/js/color_field_widget_box.js

@@ -0,0 +1,74 @@
+/**
+ * Color Field jQuery
+ */
+(function ($) {
+jQuery.fn.addColorPicker = function (props) {
+  if (!props) { props = []; }
+
+  props = jQuery.extend({
+    currentColor:'',
+    blotchElemType: 'span',
+    blotchClass:'colorBox',
+    blotchTransparentClass:'transparentBox',
+    clickCallback: function(ignoredColor) {},
+    iterationCallback: null,
+    fillString: ' ',
+    fillStringX: '?',
+    colors: [
+      '#AC725E','#D06B64','#F83A22', '#FA573C', '#FF7537', '#FFAD46',
+      '#42D692','#16A765', '#7BD148','#B3DC6C','#FBE983',
+      '#92E1C0', '#9FE1E7', '#9FC6E7', '#4986E7','#9A9CFF',
+      '#B99AFF','#C2C2C2','#CABDBF','#CCA6AC','#F691B2',
+      '#CD74E6','#A47AE2',
+    ]
+  }, props);
+
+  var count = props.colors.length;
+  for (var i = 0; i < count; ++i) {
+    var color = props.colors[i];
+    var elem = jQuery('<' + props.blotchElemType + '/>')
+      .addClass(props.blotchClass)
+      .attr('color',color)
+      .css('background-color',color);
+    // jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
+    if (props.currentColor == color) {
+      elem.addClass('active');
+    }
+    if (props.clickCallback) {
+      elem.click(function() {
+        jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
+        jQuery(this).addClass('active');
+        props.clickCallback(jQuery(this).attr('color'));
+      });
+    }
+    this.append(elem);
+    if (props.iterationCallback) {
+      props.iterationCallback(this, elem, color, i);
+    }
+  }
+
+  var elem = jQuery('<' + props.blotchElemType + '/>')
+    .addClass(props.blotchTransparentClass)
+    .attr('color', '')
+    .css('background-color', '');
+
+  if (props.currentColor == '') {
+    elem.addClass('active');
+  }
+
+  if (props.clickCallback) {
+    elem.click(function() {
+      jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
+      jQuery(this).addClass('active');
+      props.clickCallback(jQuery(this).attr('color'));
+    });
+  }
+  this.append(elem);
+  if (props.iterationCallback) {
+    props.iterationCallback(this, elem, color, i);
+  }
+
+  return this;
+};
+
+})(jQuery);

sites/all/modules/contrib/fields/color_field/js/color_field_widget_grid.jquery.js

@@ -0,0 +1,38 @@
+/**
+ * @file
+ * Javascript for Color Field.
+ */
+(function ($, Drupal) {
+
+  'use strict';
+
+  /**
+   * Enables grid widget on color elements.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches a grid widget to a color input element.
+   */
+  Drupal.behaviors.color_field_jquery_simple_color = {
+    attach: function (context, settings) {
+      var $context = $(context);
+      var settings = settings.color_field.color_field_widget_grid;
+
+      $context.find('.js-color-field-widget-grid__color').each(function (index, element) {
+        var $element = $(element);
+
+        $element.simpleColor({
+          cellWidth: settings.cell_width,
+          cellHeight: settings.cell_height,
+          cellMargin: settings.cell_margin,
+          boxWidth: settings.box_width,
+          boxHeight: settings.box_height
+        });
+
+      });
+
+    }
+  };
+
+})(jQuery, Drupal);

sites/all/modules/contrib/fields/color_field/js/color_field_widget_spectrum.jquery.js

@@ -0,0 +1,61 @@
+/**
+ * @file
+ * Javascript for Color Field.
+ */
+(function ($, Drupal) {
+
+  'use strict';
+
+  /**
+   * Enables spectrum on color elements.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches a spectrum widget to a color input element.
+   */
+  Drupal.behaviors.color_field_spectrum = {
+    attach: function (context, settings) {
+
+      var $context = $(context);
+
+      var spectrum_settings = settings.color_field.color_field_widget_spectrum;
+
+      $context.find('.js-color-field-widget-spectrum').each(function (index, element) {
+        var $element = $(element);
+        var $element_color = $element.find('.js-color-field-widget-spectrum__color');
+        var $element_opacity = $element.find('.js-color-field-widget-spectrum__opacity');
+
+        $element_color.spectrum({
+          showInitial: true,
+          preferredFormat: "hex",
+          showInput: spectrum_settings.show_input,
+          showAlpha: spectrum_settings.show_alpha,
+          showPalette: spectrum_settings.show_palette,
+          showPaletteOnly: !!spectrum_settings.show_palette_only,
+          palette: [spectrum_settings.palette],
+          showButtons: spectrum_settings.show_buttons,
+          allowEmpty: spectrum_settings.allow_empty,
+
+          change: function(tinycolor) {
+            $element_color.val(tinycolor.toHexString());
+            $element_opacity.val(tinycolor._roundA);
+          }
+
+        });
+
+        // Set alpha value on load.
+        if (!!spectrum_settings.show_alpha) {
+          var tinycolor = $element_color.spectrum("get");
+          var alpha = $element_opacity.val();
+          if (alpha > 0) {
+            tinycolor.setAlpha(alpha);
+            $element_color.spectrum("set", tinycolor);
+          }
+        }
+
+      });
+    }
+  };
+
+})(jQuery, Drupal);

sites/all/modules/contrib/fields/color_field/src/ColorBase.php

@@ -0,0 +1,214 @@
+<?php
+
+namespace Drupal\color_field;
+
+abstract class ColorBase implements ColorInterface {
+
+  /**
+   * @var
+   */
+  protected $opacity;
+
+  /**
+   * Convert the color to Hex format
+   *
+   * @return ColorHex
+   *  The color in Hex format.
+   */
+  abstract function toHex();
+
+  /**
+   * Convert the color to RGB format
+   *
+   * @return ColorRGB
+   *  The color in RGB format.
+   */
+  abstract function toRGB();
+
+  /**
+   * Convert the color to a string format
+   *
+   * @return String
+   *  The color in string format.
+   */
+  abstract function toString();
+
+  /**
+   * Get the opacity
+   *
+   * @return float
+   *  The opacity value between 0 and 1.
+   */
+  public function getOpacity() {
+    return $this->opacity;;
+  }
+
+  /**
+   * Set the opacity
+   *
+   * @return float
+   *  The opacity value between 0 and 1.
+   */
+  public function setOpacity($opacity) {
+    $this->opacity = $opacity;
+  }
+
+  static $patterns = array(
+    'cmyk'  => '/^(?:device-)?cmyk\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d+(?:\.\d+)?|\.\d+)\s*\)/',
+    'rgba'  => '/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d+(?:\.\d+)?|\.\d+)\s*\)/',
+    'rgb' => '/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/',
+    'hsla'  => '/^hsla\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(\d+(?:\.\d+)?|\.\d+)\s*\)/',
+    'hsl' => '/^hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/',
+    'hsva'  => '/^hsva\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(\d+(?:\.\d+)?|\.\d+)\s*\)$/',
+    'hsv' => '/^hsv\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/',
+    'hex6'  => '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/',
+    'hex3'  => '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/'
+  );
+
+  static $named_colors = array(
+    "aliceblue" => "f0f8ff",
+    "antiquewhite" => "faebd7",
+    "aqua" => "00ffff",
+    "aquamarine" => "7fffd4",
+    "azure" => "f0ffff",
+    "beige" => "f5f5dc",
+    "bisque" => "ffe4c4",
+    "black" => "000000",
+    "blanchedalmond" => "ffebcd",
+    "blue" => "0000ff",
+    "blueviolet" => "8a2be2",
+    "brown" => "a52a2a",
+    "burlywood" => "deb887",
+    "cadetblue" => "5f9ea0",
+    "chartreuse" => "7fff00",
+    "chocolate" => "d2691e",
+    "coral" => "ff7f50",
+    "cornflowerblue" => "6495ed",
+    "cornsilk" => "fff8dc",
+    "crimson" => "dc143c",
+    "cyan" => "00ffff",
+    "darkblue" => "00008b",
+    "darkcyan" => "008b8b",
+    "darkgoldenrod" => "b8860b",
+    "darkgray" => "a9a9a9",
+    "darkgreen" => "006400",
+    "darkkhaki" => "bdb76b",
+    "darkmagenta" => "8b008b",
+    "darkolivegreen" => "556b2f",
+    "darkorange" => "ff8c00",
+    "darkorchid" => "9932cc",
+    "darkred" => "8b0000",
+    "darksalmon" => "e9967a",
+    "darkseagreen" => "8fbc8f",
+    "darkslateblue" => "483d8b",
+    "darkslategray" => "2f4f4f",
+    "darkturquoise" => "00ced1",
+    "darkviolet" => "9400d3",
+    "deeppink" => "ff1493",
+    "deepskyblue" => "00bfff",
+    "dimgray" => "696969",
+    "dodgerblue" => "1e90ff",
+    "feldspar" => "d19275",
+    "firebrick" => "b22222",
+    "floralwhite" => "fffaf0",
+    "forestgreen" => "228b22",
+    "fuchsia" => "ff00ff",
+    "gainsboro" => "dcdcdc",
+    "ghostwhite" => "f8f8ff",
+    "gold" => "ffd700",
+    "goldenrod" => "daa520",
+    "gray" => "808080",
+    "green" => "008000",
+    "greenyellow" => "adff2f",
+    "honeydew" => "f0fff0",
+    "hotpink" => "ff69b4",
+    "indianred " => "cd5c5c",
+    "indigo " => "4b0082",
+    "ivory" => "fffff0",
+    "khaki" => "f0e68c",
+    "lavender" => "e6e6fa",
+    "lavenderblush" => "fff0f5",
+    "lawngreen" => "7cfc00",
+    "lemonchiffon" => "fffacd",
+    "lightblue" => "add8e6",
+    "lightcoral" => "f08080",
+    "lightcyan" => "e0ffff",
+    "lightgoldenrodyellow" => "fafad2",
+    "lightgrey" => "d3d3d3",
+    "lightgreen" => "90ee90",
+    "lightpink" => "ffb6c1",
+    "lightsalmon" => "ffa07a",
+    "lightseagreen" => "20b2aa",
+    "lightskyblue" => "87cefa",
+    "lightslateblue" => "8470ff",
+    "lightslategray" => "778899",
+    "lightsteelblue" => "b0c4de",
+    "lightyellow" => "ffffe0",
+    "lime" => "00ff00",
+    "limegreen" => "32cd32",
+    "linen" => "faf0e6",
+    "magenta" => "ff00ff",
+    "maroon" => "800000",
+    "mediumaquamarine" => "66cdaa",
+    "mediumblue" => "0000cd",
+    "mediumorchid" => "ba55d3",
+    "mediumpurple" => "9370d8",
+    "mediumseagreen" => "3cb371",
+    "mediumslateblue" => "7b68ee",
+    "mediumspringgreen" => "00fa9a",
+    "mediumturquoise" => "48d1cc",
+    "mediumvioletred" => "c71585",
+    "midnightblue" => "191970",
+    "mintcream" => "f5fffa",
+    "mistyrose" => "ffe4e1",
+    "moccasin" => "ffe4b5",
+    "navajowhite" => "ffdead",
+    "navy" => "000080",
+    "oldlace" => "fdf5e6",
+    "olive" => "808000",
+    "olivedrab" => "6b8e23",
+    "orange" => "ffa500",
+    "orangered" => "ff4500",
+    "orchid" => "da70d6",
+    "palegoldenrod" => "eee8aa",
+    "palegreen" => "98fb98",
+    "paleturquoise" => "afeeee",
+    "palevioletred" => "d87093",
+    "papayawhip" => "ffefd5",
+    "peachpuff" => "ffdab9",
+    "peru" => "cd853f",
+    "pink" => "ffc0cb",
+    "plum" => "dda0dd",
+    "powderblue" => "b0e0e6",
+    "purple" => "800080",
+    "red" => "ff0000",
+    "rosybrown" => "bc8f8f",
+    "royalblue" => "4169e1",
+    "saddlebrown" => "8b4513",
+    "salmon" => "fa8072",
+    "sandybrown" => "f4a460",
+    "seagreen" => "2e8b57",
+    "seashell" => "fff5ee",
+    "sienna" => "a0522d",
+    "silver" => "c0c0c0",
+    "skyblue" => "87ceeb",
+    "slateblue" => "6a5acd",
+    "slategray" => "708090",
+    "snow" => "fffafa",
+    "springgreen" => "00ff7f",
+    "steelblue" => "4682b4",
+    "tan" => "d2b48c",
+    "teal" => "008080",
+    "thistle" => "d8bfd8",
+    "tomato" => "ff6347",
+    "turquoise" => "40e0d0",
+    "violet" => "ee82ee",
+    "violetred" => "d02090",
+    "wheat" => "f5deb3",
+    "white" => "ffffff",
+    "whitesmoke" => "f5f5f5",
+    "yellow" => "ffff00",
+    "yellowgreen" => "9acd32"
+  );
+
+}

sites/all/modules/contrib/fields/color_field/src/ColorCMY.php

@@ -0,0 +1,113 @@
+<?php
+
+namespace Drupal\color_field;
+
+/**
+ * ColorCMY represents the CMY color format.
+ */
+class ColorCMY extends ColorBase {
+
+  /**
+   * The cyan
+   * @var float
+   */
+  private $cyan;
+
+  /**
+   * The magenta
+   * @var float
+   */
+  private $magenta;
+
+  /**
+   * The yellow
+   * @var float
+   */
+  private $yellow;
+
+  /**
+   * Create a new CMYK color
+   *
+   * @param float $cyan
+   *  The cyan
+   * @param float $magenta
+   *  The magenta
+   * @param float $yellow
+   *  The yellow
+   * @param float $opacity
+   *  The opacity
+   */
+  public function __construct($cyan, $magenta, $yellow, $opacity) {
+    $this->cyan = $cyan;
+    $this->magenta = $magenta;
+    $this->yellow = $yellow;
+    $this->opacity = floatval($opacity);
+  }
+
+  /**
+   * Get the amount of Cyan
+   *
+   * @return int The amount of cyan
+   */
+  public function getCyan() {
+    return $this->cyan;
+  }
+
+  /**
+   * Get the amount of Magenta
+   *
+   * @return int The amount of magenta
+   */
+  public function getMagenta() {
+    return $this->magenta;
+  }
+
+  /**
+   * Get the amount of Yellow
+   *
+   * @return int The amount of yellow
+   */
+  public function getYellow() {
+    return $this->yellow;
+  }
+
+  /**
+   * A string representation of this color in the current format
+   *
+   * @param bool $opacity
+   *   Whether or not to display the opacity.
+   *
+   * @return string
+   *   The color in format: #RRGGBB
+   */
+  public function toString($opacity = TRUE) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toHex() {
+    return $this->toRGB()->toHex();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toRGB() {
+    $red = (1 - $this->cyan) * 255;
+    $green = (1 - $this->magenta) * 255;
+    $blue = (1 - $this->yellow) * 255;
+    return new ColorRGB($red, $green, $blue, $this->getOpacity());
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toCMY() {
+    $cyan = ($this->cyan * (1 - $this->key) + $this->key);
+    $magenta = ($this->magenta * (1 - $this->key) + $this->key);
+    $yellow = ($this->yellow * (1 - $this->key) + $this->key);
+    return new ColorCMY($cyan, $magenta, $yellow);
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/ColorCMYK.php

@@ -0,0 +1,124 @@
+<?php
+
+namespace Drupal\color_field;
+
+/**
+ * ColorCMYK represents the CMYK color format.
+ */
+class ColorCMYK extends ColorBase {
+
+  /**
+   * The cyan
+   * @var float
+   */
+  private $cyan;
+
+  /**
+   * The magenta
+   * @var float
+   */
+  private $magenta;
+
+  /**
+   * The yellow
+   * @var float
+   */
+  private $yellow;
+
+  /**
+   * The key (black)
+   * @var float
+   */
+  private $key;
+
+  /**
+   * Create a new CMYK color
+   *
+   * @param float $cyan The cyan
+   * @param float $magenta The magenta
+   * @param float $yellow The yellow
+   * @param float $key The key (black)
+   * @param float $opacity
+   *  The opacity
+   */
+  public function __construct($cyan, $magenta, $yellow, $key, $opacity) {
+    $this->cyan = $cyan;
+    $this->magenta = $magenta;
+    $this->yellow = $yellow;
+    $this->key = $key;
+    $this->opacity = floatval($opacity);
+  }
+
+  /**
+   * Get the amount of Cyan
+   *
+   * @return int The amount of cyan
+   */
+  public function getCyan() {
+    return $this->cyan;
+  }
+
+  /**
+   * Get the amount of Magenta
+   *
+   * @return int The amount of magenta
+   */
+  public function getMagenta() {
+    return $this->magenta;
+  }
+
+  /**
+   * Get the amount of Yellow
+   *
+   * @return int The amount of yellow
+   */
+  public function getYellow() {
+    return $this->yellow;
+  }
+
+  /**
+   * Get the key (black)
+   *
+   * @return int The amount of black
+   */
+  public function getKey() {
+    return $this->key;
+  }
+
+  /**
+   * A string representation of this color in the current format
+   *
+   * @param bool $opacity
+   *   Whether or not to display the opacity.
+   *
+   * @return string
+   *   The color in format: #RRGGBB
+   */
+  public function toString($opacity = TRUE) {
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toHex() {
+    return $this->toRGB()->toHex();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toRGB() {
+    return $this->toCMY()->toRGB();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toCMY() {
+    $cyan = ($this->cyan * (1 - $this->key) + $this->key);
+    $magenta = ($this->magenta * (1 - $this->key) + $this->key);
+    $yellow = ($this->yellow * (1 - $this->key) + $this->key);
+    return new ColorCMY($cyan, $magenta, $yellow, $this->getOpacity());
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/ColorHex.php

@@ -0,0 +1,87 @@
+<?php
+
+namespace Drupal\color_field;
+
+/**
+ * Hex represents the Hex color format
+ */
+class ColorHex extends ColorBase {
+
+  /**
+   * The Hex triplet of the color.
+   * @var int
+   */
+  private $color;
+
+  /**
+   * Create a new Hex from a string.
+   *
+   * @param string $color
+   *   The string hex value (i.e. "FFFFFF").
+   * @param string $opacity
+   *   The opacity value.
+   * @return ColorHex
+   *   The ColorHex object.
+   * @throws Exception
+   */
+  public function __construct($color, $opacity) {
+    $color = trim(strtolower($color));
+
+    if (substr($color, 0, 1) === '#') {
+      $color = substr($color, 1);
+    }
+
+    if (strlen($color) === 3) {
+      $color = str_repeat($color[0], 2) . str_repeat($color[1], 2) . str_repeat($color[2], 2);
+    }
+
+    if (!preg_match('/[0-9A-F]{6}/i', $color)) {
+      // @throws exception.
+    }
+
+    $this->color = hexdec($color);
+    $this->setOpacity(floatval($opacity));
+
+    return $this;
+  }
+
+  /**
+   * A string representation of this color in the current format
+   *
+   * @param bool $opacity
+   *   Whether or not to display the opacity.
+   *
+   * @return string
+   *   The color in format: #RRGGBB
+   */
+  public function toString($opacity = TRUE) {
+    $rgb = $this->toRGB();
+    $hex = '#';
+    $hex .= str_pad(dechex($rgb->getRed()), 2, "0", STR_PAD_LEFT);
+    $hex .= str_pad(dechex($rgb->getGreen()), 2, "0", STR_PAD_LEFT);
+    $hex .= str_pad(dechex($rgb->getBlue()), 2, "0", STR_PAD_LEFT);
+    if ($opacity) {
+      $hex .= ' ' . $this->getOpacity();
+    }
+    return strtoupper($hex);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toHex() {
+    return $this;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toRGB() {
+    $red = (($this->color & 0xFF0000) >> 16);
+    $green = (($this->color & 0x00FF00) >> 8);
+    $blue = (($this->color & 0x0000FF));
+    $opacity = $this->getOpacity();
+    return new ColorRGB($red, $green, $blue, $opacity);
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/ColorInterface.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Drupal\color_field;
+
+/**
+ * Defines a common interface for color classes.
+ */
+interface ColorInterface {
+
+  public function toString();
+
+  public function toHex();
+
+  public function toRGB();
+
+  //public function toHSV();
+
+  //public function toHSL();
+
+  //public function toRGB();
+
+  //public function toCMYK();
+
+  //public function toCSS();
+
+}

sites/all/modules/contrib/fields/color_field/src/ColorRGB.php

@@ -0,0 +1,120 @@
+<?php
+
+namespace Drupal\color_field;
+
+/**
+ * RGB represents the RGB color format
+ */
+class ColorRGB extends ColorBase {
+
+  /**
+   * The red value (0-255)
+   * @var float
+   */
+  private $red;
+
+  /**
+   * The green value (0-255)
+   * @var float
+   */
+  private $green;
+
+  /**
+   * The blue value (0-255)
+   * @var float
+   */
+  private $blue;
+
+  /**
+   * Create a new RGB color
+   *
+   * @param int $red
+   *   The red (0-255)
+   * @param int $green
+   *   The green (0-255)
+   * @param int $blue
+   *   The blue (0-255)
+   * @param float $opacity
+   *   The opacity
+   *
+   * @throws Exception
+   */
+  public function __construct($red, $green, $blue, $opacity) {
+
+    if ($red < 0 || $red > 255) {
+      // @throws exception.
+    }
+    if ($green < 0 || $green > 255) {
+      // @throws exception.
+    }
+    if ($blue < 0 || $blue > 255) {
+      // @throws exception.
+    }
+
+    $this->red = $red;
+    $this->green = $green;
+    $this->blue = $blue;
+    $this->opacity = floatval($opacity);
+  }
+
+  /**
+   * Get the red value (rounded)
+   *
+   * @return int The red value
+   */
+  public function getRed() {
+    return (0.5 + $this->red) | 0;
+  }
+
+  /**
+   * Get the green value (rounded)
+   *
+   * @return int The green value
+   */
+  public function getGreen() {
+    return (0.5 + $this->green) | 0;
+  }
+
+  /**
+   * Get the blue value (rounded)
+   *
+   * @return int The blue value
+   */
+  public function getBlue() {
+    return (0.5 + $this->blue) | 0;
+  }
+
+  /**
+   * A string representation of this color in the current format
+   *
+   * @param bool $opacity
+   *   Whether or not to display the opacity.
+   *
+   * @return string
+   *   The color in format: #RRGGBB
+   */
+  public function toString($opacity = TRUE) {
+    if ($opacity) {
+      $output = 'rgba(' . $this->getRed() . ',' . $this->getGreen() . ',' . $this->getBlue() . ',' . $this->getOpacity() . ')';
+    }
+    else {
+      $output = 'rgb(' . $this->getRed() . ',' . $this->getGreen() . ',' . $this->getBlue() . ')';
+    }
+    return strtoupper($output);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toHex() {
+    return new ColorHex($this->getRed() << 16 | $this->getGreen() << 8 | $this->getBlue(), $this->getOpacity());
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function toRGB() {
+    return $this;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldFormatter/ColorFieldFormatterCss.php

@@ -0,0 +1,160 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldFormatter\ColorFieldFormatterCss.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldFormatter;
+
+use Drupal\color_field\Plugin\Field\FieldType\ColorFieldType;
+use Drupal\Core\Field\FormatterBase;
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\color_field\ColorHex;
+
+/**
+ * Plugin implementation of the color_field css declaration formatter.
+ *
+ * @FieldFormatter(
+ *   id = "color_field_formatter_css",
+ *   module = "color_field",
+ *   label = @Translation("Color CSS declaration"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldFormatterCss extends FormatterBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'selector' => 'body',
+      'property' => 'background-color',
+      'important' => TRUE,
+      'opacity' => TRUE,
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $opacity = $this->getFieldSetting('opacity');
+
+    $elements = [];
+
+    $elements['selector'] = array(
+      '#title' => t('Selector'),
+      '#description' => t('A valid CSS selector such as <code>.links > li > a, #logo</code>.'),
+      '#type' => 'textarea',
+      '#rows' => '1',
+      '#default_value' => $this->getSetting('selector'),
+      '#required' => TRUE,
+      '#placeholder' => 'body > div > a',
+    );
+    //$element['token'] = array(
+    //  '#theme' => 'token_tree',
+    //  '#token_types' => array($instance['entity_type']),
+    //  '#dialog' => TRUE,
+    //);
+    $elements['property'] = array(
+      '#title' => t('Property'),
+      '#description' => t(''),
+      '#type' => 'select',
+      '#default_value' => $this->getSetting('property'),
+      '#required' => TRUE,
+      '#options' => array(
+        'background-color' => t('Background color'),
+        'color' => t('Text color'),
+      ),
+    );
+    $elements['important'] = array(
+      '#title' => t('Important'),
+      '#description' => t('Whenever this declaration is more important than others.'),
+      '#type' => 'checkbox',
+      '#default_value' => $this->getSetting('important'),
+    );
+
+    if ($opacity) {
+      $elements['opacity'] = array(
+        '#type' => 'checkbox',
+        '#title' => t('Display opacity'),
+        '#default_value' => $this->getSetting('opacity'),
+      );
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $opacity = $this->getFieldSetting('opacity');
+    $settings = $this->getSettings();
+
+    $summary = [];
+
+    $summary[] = t('CSS selector : @css_selector', array('@css_selector' => $settings['selector']));
+    $summary[] = t('CSS property : @css_property', array('@css_property' => $settings['property']));
+    $summary[] = t('!important declaration : @important_declaration', array('@important_declaration' => (($settings['important']) ? t('Yes') : t('No'))));
+
+    if ($opacity && $settings['opacity']) {
+      $summary[] = t('Display with opacity.');
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $settings = $this->getSettings();
+
+    $elements = [];
+
+    foreach ($items as $delta => $item) {
+
+      $value = $this->viewValue($item);
+      $selector = $settings['selector'];
+      $important = ($settings['important']) ? ' !important' : '';
+      $property = $settings['property'];
+
+      $inline_css = $selector . ' { ' . $property . ': ' . $value . $important . '; }';
+
+      // @todo: Not sure this is the best way.
+      // https://www.drupal.org/node/2391025
+      // https://www.drupal.org/node/2274843
+      $elements['#attached']['html_head'][] = [[
+        '#tag' => 'style',
+        '#value' => $inline_css,
+      ], 'colorfield_css'];
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function viewValue(ColorFieldType $item) {
+    $opacity = $this->getFieldSetting('opacity');
+    $settings = $this->getSettings();
+
+    $color_hex = new ColorHex($item->color, $item->opacity);
+
+    if ($opacity && $settings['opacity']) {
+      $rgbtext = $color_hex->toRGB()->toString(TRUE);
+    } else {
+      $rgbtext = $color_hex->toRGB()->toString(FALSE);
+    }
+
+    return $rgbtext;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldFormatter/ColorFieldFormatterSwatch.php

@@ -0,0 +1,166 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldFormatter\ColorFieldFormatterSwatch.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldFormatter;
+
+use Drupal\color_field\Plugin\Field\FieldType\ColorFieldType;
+use Drupal\Core\Field\FormatterBase;
+use Drupal\Core\Field\FieldItemInterface;
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\color_field\ColorHex;
+
+/**
+ * Plugin implementation of the color_field swatch formatter.
+ *
+ * @FieldFormatter(
+ *   id = "color_field_formatter_swatch",
+ *   module = "color_field",
+ *   label = @Translation("Color swatch"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldFormatterSwatch extends FormatterBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'shape' => 'square',
+      'width' => 50,
+      'height' => 50,
+      'opacity' => TRUE,
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $opacity = $this->getFieldSetting('opacity');
+
+    $elements = [];
+
+    $elements['shape'] = array(
+      '#type' => 'select',
+      '#title' => t('Shape'),
+      '#options' => $this->getShape(),
+      '#default_value' => $this->getSetting('shape'),
+      '#description' => t(''),
+    );
+    $elements['width'] = array(
+      '#type' => 'number',
+      '#title' => t('Width'),
+      '#default_value' => $this->getSetting('width'),
+      '#min' => 1,
+      '#description' => t(''),
+    );
+    $elements['height'] = array(
+      '#type' => 'number',
+      '#title' => t('Height'),
+      '#default_value' => $this->getSetting('height'),
+      '#min' => 1,
+      '#description' => t(''),
+    );
+
+    if ($opacity) {
+      $elements['opacity'] = array(
+        '#type' => 'checkbox',
+        '#title' => t('Display opacity'),
+        '#default_value' => $this->getSetting('opacity'),
+      );
+    }
+
+    return $elements;
+  }
+
+  /**
+   * @param string $shape
+   * @return array|string
+   */
+  protected function getShape($shape = NULL) {
+    $formats = [];
+    $formats['square'] = $this->t('Square');
+    $formats['circle'] = $this->t('Circle');
+    $formats['parallelogram'] = $this->t('Parallelogram');
+
+    if ($shape) {
+      return $formats[$shape];
+    }
+    return $formats;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $opacity = $this->getFieldSetting('opacity');
+    $settings = $this->getSettings();
+
+    $summary = [];
+
+    $summary[] = t('@shape', array(
+      '@shape' => $this->getShape($settings['shape']),
+    ));
+
+    $summary[] = t('Width: @width Height: @height', array(
+      '@width' => $settings['width'],
+      '@height' => $settings['height']
+    ));
+
+    if ($opacity && $settings['opacity']) {
+      $summary[] = t('Display with opacity.');
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $settings = $this->getSettings();
+
+    $elements = [];
+
+    $elements['#attached']['library'][] = 'color_field/color-field-formatter-swatch';
+
+    foreach ($items as $delta => $item) {
+      $elements[$delta] = array(
+        '#theme' => 'color_field_formatter_swatch',
+        '#color' => $this->viewValue($item),
+        '#shape' => $settings['shape'],
+        '#width' => $settings['width'],
+        '#height' => $settings['height'],
+      );
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function viewValue(ColorFieldType $item) {
+    $opacity = $this->getFieldSetting('opacity');
+    $settings = $this->getSettings();
+
+    $color_hex = new ColorHex($item->color, $item->opacity);
+
+    if ($opacity && $settings['opacity']) {
+      $rgbtext = $color_hex->toRGB()->toString(TRUE);
+    } else {
+      $rgbtext = $color_hex->toRGB()->toString(FALSE);
+    }
+
+    return $rgbtext;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldFormatter/ColorFieldFormatterText.php

@@ -0,0 +1,144 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldFormatter\ColorFieldFormatterText.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldFormatter;
+
+use Drupal\color_field\Plugin\Field\FieldType\ColorFieldType;
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\FormatterBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\color_field\ColorHex;
+
+/**
+ * Plugin implementation of the color_field text formatter.
+ *
+ * @FieldFormatter(
+ *   id = "color_field_formatter_text",
+ *   module = "color_field",
+ *   label = @Translation("Color text"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldFormatterText extends FormatterBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'format' => 'hex',
+      'opacity' => TRUE,
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $opacity = $this->getFieldSetting('opacity');
+
+    $elements = [];
+
+    $elements['format'] = array(
+      '#type' => 'select',
+      '#title' => t('Format'),
+      '#options' => $this->getColorFormat(),
+      '#default_value' => $this->getSetting('format'),
+    );
+
+    if ($opacity) {
+      $elements['opacity'] = array(
+        '#type' => 'checkbox',
+        '#title' => t('Display opacity'),
+        '#default_value' => $this->getSetting('opacity'),
+      );
+    }
+
+    return $elements;
+  }
+
+  /**
+   * @param string $format
+   * @return array|string
+   */
+  protected function getColorFormat($format = NULL) {
+    $formats = [];
+    $formats['hex'] = $this->t('Hex triplet');
+    $formats['rgb'] = $this->t('RGB Decimal');
+
+    if ($format) {
+      return $formats[$format];
+    }
+    return $formats;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $opacity = $this->getFieldSetting('opacity');
+    $settings = $this->getSettings();
+
+    $summary = [];
+
+    $summary[] = t('@format', array(
+      '@format' => $this->getColorFormat($settings['format']),
+    ));
+
+    if ($opacity && $settings['opacity']) {
+      $summary[] = t('Display with opacity.');
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(FieldItemListInterface $items, $langcode) {
+    $elements = [];
+
+    foreach ($items as $delta => $item) {
+      $elements[$delta] = ['#markup' => $this->viewValue($item)];
+    }
+
+    return $elements;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function viewValue(ColorFieldType $item) {
+    $opacity = $this->getFieldSetting('opacity');
+    $settings = $this->getSettings();
+
+    $color_hex = new ColorHex($item->color, $item->opacity);
+
+    switch ($settings['format']) {
+      case 'hex':
+        if ($opacity && $settings['opacity']) {
+          $output = $color_hex->toString(TRUE);
+        } else {
+          $output = $color_hex->toString(FALSE);
+        }
+        break;
+
+      case 'rgb':
+        if ($opacity && $settings['opacity']) {
+          $output = $color_hex->toRGB()->toString(TRUE);
+        } else {
+          $output = $color_hex->toRGB()->toString(FALSE);
+        }
+        break;
+    }
+
+    return $output;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldType/ColorFieldType.php

@@ -0,0 +1,243 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldType\ColorFieldType.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldType;
+
+use Drupal\Core\Field\FieldDefinitionInterface;
+use Drupal\Core\Field\FieldItemBase;
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\TypedData\DataDefinition;
+use Drupal\color_field\ColorHex;
+
+/**
+ * Plugin implementation of the 'color_type' field type.
+ *
+ * @FieldType(
+ *   id = "color_field_type",
+ *   label = @Translation("Color"),
+ *   description = @Translation("Create and store color value."),
+ *   default_widget = "color_field_widget_default",
+ *   default_formatter = "color_field_formatter_text"
+ * )
+ */
+class ColorFieldType extends FieldItemBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultFieldSettings() {
+    return array(
+      'opacity' => TRUE,
+    ) + parent::defaultFieldSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultStorageSettings() {
+    return array(
+      'format' => '#HEXHEX',
+    ) + parent::defaultStorageSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function storageSettingsForm(array &$form, FormStateInterface $form_state, $has_data) {
+    $element = [];
+
+    $element['format'] = array(
+      '#type' => 'select',
+      '#title' => t('Format storage'),
+      '#description' => t('Choose how to store the color.'),
+      '#default_value' => $this->getSetting('format'),
+      '#options' => array(
+        '#HEXHEX' => t('#123ABC'),
+        'HEXHEX' => t('123ABC'),
+        '#hexhex' => t('#123abc'),
+        'hexhex' => t('123abc'),
+      ),
+    );
+
+    $element += parent::storageSettingsForm($form, $form_state, $has_data);
+
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function fieldSettingsForm(array $form, FormStateInterface $form_state) {
+    $element = [];
+
+    $element['opacity'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Record opacity'),
+      '#description' => t('Whether or not to record.'),
+      '#default_value' => $this->getSetting('opacity'),
+    );
+
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function schema(FieldStorageDefinitionInterface $field_definition) {
+    $format = $field_definition->getSetting('format');
+    $color_length = isset($format) ? strlen($format) : 7 ;
+    return array(
+      'columns' => array(
+        'color' => array(
+          'description' => 'The color value',
+          'type' => 'varchar',
+          'length' => $color_length,
+          'not null' => FALSE,
+        ),
+        'opacity' => array(
+          'description' => 'The opacity/alphavalue property',
+          'type' => 'float',
+          'size' => 'tiny',
+          'not null' => FALSE,
+        ),
+      ),
+      'indexes' => array(
+        'color' => array('color'),
+      ),
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function propertyDefinitions(FieldStorageDefinitionInterface $field_definition) {
+    // Prevent early t() calls by using the TranslatableMarkup.
+    $properties['color'] = DataDefinition::create('string')
+      ->setLabel(new TranslatableMarkup('Color'));
+
+    $properties['opacity'] = DataDefinition::create('float')
+      ->setLabel(new TranslatableMarkup('Opacity'));
+
+    return $properties;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function isEmpty() {
+    $value = $this->get('color')->getValue();
+    return $value === NULL || $value === '';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getConstraints() {
+    $constraint_manager = \Drupal::typedDataManager()->getValidationConstraintManager();
+    $constraints = parent::getConstraints();
+
+    $label = $this->getFieldDefinition()->getLabel();
+
+    $constraints[] = $constraint_manager->create('ComplexData', array(
+      'color' => array(
+        'Regex' => array(
+          'pattern' => '/^#?(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/i',
+        )
+      ),
+    ));
+
+    if ($opacity = $this->getSetting('opacity')) {
+      $min = 0;
+      $constraints[] = $constraint_manager->create('ComplexData', array(
+        'opacity' => array(
+          'Range' => array(
+            'min' => $min,
+            'minMessage' => t('%name: the opacity may be no less than %min.', array('%name' => $label, '%min' => $min)),
+          )
+        ),
+      ));
+
+      $max = 1;
+      $constraints[] = $constraint_manager->create('ComplexData', array(
+        'opacity' => array(
+          'Range' => array(
+            'max' => $max,
+            'maxMessage' => t('%name: the opacity may be no greater than %max.', array('%name' => $label, '%max' => $max)),
+          )
+        ),
+      ));
+    }
+
+    return $constraints;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function generateSampleValue(FieldDefinitionInterface $field_definition) {
+    $settings = $field_definition->getSettings();
+
+    if ($format = $settings['format']) {
+      switch ($format) {
+        case '#HEXHEX':
+          $values['color'] = '#111AAA';
+          break;
+        case 'HEXHEX':
+          $values['color'] = '111111';
+          break;
+        case '#hexhex':
+          $values['color'] = '#111aaa';
+          break;
+        case 'hexhex':
+          $values['color'] = '111111';
+          break;
+      }
+    }
+
+    $values['opacity'] = 1;
+
+    return $values;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function preSave() {
+    parent::preSave();
+
+    if ($format = $this->getSetting('format')) {
+      $color = $this->color;
+
+      // Clean up data and format it.
+      $color = trim($color);
+
+      if (substr($color, 0, 1) === '#') {
+        $color = substr($color, 1);
+      }
+
+      switch ($format) {
+        case '#HEXHEX':
+          $color = '#' . strtoupper($color);
+          break;
+        case 'HEXHEX':
+          $color = strtoupper($color);
+          break;
+        case '#hexhex':
+          $color = '#' . strtolower($color);
+          break;
+        case 'hexhex':
+          $color = strtolower($color);
+          break;
+      }
+
+      $this->color = $color;
+    }
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php

@@ -0,0 +1,139 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetBox.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\WidgetBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Plugin implementation of the color_field box widget.
+ *
+ * @FieldWidget(
+ *   id = "color_field_widget_box",
+ *   module = "color_field",
+ *   label = @Translation("Color boxes"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldWidgetBox extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'default_colors' => '
+#AC725E,#D06B64,#F83A22,#FA573C,#FF7537,#FFAD46
+#42D692,#16A765,#7BD148,#B3DC6C,#FBE983
+#92E1C0,#9FE1E7,#9FC6E7,#4986E7,#9A9CFF
+#B99AFF,#C2C2C2,#CABDBF,#CCA6AC,#F691B2
+#CD74E6,#A47AE2',
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element['default_colors'] = array(
+      '#type' => 'textarea',
+      '#title' => t('Default colors'),
+      '#default_value' => $this->getSetting('default_colors'),
+      '#required' => TRUE,
+      '#description' => t('Default colors for pre-selected color boxes'),
+    );
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = [];
+
+    $default_colors = $this->getSetting('default_colors');
+
+    if (!empty($default_colors)) {
+      preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
+      foreach ($default_colors as $color) {
+        $colors = $color[0];
+        $summary[] = $colors;
+      }
+    }
+
+    if (empty($summary)) {
+      $summary[] = t('No default colors');
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+    // We are nesting some sub-elements inside the parent, so we need a wrapper.
+    // We also need to add another #title attribute at the top level for ease in
+    // identifying this item in error messages. We do not want to display this
+    // title because the actual title display is handled at a higher level by
+    // the Field module.
+
+    $element['#theme_wrappers'] = array('color_field_widget_box');
+    $element['#attributes']['class'][] = 'container-inline';
+
+    $element['#attached']['library'][] = 'color_field/color-field-widget-box';
+
+    // Set Drupal settings.
+    $settings = [];
+    $default_colors = $this->getSetting('default_colors');
+    preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
+    foreach ($default_colors as $color) {
+      $settings['default_colors'][] = $color[0];
+    }
+    $element['#attached']['drupalSettings']['color_field']['color_field_widget_box']['settings'] = $settings;
+
+    // Retrieve field label and description.
+    $element['#title'] = $this->fieldDefinition->getLabel();;
+    $element['#description'] = $this->fieldDefinition->getDescription();
+
+    // Prepare color.
+    $color = NULL;
+    if (isset($items[$delta]->color)) {
+      $color = $items[$delta]->color;
+      if (substr($color, 0, 1) !== '#') {
+        $color = '#' . $color;
+      }
+    }
+
+    $element['color'] = array(
+      '#maxlength' => 7,
+      '#size' => 7,
+      '#type' => 'textfield',
+      '#default_value' => $color,
+      '#attributes' => array('class' => array('visually-hidden')),
+   );
+    $element['color']['#suffix'] = "<div class='color-field-widget-box-form'></div>";
+
+    if ($this->getFieldSetting('opacity')) {
+      $element['opacity'] = array(
+        '#title' => t('Opacity'),
+        '#type' => 'textfield',
+        '#maxlength' => 4,
+        '#size' => 4,
+        '#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
+        '#placeholder' => $this->getSetting('placeholder_opacity'),
+      );
+    }
+
+    return $element;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldWidget/ColorFieldWidgetDefault.php

@@ -0,0 +1,116 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetDefault.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\WidgetBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Plugin implementation of the color_widget default input widget.
+ *
+ * @FieldWidget(
+ *   id = "color_field_widget_default",
+ *   module = "color_field",
+ *   label = @Translation("Color default"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldWidgetDefault extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'placeholder_color' => '',
+      'placeholder_opacity' => '',
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element['placeholder_color'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Color placeholder'),
+      '#default_value' => $this->getSetting('placeholder_color'),
+      '#description' => t('Text that will be shown inside the field until a value is entered. This hint is usually a sample value or a brief description of the expected format.'),
+    );
+    $element['placeholder_opacity'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Opacity placeholder'),
+      '#default_value' => $this->getSetting('placeholder_opacity'),
+      '#description' => t('Text that will be shown inside the field until a value is entered. This hint is usually a sample value or a brief description of the expected format.'),
+    );
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = [];
+
+    $placeholder_color = $this->getSetting('placeholder_color');
+    $placeholder_opacity = $this->getSetting('placeholder_opacity');
+
+    if (!empty($placeholder_color)) {
+      $summary[] = t('Color placeholder: @placeholder_color', array('@placeholder_color' => $placeholder_color));
+    }
+
+    if (!empty($placeholder_opacity)) {
+      $summary[] = t('Opacity placeholder: @placeholder_opacity', array('@placeholder_opacity' => $placeholder_opacity));
+    }
+
+    if (empty($summary)) {
+      $summary[] = t('No placeholder');
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+
+    $label = $this->fieldDefinition->getLabel();
+
+    $element['color'] = array(
+      '#title' => t($label),
+      '#type' => 'textfield',
+      '#maxlength' => 7,
+      '#size' => 7,
+      '#required' => $element['#required'],
+      '#placeholder' => $this->getSetting('placeholder_color'),
+      '#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
+    );
+
+    if ($this->getFieldSetting('opacity')) {
+      $element['color']['#prefix'] = '<div class="container-inline">';
+
+      $element['opacity'] = array(
+        '#title' => t('Opacity'),
+        '#type' => 'textfield',
+        '#maxlength' => 4,
+        '#size' => 4,
+        '#required' => $element['#required'],
+        '#placeholder' => $this->getSetting('placeholder_opacity'),
+        '#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
+        '#suffix' => '</div>',
+      );
+    }
+
+    return $element;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldWidget/ColorFieldWidgetGrid.php

@@ -0,0 +1,191 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetGrid.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\WidgetBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Plugin implementation of the 'color_field_default' widget.
+ *
+ * @FieldWidget(
+ *   id = "color_field_widget_grid",
+ *   module = "color_field",
+ *   label = @Translation("Color grid"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldWidgetGrid extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'cell_width' => 10,
+      'cell_height' => 10,
+      'cell_margin' => 1,
+      'box_width' => 115,
+      'box_height' => 20,
+      'columns' => 16,
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element = [];
+
+    $element['cell_width'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Cell width'),
+      '#default_value' => $this->getSetting('cell_width'),
+      '#required' => TRUE,
+      '#description' => t('Width of each individual color cell.'),
+    );
+    $element['cell_height'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Height width'),
+      '#default_value' => $this->getSetting('cell_height'),
+      '#required' => TRUE,
+      '#description' => t('Height of each individual color cell.'),
+    );
+    $element['cell_margin'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Cell margin'),
+      '#default_value' => $this->getSetting('cell_margin'),
+      '#required' => TRUE,
+      '#description' => t('Margin of each individual color cell.'),
+    );
+    $element['box_width'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Box width'),
+      '#default_value' => $this->getSetting('box_width'),
+      '#required' => TRUE,
+      '#description' => t('Width of the color display box.'),
+    );
+    $element['box_height'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Box height'),
+      '#default_value' => $this->getSetting('box_height'),
+      '#required' => TRUE,
+      '#description' => t('Height of the color display box.'),
+    );
+    $element['columns'] = array(
+      '#type' => 'textfield',
+      '#title' => t('Columns number'),
+      '#default_value' => $this->getSetting('columns'),
+      '#required' => TRUE,
+      '#description' => t('Number of columns to display. Color order may look strange if this is altered.'),
+    );
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = [];
+
+    $cell_width = $this->getSetting('cell_width');
+    $cell_height = $this->getSetting('cell_height');
+    $cell_margin = $this->getSetting('cell_margin');
+    $box_width = $this->getSetting('box_width');
+    $box_height = $this->getSetting('box_height');
+    $columns = $this->getSetting('columns');
+
+    if (!empty($cell_width)) {
+      $summary[] = t('Cell width: @cell_width', array('@cell_width' => $cell_width));
+    }
+
+    if (!empty($cell_height)) {
+      $summary[] = t('Cell height: @cell_height', array('@cell_height' => $cell_height));
+    }
+
+    if (!empty($cell_margin)) {
+      $summary[] = t('Cell margin: @cell_margin', array('@cell_margin' => $cell_margin));
+    }
+
+    if (!empty($box_width)) {
+      $summary[] = t('Box width: @box_width', array('@box_width' => $box_width));
+    }
+
+    if (!empty($box_height)) {
+      $summary[] = t('Box height: @box_height', array('@box_height' => $box_height));
+    }
+
+    if (!empty($columns)) {
+      $summary[] = t('Columns: @columns', array('@columns' => $columns));
+    }
+
+    if (empty($summary)) {
+      $summary[] = t('No placeholder');
+    }
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+    // We are nesting some sub-elements inside the parent, so we need a wrapper.
+    // We also need to add another #title attribute at the top level for ease in
+    // identifying this item in error messages. We do not want to display this
+    // title because the actual title display is handled at a higher level by
+    // the Field module.
+
+    //$element['#theme_wrappers'] = array('color_field_widget_grid');
+
+    $element['#attached']['library'][] = 'color_field/color-field-widget-grid';
+
+    // Set Drupal settings.
+    $settings = $this->getSettings();
+    $element['#attached']['drupalSettings']['color_field']['color_field_widget_grid'] = $settings;
+
+    // Prepare color.
+    $color = NULL;
+    if (isset($items[$delta]->color)) {
+      $color = $items[$delta]->color;
+      if (substr($color, 0, 1) !== '#') {
+        $color = '#' . $color;
+      }
+    }
+
+    $element['color'] = array(
+      '#title' => t('Color'),
+      '#type' => 'textfield',
+      '#maxlength' => 7,
+      '#size' => 7,
+      '#required' => $element['#required'],
+      '#default_value' => $color,
+      '#attributes' => array('class' => array('js-color-field-widget-grid__color')),
+    );
+
+    if ($this->getFieldSetting('opacity')) {
+      $element['color']['#prefix'] = '<div class="container-inline">';
+
+      $element['opacity'] = array(
+        '#title' => t('Opacity'),
+        '#type' => 'textfield',
+        '#maxlength' => 4,
+        '#size' => 4,
+        '#required' => $element['#required'],
+        '#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
+        '#suffix' => '</div>',
+      );
+    }
+
+    return $element;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldWidget/ColorFieldWidgetHTML5.php

@@ -0,0 +1,93 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetSpectrum.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\WidgetBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Plugin implementation of the color_field spectrum widget.
+ *
+ * @FieldWidget(
+ *   id = "color_field_widget_html5",
+ *   module = "color_field",
+ *   label = @Translation("Color HTML5"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldWidgetHTML5 extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element = [];
+
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = array();
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+    // Prepare color.
+    $color = NULL;
+    if (isset($items[$delta]->color)) {
+      $color = $items[$delta]->color;
+      if (substr($color, 0, 1) !== '#') {
+        $color = '#' . $color;
+      }
+    }
+
+    $element['color'] = array(
+      '#title' => t('Color'),
+      '#type' => 'color',
+      '#maxlength' => 7,
+      '#size' => 7,
+      '#required' => $element['#required'],
+      '#default_value' => $color,
+    );
+
+    if ($this->getFieldSetting('opacity')) {
+      $element['color']['#prefix'] = '<div class="container-inline">';
+
+      $element['opacity'] = array(
+        '#title' => t('Opacity'),
+        '#type' => 'textfield',
+        '#maxlength' => 4,
+        '#size' => 4,
+        '#required' => $element['#required'],
+        '#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
+        '#suffix' => '</div>',
+      );
+    }
+
+    return $element;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/src/Plugin/Field/FieldWidget/ColorFieldWidgetSpectrum.php

@@ -0,0 +1,152 @@
+<?php
+
+/**
+ * @file
+ * Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetSpectrum.
+ */
+
+namespace Drupal\color_field\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Field\WidgetBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Plugin implementation of the color_field spectrum widget.
+ *
+ * @FieldWidget(
+ *   id = "color_field_widget_spectrum",
+ *   module = "color_field",
+ *   label = @Translation("Color spectrum"),
+ *   field_types = {
+ *     "color_field_type"
+ *   }
+ * )
+ */
+class ColorFieldWidgetSpectrum extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function defaultSettings() {
+    return array(
+      'show_input' => FALSE,
+      'show_palette' => FALSE,
+      'palette' => '',
+      'show_palette_only' => TRUE,
+      'show_buttons' => FALSE,
+      'allow_empty' => FALSE,
+    ) + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsForm(array $form, FormStateInterface $form_state) {
+    $element = [];
+
+    $element['show_input'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Show Input'),
+      '#default_value' => $this->getSetting('show_input'),
+      '#description' => t('Allow free form typing.'),
+    );
+    $element['show_palette'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Show Palette'),
+      '#default_value' => $this->getSetting('show_palette'),
+      '#description' => t('Show or hide Palette in Spectrum Widget'),
+    );
+    $element['palette'] = array(
+      '#type' => 'textarea',
+      '#title' => t('Color Palette'),
+      '#default_value' => $this->getSetting('palette'),
+      '#description' => t('Selectable color palette to accompany the Spectrum Widget'),
+      '#states' => array(
+        'visible' => array(
+          ':input[name="field[settings][show_palette]"]' => array('checked' => TRUE),
+        ),
+      ),
+    );
+    $element['show_palette_only'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Show Palette Only'),
+      '#default_value' => $this->getSetting('show_palette_only'),
+      '#description' => t('Only show thePalette in Spectrum Widget and nothing else'),
+    );
+    $element['show_buttons'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Show Buttons'),
+      '#default_value' => $this->getSetting('show_buttons'),
+      '#description' => t('Add Cancel/Confirm Button.'),
+    );
+    $element['allow_empty'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Allow Empty'),
+      '#default_value' => $this->getSetting('allow_empty'),
+      '#description' => t('Allow empty value.'),
+    );
+    return $element;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function settingsSummary() {
+    $summary = array();
+
+    return $summary;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
+    // We are nesting some sub-elements inside the parent, so we need a wrapper.
+    // We also need to add another #title attribute at the top level for ease in
+    // identifying this item in error messages. We do not want to display this
+    // title because the actual title display is handled at a higher level by
+    // the Field module.
+
+    $element['#theme_wrappers'] = array('color_field_widget_spectrum');
+
+    $element['#attached']['library'][] = 'color_field/color-field-widget-spectrum';
+
+    // Set Drupal settings.
+    $settings = $this->getSettings();
+    $settings['show_alpha'] = $this->getFieldSetting('opacity');
+    $element['#attached']['drupalSettings']['color_field']['color_field_widget_spectrum'] = $settings;
+
+    // Prepare color.
+    $color = NULL;
+    if (isset($items[$delta]->color)) {
+      $color = $items[$delta]->color;
+      if (substr($color, 0, 1) !== '#') {
+        $color = '#' . $color;
+      }
+    }
+
+    $element['color'] = array(
+      '#type' => 'textfield',
+      '#maxlength' => 7,
+      '#size' => 7,
+      '#required' => $element['#required'],
+      '#default_value' => $color,
+      '#attributes' => array('class' => array('js-color-field-widget-spectrum__color')),
+    );
+
+    if ($this->getFieldSetting('opacity')) {
+      $element['opacity'] = array(
+        '#type' => 'textfield',
+        '#maxlength' => 4,
+        '#size' => 4,
+        '#required' => $element['#required'],
+        '#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
+        '#attributes' => array('class' => array('js-color-field-widget-spectrum__opacity', 'visually-hidden')),
+      );
+    }
+
+    return $element;
+  }
+
+}

sites/all/modules/contrib/fields/color_field/templates/color-field-formatter-swatch.html.twig

@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a color swatch formatter.
+ *
+ * Available variables:
+ * - color: The color background.
+ * - width: The width of the color swatch.
+ * - height: The height of the color swatch.
+ * - shape: The shape of the color swatch.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_color_field_formatter_swatch()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<div class='color_field__swatch--{{ shape }}' style="background-color: {{ color }}; width: {{ width }}px; height: {{ height }}px;"></div>

sites/all/modules/contrib/fields/color_field/templates/color-field-widget-box.html.twig

@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a color box form wrapper.
+ *
+ * Available variables:
+ * - content: The form element to be output, usually a datelist, or datetime.
+ * - title: The title of the form element.
+ * - title_attributes: HTML attributes for the title wrapper.
+ * - description: Description text for the form element.
+ * - required: An indicator for whether the associated form element is required.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_color_field_widget_box()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+set title_classes = [
+required ? 'js-form-required',
+required ? 'form-required',
+]
+%}
+
+{% if title %}
+  <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+{% endif %}
+
+<div class="container-inline">
+  {{ color }}
+  {{ opacity }}
+</div>
+
+{% if errors %}
+  <div>
+    {{ errors }}
+  </div>
+{% endif %}
+
+{{ description }}

sites/all/modules/contrib/fields/color_field/templates/color-field-widget-spectrum.html.twig

@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Default theme implementation of a color box form wrapper.
+ *
+ * Available variables:
+ * - content: The form element to be output, usually a datelist, or datetime.
+ * - title: The title of the form element.
+ * - title_attributes: HTML attributes for the title wrapper.
+ * - description: Description text for the form element.
+ * - required: An indicator for whether the associated form element is required.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_color_field_widget_box()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+set title_classes = [
+required ? 'js-form-required',
+required ? 'form-required',
+]
+%}
+
+{% if title %}
+  <h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
+{% endif %}
+
+<div class="js-color-field-widget-spectrum">
+  {{ color }}
+  {{ opacity }}
+</div>
+
+{% if errors %}
+  <div>
+    {{ errors }}
+  </div>
+{% endif %}
+
+{{ description }}

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -21,7 +21,8 @@
 
   EdlpCorpus = function(){
     var _activated = true;
-    var _$body = _$container = $('body');
+    var _$body = $('body');
+    var _$container = _$body;
     var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
@@ -50,12 +51,19 @@
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
     var _$articles_link;
     var _node_pop_up;
-    // Colors depend on edlp_vars loaded by edlptheme
+    // Colors depend on drupalSettings loaded by edlp_corpus.module
-    // console.log('Corpus : edlp_vars', edlp_vars);
+    var _ecolors = drupalSettings.edlp_corpus.colors;
+    console.log('Corpus : _ecolors', _ecolors);
     // Physics
-    var _attracter;
+    var _attracter,
-    var _repulser;
+        _repulser,
-
+        _repulser_center,
+        _scrambler_TL,
+        _scrambler_TR,
+        _scrambler_BR,
+        _scrambler_BL,
+        _scrambler_CL,
+        _scrambler_CR;
 
     //     ____      _ __
     //    /  _/___  (_) /______
@@ -155,6 +163,10 @@
       _scrambler_BR.fixed = true;
       _scrambler_BL = _physics.makeParticle(100);
       _scrambler_BL.fixed = true;
+      _scrambler_CR = _physics.makeParticle(100);
+      _scrambler_CR.fixed = true;
+      _scrambler_CL = _physics.makeParticle(100);
+      _scrambler_CL.fixed = true;
       // move _attracter and _repulser on window resize
       resizePhysics();
     };
@@ -165,6 +177,8 @@
       _scrambler_TR.position = {x:_canvas.width+100, y:-100};
       _scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
       _scrambler_BL.position = {x:-100, y:_canvas.height+100};
+      _scrambler_CL.position = {x:-100, y:_canvas.height/2};
+      _scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
       // TODO: move _attracter and _repulser on window resize
     };
 
@@ -257,7 +271,7 @@
           this.p = _physics.makeParticle(this.mass, this.x, this.y);
           this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
           // attracter
-          this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
+          this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
           this.attract.on = false;
           // repulsers
           this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
@@ -271,6 +285,10 @@
           this.scramble_BR.on = false;
           this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
           this.scramble_BL.on = false;
+          this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
+          this.scramble_CR.on = false;
+          this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
+          this.scramble_CL.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
@@ -412,6 +430,8 @@
           this.scramble_TR.on = true;
           this.scramble_BR.on = true;
           this.scramble_BL.on = true;
+          // this.scramble_CR.on = true;
+          // this.scramble_CL.on = true;
         }
         Node.prototype.stopScrambling = function(){
           this.scrambling = false;
@@ -419,6 +439,8 @@
           this.scramble_TR.on = false;
           this.scramble_BR.on = false;
           this.scramble_BL.on = false;
+          // this.scramble_CR.on = false;
+          // this.scramble_CL.on = false;
         }
 
         Node.prototype.draw = function(){
@@ -432,8 +454,8 @@
 
           _ctx.beginPath();
           _ctx.globalAlpha = this.faded ? 0.1 : 1;
-          _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
+          // _ctx.fillStyle = !this.p.resting() ? _ecolors[this.e_color] : 'rgb(0, 0, 0)';
-          // _ctx.fillStyle = edlp_vars[this.e_color];
+          _ctx.fillStyle = _ecolors[this.e_color];
           _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
 
           if(this.opened){

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -21,7 +21,8 @@
 
   EdlpCorpus = function(){
     var _activated = true;
-    var _$body = _$container = $('body');
+    var _$body = $('body');
+    var _$container = _$body;
     var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
@@ -50,12 +51,19 @@
     var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
     var _$articles_link;
     var _node_pop_up;
-    // Colors depend on edlp_vars loaded by edlptheme
+    // Colors depend on drupalSettings loaded by edlp_corpus.module
-    // console.log('Corpus : edlp_vars', edlp_vars);
+    var _ecolors = drupalSettings.edlp_corpus.colors;
+    console.log('Corpus : _ecolors', _ecolors);
     // Physics
-    var _attracter;
+    var _attracter,
-    var _repulser;
+        _repulser,
-
+        _repulser_center,
+        _scrambler_TL,
+        _scrambler_TR,
+        _scrambler_BR,
+        _scrambler_BL,
+        _scrambler_CL,
+        _scrambler_CR;
 
     //     ____      _ __
     //    /  _/___  (_) /______
@@ -155,6 +163,10 @@
       _scrambler_BR.fixed = true;
       _scrambler_BL = _physics.makeParticle(100);
       _scrambler_BL.fixed = true;
+      _scrambler_CR = _physics.makeParticle(100);
+      _scrambler_CR.fixed = true;
+      _scrambler_CL = _physics.makeParticle(100);
+      _scrambler_CL.fixed = true;
       // move _attracter and _repulser on window resize
       resizePhysics();
     };
@@ -165,6 +177,8 @@
       _scrambler_TR.position = {x:_canvas.width+100, y:-100};
       _scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
       _scrambler_BL.position = {x:-100, y:_canvas.height+100};
+      _scrambler_CL.position = {x:-100, y:_canvas.height/2};
+      _scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
       // TODO: move _attracter and _repulser on window resize
     };
 
@@ -257,7 +271,7 @@
           this.p = _physics.makeParticle(this.mass, this.x, this.y);
           this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
           // attracter
-          this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
+          this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
           this.attract.on = false;
           // repulsers
           this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
@@ -271,6 +285,10 @@
           this.scramble_BR.on = false;
           this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
           this.scramble_BL.on = false;
+          this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
+          this.scramble_CR.on = false;
+          this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
+          this.scramble_CL.on = false;
         };
 
         Node.prototype.calcWallLimits = function(){
@@ -412,6 +430,8 @@
           this.scramble_TR.on = true;
           this.scramble_BR.on = true;
           this.scramble_BL.on = true;
+          // this.scramble_CR.on = true;
+          // this.scramble_CL.on = true;
         }
         Node.prototype.stopScrambling = function(){
           this.scrambling = false;
@@ -419,6 +439,8 @@
           this.scramble_TR.on = false;
           this.scramble_BR.on = false;
           this.scramble_BL.on = false;
+          // this.scramble_CR.on = false;
+          // this.scramble_CL.on = false;
         }
 
         Node.prototype.draw = function(){
@@ -432,8 +454,8 @@
 
           _ctx.beginPath();
           _ctx.globalAlpha = this.faded ? 0.1 : 1;
-          _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
+          // _ctx.fillStyle = !this.p.resting() ? _ecolors[this.e_color] : 'rgb(0, 0, 0)';
-          // _ctx.fillStyle = edlp_vars[this.e_color];
+          _ctx.fillStyle = _ecolors[this.e_color];
           _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
 
           if(this.opened){

sites/all/modules/figli/edlp_corpus/edlp_corpus.module

@@ -92,12 +92,51 @@ function edlp_corpus_taxonomy_term_view(array &$build, \Drupal\Core\Entity\Entit
  * Implements hook_page_attachments().
  * @param array $attachments
  */
-// function edlp_corpus_page_attachments(array &$attachments) {
+function edlp_corpus_page_attachments(array &$attachments) {
-//   //add here any conditions if you need to limit the pages
+
-//   if (\Drupal::service('path.matcher')->isFrontPage()) {
+  // css class
-//     // $attachments['#attached']['library'][] = 'edlp_corpus/corpus';
+  // :root{
-//     // $attachments['#attached']['drupalSettings']['basepath'] = base_path();
+  //  --e-col-130:#4B8F7E;
-//     // $attachments['#attached']['drupalSettings']['pathtoedlpcorpus'] = base_path() . drupal_get_path('module', 'edlp_corpus');
+  // }
-//     // $attachments['#attached']['drupalSettings']['pathtotfiles'] = PublicStream::basePath();
+
-//   }
+  // javascript list
-// }
+  // drupalSettings edlp_corpus{
+  //  "e_col_130": "rgb(75, 143, 126)",
+  // }
+
+
+  // get all entries
+  $query = \Drupal::entityQuery('taxonomy_term')
+    ->condition('vid', 'entrees');
+
+  $tids = $query->execute();
+  $terms = entity_load_multiple('taxonomy_term', $tids);
+
+  $js_list = [];
+  $css_str = ":root{\n";
+  foreach ($terms as $term) {
+    $tid = $term->id();
+    // get the color value
+    $color = $term->get('field_color')->color;
+    // build colors list
+    $css_str .= "\t".'--e-col-'.$tid.':'.$color.";\n";
+    $js_list['e_col_'.$tid] = $color;
+  }
+  $css_str .= '}';
+
+  // attache css
+  // we should find a better way
+  // https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
+  $attachments['#attached']['html_head'][] = [
+    [
+      '#type' => 'html_tag',
+      '#tag' => 'style',
+      '#value' => $css_str,
+    ],
+    // A key, to make it possible to recognize this HTML  element when altering.
+    'edlp_colors',
+  ];
+
+  $attachments['#attached']['drupalSettings']['edlp_corpus']['colors'] = $js_list;
+
+}

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -1,26 +1,3 @@
-edlp_vars = {
-  "e_col_130": "rgb(75, 143, 126)",
-  "e_col_121": "rgb(134, 142, 36)",
-  "e_col_134": "rgb(43, 143, 47)",
-  "e_col_121": "rgb(58, 51, 182)",
-  "e_col_125": "rgb(44, 159, 87)",
-  "e_col_119": "rgb(196, 137, 120)",
-  "e_col_132": "rgb(82, 112, 187)",
-  "e_col_122": "rgb(251, 84, 211)",
-  "e_col_129": "rgb(224, 116, 131)",
-  "e_col_120": "rgb(101, 88, 69)",
-  "e_col_130": "rgb(126, 8, 104)",
-  "e_col_118": "rgb(14, 113, 33)",
-  "e_col_127": "rgb(218, 189, 66)",
-  "e_col_133": "rgb(3, 153, 187)",
-  "e_col_128": "rgb(57, 154, 28)",
-  "e_col_124": "rgb(112, 133, 64)",
-  "e_col_116": "rgb(25, 27, 255)",
-  "e_col_117": "rgb(39, 157, 132)",
-  "e_col_131": "rgb(82, 25, 171)",
-  "e_col_126": "rgb(212, 156, 182)",
-  "e_col_123": "rgb(73, 119, 21)"
-};
 (function($) {
 
   EdlpTheme = function(){

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1404,43 +1404,43 @@ body.ajax-loading main[role="main"]:before {
         background-color: black;
         margin-right: 3px; }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
-          background-color: #2b8f2f; }
+          background-color: var(--e-col-134); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
-          background-color: #3a33b6; }
+          background-color: var(--e-col-121); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
-          background-color: #2c9f57; }
+          background-color: var(--e-col-125); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
-          background-color: #c48978; }
+          background-color: var(--e-col-119); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
-          background-color: #5270bb; }
+          background-color: var(--e-col-132); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
-          background-color: #fb54d3; }
+          background-color: var(--e-col-122); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
-          background-color: #e07483; }
+          background-color: var(--e-col-129); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
-          background-color: #655845; }
+          background-color: var(--e-col-120); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
-          background-color: #7e0868; }
+          background-color: var(--e-col-130); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
-          background-color: #0e7121; }
+          background-color: var(--e-col-118); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
-          background-color: #dabd42; }
+          background-color: var(--e-col-127); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
-          background-color: #0399bb; }
+          background-color: var(--e-col-133); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
-          background-color: #399a1c; }
+          background-color: var(--e-col-128); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
-          background-color: #708540; }
+          background-color: var(--e-col-124); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
-          background-color: #191bff; }
+          background-color: var(--e-col-116); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
-          background-color: #279d84; }
+          background-color: var(--e-col-117); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
-          background-color: #5219ab; }
+          background-color: var(--e-col-131); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
-          background-color: #d49cb6; }
+          background-color: var(--e-col-126); }
         #audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
-          background-color: #497715; }
+          background-color: var(--e-col-123); }
     #audio-player .cartel .cartels .first-cartel h2.node-title {
       margin: 0.2em 0 0;
       font-size: 1em; }
@@ -1552,43 +1552,43 @@ body.ajax-loading main[role="main"]:before {
             background-color: black;
             margin-right: 3px; }
             #studio-ui .chutier_ui .documents li .entrees span[tid='134'] {
-              background-color: #2b8f2f; }
+              background-color: var(--e-col-134); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='121'] {
-              background-color: #3a33b6; }
+              background-color: var(--e-col-121); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='125'] {
-              background-color: #2c9f57; }
+              background-color: var(--e-col-125); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='119'] {
-              background-color: #c48978; }
+              background-color: var(--e-col-119); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='132'] {
-              background-color: #5270bb; }
+              background-color: var(--e-col-132); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='122'] {
-              background-color: #fb54d3; }
+              background-color: var(--e-col-122); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='129'] {
-              background-color: #e07483; }
+              background-color: var(--e-col-129); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='120'] {
-              background-color: #655845; }
+              background-color: var(--e-col-120); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='130'] {
-              background-color: #7e0868; }
+              background-color: var(--e-col-130); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='118'] {
-              background-color: #0e7121; }
+              background-color: var(--e-col-118); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='127'] {
-              background-color: #dabd42; }
+              background-color: var(--e-col-127); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='133'] {
-              background-color: #0399bb; }
+              background-color: var(--e-col-133); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='128'] {
-              background-color: #399a1c; }
+              background-color: var(--e-col-128); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='124'] {
-              background-color: #708540; }
+              background-color: var(--e-col-124); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='116'] {
-              background-color: #191bff; }
+              background-color: var(--e-col-116); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='117'] {
-              background-color: #279d84; }
+              background-color: var(--e-col-117); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='131'] {
-              background-color: #5219ab; }
+              background-color: var(--e-col-131); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='126'] {
-              background-color: #d49cb6; }
+              background-color: var(--e-col-126); }
             #studio-ui .chutier_ui .documents li .entrees span[tid='123'] {
-              background-color: #497715; }
+              background-color: var(--e-col-123); }
         #studio-ui .chutier_ui .documents li a.audio-link {
           text-transform: capitalize;
           font-size: 0.756em;
@@ -1948,62 +1948,62 @@ footer {
               font-size: 0.65em;
               margin: 0; }
         footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before {
-          border-color: #2b8f2f;
+          border-color: var(--e-col-134);
-          background-color: #2b8f2f; }
+          background-color: var(--e-col-134); }
         footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before {
-          border-color: #3a33b6;
+          border-color: var(--e-col-121);
-          background-color: #3a33b6; }
+          background-color: var(--e-col-121); }
         footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before {
-          border-color: #2c9f57;
+          border-color: var(--e-col-125);
-          background-color: #2c9f57; }
+          background-color: var(--e-col-125); }
         footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before {
-          border-color: #c48978;
+          border-color: var(--e-col-119);
-          background-color: #c48978; }
+          background-color: var(--e-col-119); }
         footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before {
-          border-color: #5270bb;
+          border-color: var(--e-col-132);
-          background-color: #5270bb; }
+          background-color: var(--e-col-132); }
         footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before {
-          border-color: #fb54d3;
+          border-color: var(--e-col-122);
-          background-color: #fb54d3; }
+          background-color: var(--e-col-122); }
         footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before {
-          border-color: #e07483;
+          border-color: var(--e-col-129);
-          background-color: #e07483; }
+          background-color: var(--e-col-129); }
         footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before {
-          border-color: #655845;
+          border-color: var(--e-col-120);
-          background-color: #655845; }
+          background-color: var(--e-col-120); }
         footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before {
-          border-color: #7e0868;
+          border-color: var(--e-col-130);
-          background-color: #7e0868; }
+          background-color: var(--e-col-130); }
         footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before {
-          border-color: #0e7121;
+          border-color: var(--e-col-118);
-          background-color: #0e7121; }
+          background-color: var(--e-col-118); }
         footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before {
-          border-color: #dabd42;
+          border-color: var(--e-col-127);
-          background-color: #dabd42; }
+          background-color: var(--e-col-127); }
         footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before {
-          border-color: #0399bb;
+          border-color: var(--e-col-133);
-          background-color: #0399bb; }
+          background-color: var(--e-col-133); }
         footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before {
-          border-color: #399a1c;
+          border-color: var(--e-col-128);
-          background-color: #399a1c; }
+          background-color: var(--e-col-128); }
         footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before {
-          border-color: #708540;
+          border-color: var(--e-col-124);
-          background-color: #708540; }
+          background-color: var(--e-col-124); }
         footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before {
-          border-color: #191bff;
+          border-color: var(--e-col-116);
-          background-color: #191bff; }
+          background-color: var(--e-col-116); }
         footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before {
-          border-color: #279d84;
+          border-color: var(--e-col-117);
-          background-color: #279d84; }
+          background-color: var(--e-col-117); }
         footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before {
-          border-color: #5219ab;
+          border-color: var(--e-col-131);
-          background-color: #5219ab; }
+          background-color: var(--e-col-131); }
         footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before {
-          border-color: #d49cb6;
+          border-color: var(--e-col-126);
-          background-color: #d49cb6; }
+          background-color: var(--e-col-126); }
         footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before {
-          border-color: #497715;
+          border-color: var(--e-col-123);
-          background-color: #497715; }
+          background-color: var(--e-col-123); }
         footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before {
           background-color: #fff !important; }
         footer .block-block-edlp-entrees ul li a.articles-link:not(:hover):not(.is-active):before {
@@ -2093,43 +2093,43 @@ footer {
     background-color: black;
     margin-right: 3px; }
     .node-popup .inner .entrees span[tid='134'] {
-      background-color: #2b8f2f; }
+      background-color: var(--e-col-134); }
     .node-popup .inner .entrees span[tid='121'] {
-      background-color: #3a33b6; }
+      background-color: var(--e-col-121); }
     .node-popup .inner .entrees span[tid='125'] {
-      background-color: #2c9f57; }
+      background-color: var(--e-col-125); }
     .node-popup .inner .entrees span[tid='119'] {
-      background-color: #c48978; }
+      background-color: var(--e-col-119); }
     .node-popup .inner .entrees span[tid='132'] {
-      background-color: #5270bb; }
+      background-color: var(--e-col-132); }
     .node-popup .inner .entrees span[tid='122'] {
-      background-color: #fb54d3; }
+      background-color: var(--e-col-122); }
     .node-popup .inner .entrees span[tid='129'] {
-      background-color: #e07483; }
+      background-color: var(--e-col-129); }
     .node-popup .inner .entrees span[tid='120'] {
-      background-color: #655845; }
+      background-color: var(--e-col-120); }
     .node-popup .inner .entrees span[tid='130'] {
-      background-color: #7e0868; }
+      background-color: var(--e-col-130); }
     .node-popup .inner .entrees span[tid='118'] {
-      background-color: #0e7121; }
+      background-color: var(--e-col-118); }
     .node-popup .inner .entrees span[tid='127'] {
-      background-color: #dabd42; }
+      background-color: var(--e-col-127); }
     .node-popup .inner .entrees span[tid='133'] {
-      background-color: #0399bb; }
+      background-color: var(--e-col-133); }
     .node-popup .inner .entrees span[tid='128'] {
-      background-color: #399a1c; }
+      background-color: var(--e-col-128); }
     .node-popup .inner .entrees span[tid='124'] {
-      background-color: #708540; }
+      background-color: var(--e-col-124); }
     .node-popup .inner .entrees span[tid='116'] {
-      background-color: #191bff; }
+      background-color: var(--e-col-116); }
     .node-popup .inner .entrees span[tid='117'] {
-      background-color: #279d84; }
+      background-color: var(--e-col-117); }
     .node-popup .inner .entrees span[tid='131'] {
-      background-color: #5219ab; }
+      background-color: var(--e-col-131); }
     .node-popup .inner .entrees span[tid='126'] {
-      background-color: #d49cb6; }
+      background-color: var(--e-col-126); }
     .node-popup .inner .entrees span[tid='123'] {
-      background-color: #497715; }
+      background-color: var(--e-col-123); }
   .node-popup .inner .title {
     margin: 0.3em 0;
     font-size: 1.2em;

sites/all/themes/custom/edlptheme/assets/json/shared_variables.json

@@ -1,3 +1,4 @@
+/* this file stays here just for memory */
 {
   "e_col_130": "rgb(75, 143, 126)",
   "e_col_121": "rgb(134, 142, 36)",

sites/all/themes/custom/edlptheme/assets/scripts/shared_variables.js

@@ -1,23 +0,0 @@
-edlp_vars = {
-  "e_col_130": "rgb(75, 143, 126)",
-  "e_col_121": "rgb(134, 142, 36)",
-  "e_col_134": "rgb(43, 143, 47)",
-  "e_col_121": "rgb(58, 51, 182)",
-  "e_col_125": "rgb(44, 159, 87)",
-  "e_col_119": "rgb(196, 137, 120)",
-  "e_col_132": "rgb(82, 112, 187)",
-  "e_col_122": "rgb(251, 84, 211)",
-  "e_col_129": "rgb(224, 116, 131)",
-  "e_col_120": "rgb(101, 88, 69)",
-  "e_col_130": "rgb(126, 8, 104)",
-  "e_col_118": "rgb(14, 113, 33)",
-  "e_col_127": "rgb(218, 189, 66)",
-  "e_col_133": "rgb(3, 153, 187)",
-  "e_col_128": "rgb(57, 154, 28)",
-  "e_col_124": "rgb(112, 133, 64)",
-  "e_col_116": "rgb(25, 27, 255)",
-  "e_col_117": "rgb(39, 157, 132)",
-  "e_col_131": "rgb(82, 25, 171)",
-  "e_col_126": "rgb(212, 156, 182)",
-  "e_col_123": "rgb(73, 119, 21)"
-};

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -8,7 +8,6 @@
 
 @import 'base/reset';
 @import 'base/colors';
-@import 'base/shared_variables';
 @import 'base/grid';
 @import 'base/layout';
 @import 'base/fonts';
@@ -27,25 +26,25 @@
   width:$s; height:$s;
   background-color: black;
   margin-right: 3px;
-  &[tid='134']{background-color: $e_col_134;}
+  &[tid='134']{background-color: var(--e-col-134);}
-  &[tid='121']{background-color: $e_col_121;}
+  &[tid='121']{background-color: var(--e-col-121);}
-  &[tid='125']{background-color: $e_col_125;}
+  &[tid='125']{background-color: var(--e-col-125);}
-  &[tid='119']{background-color: $e_col_119;}
+  &[tid='119']{background-color: var(--e-col-119);}
-  &[tid='132']{background-color: $e_col_132;}
+  &[tid='132']{background-color: var(--e-col-132);}
-  &[tid='122']{background-color: $e_col_122;}
+  &[tid='122']{background-color: var(--e-col-122);}
-  &[tid='129']{background-color: $e_col_129;}
+  &[tid='129']{background-color: var(--e-col-129);}
-  &[tid='120']{background-color: $e_col_120;}
+  &[tid='120']{background-color: var(--e-col-120);}
-  &[tid='130']{background-color: $e_col_130;}
+  &[tid='130']{background-color: var(--e-col-130);}
-  &[tid='118']{background-color: $e_col_118;}
+  &[tid='118']{background-color: var(--e-col-118);}
-  &[tid='127']{background-color: $e_col_127;}
+  &[tid='127']{background-color: var(--e-col-127);}
-  &[tid='133']{background-color: $e_col_133;}
+  &[tid='133']{background-color: var(--e-col-133);}
-  &[tid='128']{background-color: $e_col_128;}
+  &[tid='128']{background-color: var(--e-col-128);}
-  &[tid='124']{background-color: $e_col_124;}
+  &[tid='124']{background-color: var(--e-col-124);}
-  &[tid='116']{background-color: $e_col_116;}
+  &[tid='116']{background-color: var(--e-col-116);}
-  &[tid='117']{background-color: $e_col_117;}
+  &[tid='117']{background-color: var(--e-col-117);}
-  &[tid='131']{background-color: $e_col_131;}
+  &[tid='131']{background-color: var(--e-col-131);}
-  &[tid='126']{background-color: $e_col_126;}
+  &[tid='126']{background-color: var(--e-col-126);}
-  &[tid='123']{background-color: $e_col_123;}
+  &[tid='123']{background-color: var(--e-col-123);}
 }
 
 
@@ -940,61 +939,61 @@ footer{
 
         &[tid='134']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_134;background-color: $e_col_134;}}
+            border-color: var(--e-col-134);background-color: var(--e-col-134);}}
         &[tid='121']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_121;background-color: $e_col_121;}}
+            border-color: var(--e-col-121);background-color: var(--e-col-121);}}
         &[tid='125']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_125;background-color: $e_col_125;}}
+            border-color: var(--e-col-125);background-color: var(--e-col-125);}}
         &[tid='119']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_119;background-color: $e_col_119;}}
+            border-color: var(--e-col-119);background-color: var(--e-col-119);}}
         &[tid='132']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_132;background-color: $e_col_132;}}
+            border-color: var(--e-col-132);background-color: var(--e-col-132);}}
         &[tid='122']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_122;background-color: $e_col_122;}}
+            border-color: var(--e-col-122);background-color: var(--e-col-122);}}
         &[tid='129']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_129;background-color: $e_col_129;}}
+            border-color: var(--e-col-129);background-color: var(--e-col-129);}}
         &[tid='120']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_120;background-color: $e_col_120;}}
+            border-color: var(--e-col-120);background-color: var(--e-col-120);}}
         &[tid='130']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_130;background-color: $e_col_130;}}
+            border-color: var(--e-col-130);background-color: var(--e-col-130);}}
         &[tid='118']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_118;background-color: $e_col_118;}}
+            border-color: var(--e-col-118);background-color: var(--e-col-118);}}
         &[tid='127']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_127;background-color: $e_col_127;}}
+            border-color: var(--e-col-127);background-color: var(--e-col-127);}}
         &[tid='133']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_133;background-color: $e_col_133;}}
+            border-color: var(--e-col-133);background-color: var(--e-col-133);}}
         &[tid='128']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_128;background-color: $e_col_128;}}
+            border-color: var(--e-col-128);background-color: var(--e-col-128);}}
         &[tid='124']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_124;background-color: $e_col_124;}}
+            border-color: var(--e-col-124);background-color: var(--e-col-124);}}
         &[tid='116']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_116;background-color: $e_col_116;}}
+            border-color: var(--e-col-116);background-color: var(--e-col-116);}}
         &[tid='117']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_117;background-color: $e_col_117;}}
+            border-color: var(--e-col-117);background-color: var(--e-col-117);}}
         &[tid='131']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_131;background-color: $e_col_131;}}
+            border-color: var(--e-col-131);background-color: var(--e-col-131);}}
         &[tid='126']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_126;background-color: $e_col_126;}}
+            border-color: var(--e-col-126);background-color: var(--e-col-126);}}
         &[tid='123']{
           a.term-link:before, .entree-content span.oblique-wrapper a:before{
-            border-color: $e_col_123;background-color: $e_col_123;}}
+            border-color: var(--e-col-123);background-color: var(--e-col-123);}}
 
         // &.highlighted{
         //   a.term_link{

sites/all/themes/custom/edlptheme/assets/styles/base/_shared_variables.scss

@@ -1,19 +0,0 @@
-$e_col_130: rgb(126, 8, 104);
-$e_col_121: rgb(58, 51, 182);
-$e_col_134: rgb(43, 143, 47);
-$e_col_125: rgb(44, 159, 87);
-$e_col_119: rgb(196, 137, 120);
-$e_col_132: rgb(82, 112, 187);
-$e_col_122: rgb(251, 84, 211);
-$e_col_129: rgb(224, 116, 131);
-$e_col_120: rgb(101, 88, 69);
-$e_col_118: rgb(14, 113, 33);
-$e_col_127: rgb(218, 189, 66);
-$e_col_133: rgb(3, 153, 187);
-$e_col_128: rgb(57, 154, 28);
-$e_col_124: rgb(112, 133, 64);
-$e_col_116: rgb(25, 27, 255);
-$e_col_117: rgb(39, 157, 132);
-$e_col_131: rgb(82, 25, 171);
-$e_col_126: rgb(212, 156, 182);
-$e_col_123: rgb(73, 119, 21);

sites/all/themes/custom/edlptheme/edlptheme.libraries.yml

@@ -3,7 +3,7 @@ global-css:
   css:
     base:
       assets/dist/styles/app.min.css: {}
-      assets/dist/bower/OverlayScrollbars.min.css: {}
+      # assets/dist/bower/OverlayScrollbars.min.css: {}
 
 
 global-js:
@@ -11,13 +11,12 @@ global-js:
   js:
     assets/dist/bower/jquery.history.js: { scope: footer }
     assets/dist/bower/jquery.hotkeys.js: { scope: footer }
-    assets/dist/bower/jquery.overlayScrollbars.min.js: { scope: footer }
+    # assets/dist/bower/jquery.overlayScrollbars.min.js: { scope: footer }
     assets/dist/bower/imagesloaded.pkgd.min.js: { scope: footer }
     assets/dist/bower/masonry.pkgd.min.js: { scope: footer }
     assets/dist/scripts/main.min.js: { scope: footer }
   dependencies:
     - core/drupal
-    - core/drupal.ajax
     - core/matchmedia
     - core/matchmedia.addListener
     - core/jquery

sites/all/themes/custom/edlptheme/gulpfile.js

@@ -9,9 +9,9 @@ var jsmin = require('gulp-jsmin');
 var cssmin = require('gulp-cssmin');
 var rename = require('gulp-rename');
 var mainBowerFiles = require('main-bower-files');
-var jsonToSass = require('gulp-json-to-sass');
+// var jsonToSass = require('gulp-json-to-sass');
-var concat = require('gulp-concat');
+// var concat = require('gulp-concat');
-var through = require('through2');
+// var through = require('through2');
 var svgmin = require('gulp-svgmin');
 // var fs = require('fs');
 // var json2js = require('gulp-json2js');
@@ -28,49 +28,16 @@ var config = {
   production: !!util.env.production
 }
 
-
-gulp.task('vars2sass', function () {
-  gulp.src('./assets/json/shared_variables.json')
-    .pipe(jsonToSass({
-      jsonPath: './assets/json/shared_variables.json',
-      scssPath: './assets/styles/base/_shared_variables.scss'
-    }));
-});
-
-// this one is not working, works first run but then it's like it's caching the source
-// gulp.task('variables2js', function() {
-//   gulp.src('./assets/scripts/shared_variables_model.js')
-//     .pipe(rename('shared_variables.js'))
-//     .pipe(data(function(file) {
-//       delete require.cache['./assets/json/shared_variables.json'];
-//       return require('./assets/json/shared_variables.json');
-//     }))
-//     .pipe(json2js())
-//     .pipe(gulp.dest('./assets/scripts/'));
-// });
-
-gulp.task('vars2js', function() {
-  gulp.src('./assets/json/shared_variables.json')
-    .pipe(rename('shared_variables.js'))
-    .pipe(through.obj(function (file, enc, cb) {
-      // console.log('file',String(file.contents));
-      // small pipe to wrappe json data into a js variable
-      file.contents = new Buffer("edlp_vars = "+String(file.contents).trim()+";");
-      cb(null, file);
-    }))
-    .pipe(gulp.dest('./assets/scripts/'));
-});
-
 gulp.task('scripts', function () {
-  gulp.src(['./assets/scripts/shared_variables.js','./assets/scripts/main.js'])
+  gulp.src(['./assets/scripts/main.js']) // './assets/scripts/shared_variables.js',
-    .pipe(concat('main.js'))
+    // .pipe(concat('main.js'))
     .pipe(config.production ? jsmin() : util.noop())
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('./assets/dist/scripts/'));
 });
 
 gulp.task('styles', function () {
-  gulp.src('./assets/styles/app.scss')
+  gulp.src(['./assets/styles/app.scss'])
     .pipe(sass().on('error', sass.logError))
     .pipe(autoprefixer({
         browsers: ['last 2 versions'],
@@ -116,20 +83,49 @@ gulp.task('svg', function () {
   gulp.src('./assets/img/edlp-loader-anim.svg')
     .pipe(gulp.dest('./assets/dist/img'));
 });
-// {
-//   plugins:[
-//     {removeHiddenElems: false},
-//     {cleanupIDs: false},
-//     {removeUselessDefs: false},
-//   ]
-// }
-// removeHiddenElems, cleanupIDs, removeUselessDefs.
 
 // default gulp task
-gulp.task('default', ['bower', 'vars2js', 'scripts', 'vars2sass', 'styles', 'svg'], function() {
+// ,  'vars2sass' 'vars2js',
-  gulp.watch('./assets/json/*.json', ['vars2js', 'vars2sass', 'styles', 'scripts']);
+gulp.task('default', ['bower', 'scripts', 'styles', 'svg'], function() {
+  // gulp.watch('./assets/json/*.json', ['vars2js', 'styles', 'scripts']); //, 'vars2sass'
   gulp.watch('./assets/styles/*.scss', ['styles']);
   gulp.watch('./assets/styles/base/*.scss', ['styles']);
   gulp.watch('./assets/scripts/*.js', ['scripts']);
   gulp.watch('./assets/img/*.svg', ['svg']);
 });
+
+
+
+// this task stays here just for memeomry about how to share variables between js and css
+
+// gulp.task('vars2sass', function () {
+//   gulp.src('./assets/json/shared_variables.json')
+//     .pipe(jsonToSass({
+//       jsonPath: './assets/json/shared_variables.json',
+//       scssPath: './assets/styles/base/_shared_variables.scss'
+//     }));
+// });
+
+// this one is not working, works first run but then it's like it's caching the source
+// gulp.task('variables2js', function() {
+//   gulp.src('./assets/scripts/shared_variables_model.js')
+//     .pipe(rename('shared_variables.js'))
+//     .pipe(data(function(file) {
+//       delete require.cache['./assets/json/shared_variables.json'];
+//       return require('./assets/json/shared_variables.json');
+//     }))
+//     .pipe(json2js())
+//     .pipe(gulp.dest('./assets/scripts/'));
+// });
+
+// gulp.task('vars2js', function() {
+//   gulp.src('./assets/json/shared_variables.json')
+//     .pipe(rename('shared_variables.js'))
+//     .pipe(through.obj(function (file, enc, cb) {
+//       // console.log('file',String(file.contents));
+//       // small pipe to wrappe json data into a js variable
+//       file.contents = new Buffer("edlp_vars = "+String(file.contents).trim()+";");
+//       cb(null, file);
+//     }))
+//     .pipe(gulp.dest('./assets/scripts/'));
+// });

sites/default/config/sync/core.entity_form_display.taxonomy_term.entrees.default.yml

@@ -3,10 +3,12 @@ langcode: fr
 status: true
 dependencies:
   config:
+    - field.field.taxonomy_term.entrees.field_color
     - field.field.taxonomy_term.entrees.field_notice
     - field.field.taxonomy_term.entrees.field_workflow
     - taxonomy.vocabulary.entrees
   module:
+    - color_field
     - field_group
     - text
     - workflow
@@ -29,6 +31,7 @@ third_party_settings:
     group_infos:
       children:
         - name
+        - field_color
         - langcode
         - field_workflow
       parent_name: group_tabs
@@ -84,6 +87,13 @@ content:
       rows: 3
       placeholder: ''
     third_party_settings: {  }
+  field_color:
+    weight: 1
+    settings:
+      default_colors: "#4B8F7E\n#868E24\n#2B8F2F\n#3A33B6\n#2C9F57\n#C48978\n#5270BB\n#FB54D3\n#E07483\n#655845\n#7E0868\n#0E7121\n#DABD42\n#0399BB\n#399A1C\n#708540\n#191BFF\n#279D84\n#5219AB\n#D49CB6\n#497715"
+    third_party_settings: {  }
+    type: color_field_widget_box
+    region: content
   field_notice:
     weight: 3
     settings:
@@ -93,14 +103,14 @@ content:
     type: text_textarea
     region: content
   field_workflow:
-    weight: 2
+    weight: 3
     settings: {  }
     third_party_settings: {  }
     type: workflow_default
     region: content
   langcode:
     type: language_select
-    weight: 1
+    weight: 2
     region: content
     settings:
       include_locked: true

sites/default/config/sync/core.entity_view_display.taxonomy_term.entrees.default.yml

@@ -3,10 +3,12 @@ langcode: fr
 status: true
 dependencies:
   config:
+    - field.field.taxonomy_term.entrees.field_color
     - field.field.taxonomy_term.entrees.field_notice
     - field.field.taxonomy_term.entrees.field_workflow
     - taxonomy.vocabulary.entrees
   module:
+    - color_field
     - options
     - text
 id: taxonomy_term.entrees.default
@@ -21,6 +23,15 @@ content:
     region: content
     settings: {  }
     third_party_settings: {  }
+  field_color:
+    weight: 100
+    label: above
+    settings:
+      format: hex
+      opacity: '1'
+    third_party_settings: {  }
+    type: color_field_formatter_text
+    region: content
   field_notice:
     weight: 2
     label: above
@@ -35,5 +46,8 @@ content:
     third_party_settings: {  }
     type: list_default
     region: content
+  index:
+    weight: 99
+    region: content
 hidden:
   langcode: true

sites/default/config/sync/core.extension.yml

@@ -11,6 +11,7 @@ module:
   breakpoint: 0
   bulkdelete: 0
   ckeditor: 0
+  color_field: 0
   config: 0
   config_devel: 0
   config_update: 0

sites/default/config/sync/field.field.taxonomy_term.entrees.field_color.yml

@@ -0,0 +1,22 @@
+uuid: 185764a3-7cbf-4de2-a7b1-aafab3624b20
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.taxonomy_term.field_color
+    - taxonomy.vocabulary.entrees
+  module:
+    - color_field
+id: taxonomy_term.entrees.field_color
+field_name: field_color
+entity_type: taxonomy_term
+bundle: entrees
+label: Color
+description: ''
+required: true
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  opacity: 0
+field_type: color_field_type

sites/default/config/sync/field.storage.taxonomy_term.field_color.yml

@@ -0,0 +1,20 @@
+uuid: 9abbf68b-5252-4984-9f0d-fc9fca953575
+langcode: fr
+status: true
+dependencies:
+  module:
+    - color_field
+    - taxonomy
+id: taxonomy_term.field_color
+field_name: field_color
+entity_type: taxonomy_term
+type: color_field_type
+settings:
+  format: '#HEXHEX'
+module: color_field
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

sites/default/config/sync/views.view.entree_s_.yml

@@ -3,6 +3,7 @@ langcode: fr
 status: true
 dependencies:
   config:
+    - field.storage.taxonomy_term.field_color
     - field.storage.taxonomy_term.field_notice
     - field.storage.taxonomy_term.field_workflow
     - taxonomy.vocabulary.entrees
@@ -10,6 +11,7 @@ dependencies:
     - user.role.collectionneur
     - user.role.root
   module:
+    - color_field
     - options
     - taxonomy
     - text
@@ -132,6 +134,72 @@ display:
       row:
         type: fields
       fields:
+        field_color:
+          id: field_color
+          table: taxonomy_term__field_color
+          field: field_color
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: Color
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: color
+          type: color_field_formatter_swatch
+          settings:
+            shape: square
+            width: '20'
+            height: '20'
+            opacity: '0'
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          plugin_id: field
         name:
           id: name
           table: taxonomy_term_field_data
@@ -549,6 +617,7 @@ display:
         - url.query_args
         - user.roles
       tags:
+        - 'config:field.storage.taxonomy_term.field_color'
         - 'config:field.storage.taxonomy_term.field_notice'
         - 'config:field.storage.taxonomy_term.field_workflow'
   page_1:
@@ -577,5 +646,6 @@ display:
         - url.query_args
         - user.roles
       tags:
+        - 'config:field.storage.taxonomy_term.field_color'
         - 'config:field.storage.taxonomy_term.field_notice'
         - 'config:field.storage.taxonomy_term.field_workflow'