[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

title

Body

[close]

/wp-content/themes/twentytwenty/assets/js/ -> color-calculations.js (source)

   1  /* global Color */
   2  /* eslint no-unused-vars: off */
   3  /**
   4   * Color Calculations.
   5   *
   6   * @since 1.0.0
   7   *
   8   * @param {string} backgroundColor - The background color.
   9   * @param {number} accentHue - The hue for our accent color.
  10   *
  11   * @return {Object} - this
  12   */
  13  function _twentyTwentyColor( backgroundColor, accentHue ) {
  14      // Set the object properties.
  15      this.backgroundColor = backgroundColor;
  16      this.accentHue = accentHue;
  17      this.bgColorObj = new Color( backgroundColor );
  18      this.textColorObj = this.bgColorObj.getMaxContrastColor();
  19      this.textColor = this.textColorObj.toCSS();
  20      this.isDark = 0.5 > this.bgColorObj.toLuminosity();
  21      this.isLight = ! this.isDark;
  22  
  23      // Return the object.
  24      return this;
  25  }
  26  
  27  /**
  28   * Builds an array of Color objects based on the accent hue.
  29   * For improved performance we only build half the array
  30   * depending on dark/light background-color.
  31   *
  32   * @since 1.0.0
  33   *
  34   * @return {Object} - this
  35   */
  36  _twentyTwentyColor.prototype.setAccentColorsArray = function() {
  37      var self = this,
  38          minSaturation = 65,
  39          maxSaturation = 100,
  40          minLightness = 30,
  41          maxLightness = 80,
  42          stepSaturation = 2,
  43          stepLightness = 2,
  44          pushColor = function() {
  45              var colorObj = new Color( {
  46                      h: self.accentHue,
  47                      s: s,
  48                      l: l
  49                  } ),
  50                  item,
  51                  /**
  52                   * Get a score for this color in contrast to its background color and surrounding text.
  53                   *
  54                   * @since 1.0.0
  55                   * @param {number} contrastBackground - WCAG contrast with the background color.
  56                   * @param {number} contrastSurroundingText - WCAG contrast with surrounding text.
  57                   * @return {number} - 0 is best, higher numbers have bigger difference with the desired scores.
  58                   */
  59                  getScore = function( contrastBackground, contrastSurroundingText ) {
  60                      var diffBackground = ( 7 >= contrastBackground ) ? 0 : 7 - contrastBackground,
  61                          diffSurroundingText = ( 3 >= contrastSurroundingText ) ? 0 : 3 - contrastSurroundingText;
  62  
  63                      return diffBackground + diffSurroundingText;
  64                  };
  65  
  66              item = {
  67                  color: colorObj,
  68                  contrastBackground: colorObj.getDistanceLuminosityFrom( self.bgColorObj ),
  69                  contrastText: colorObj.getDistanceLuminosityFrom( self.textColorObj )
  70              };
  71  
  72              // Check a minimum of 4.5:1 contrast with the background and 3:1 with surrounding text.
  73              if ( 4.5 > item.contrastBackground || 3 > item.contrastText ) {
  74                  return;
  75              }
  76  
  77              // Get a score for this color by multiplying the 2 contrasts.
  78              // We'll use that to sort the array.
  79              item.score = getScore( item.contrastBackground, item.contrastText );
  80  
  81              self.accentColorsArray.push( item );
  82          },
  83          s, l, aaa;
  84  
  85      this.accentColorsArray = [];
  86  
  87      // We're using `for` loops here because they perform marginally better than other loops.
  88      for ( s = minSaturation; s <= maxSaturation; s += stepSaturation ) {
  89          for ( l = minLightness; l <= maxLightness; l += stepLightness ) {
  90              pushColor( s, l );
  91          }
  92      }
  93  
  94      // Check if we have colors that are AAA compliant.
  95      aaa = this.accentColorsArray.filter( function( color ) {
  96          return 7 <= color.contrastBackground;
  97      } );
  98  
  99      // If we have AAA-compliant colors, always prefer them.
 100      if ( aaa.length ) {
 101          this.accentColorsArray = aaa;
 102      }
 103  
 104      // Sort colors by contrast.
 105      this.accentColorsArray.sort( function( a, b ) {
 106          return a.score - b.score;
 107      } );
 108      return this;
 109  };
 110  
 111  /**
 112   * Get accessible text-color.
 113   *
 114   * @since 1.0.0
 115   *
 116   * @return {Color} - Returns a Color object.
 117   */
 118  _twentyTwentyColor.prototype.getTextColor = function() {
 119      return this.textColor;
 120  };
 121  
 122  /**
 123   * Get accessible color for the defined accent-hue and background-color.
 124   *
 125   * @since 1.0.0
 126   *
 127   * @return {Color} - Returns a Color object.
 128   */
 129  _twentyTwentyColor.prototype.getAccentColor = function() {
 130      var fallback;
 131  
 132      // If we have colors returns the 1st one - it has the highest score.
 133      if ( this.accentColorsArray[0] ) {
 134          return this.accentColorsArray[0].color;
 135      }
 136  
 137      // Fallback.
 138      fallback = new Color( 'hsl(' + this.accentHue + ',75%,50%)' );
 139      return fallback.getReadableContrastingColor( this.bgColorObj, 4.5 );
 140  };
 141  
 142  /**
 143   * Return a new instance of the _twentyTwentyColor object.
 144   *
 145   * @since 1.0.0
 146   * @param {string} backgroundColor - The background color.
 147   * @param {number} accentHue - The hue for our accent color.
 148   * @return {Object} - this
 149   */
 150  function twentyTwentyColor( backgroundColor, accentHue ) {// jshint ignore:line
 151      var color = new _twentyTwentyColor( backgroundColor, accentHue );
 152      color.setAccentColorsArray();
 153      return color;
 154  }


Generated: Sat Nov 23 20:47:33 2019 Cross-referenced by PHPXref 0.7