Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
/* global Color */
|
|
|
|
/* eslint no-unused-vars: off */
|
|
|
|
/**
|
|
|
|
* Color Calculations.
|
|
|
|
*
|
|
|
|
* @since 1.0.0
|
|
|
|
*
|
|
|
|
* @param {string} backgroundColor - The background color.
|
|
|
|
* @param {number} accentHue - The hue for our accent color.
|
|
|
|
*
|
|
|
|
* @return {Object} - this
|
|
|
|
*/
|
|
|
|
function _twentyTwentyColor( backgroundColor, accentHue ) {
|
|
|
|
// Set the object properties.
|
|
|
|
this.backgroundColor = backgroundColor;
|
|
|
|
this.accentHue = accentHue;
|
|
|
|
this.bgColorObj = new Color( backgroundColor );
|
|
|
|
this.textColorObj = this.bgColorObj.getMaxContrastColor();
|
|
|
|
this.textColor = this.textColorObj.toCSS();
|
|
|
|
this.isDark = 0.5 > this.bgColorObj.toLuminosity();
|
|
|
|
this.isLight = ! this.isDark;
|
|
|
|
|
|
|
|
// Return the object.
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Builds an array of Color objects based on the accent hue.
|
|
|
|
* For improved performance we only build half the array
|
|
|
|
* depending on dark/light background-color.
|
|
|
|
*
|
|
|
|
* @since 1.0.0
|
|
|
|
*
|
|
|
|
* @return {Object} - this
|
|
|
|
*/
|
|
|
|
_twentyTwentyColor.prototype.setAccentColorsArray = function() {
|
|
|
|
var self = this,
|
Bundled Themes: Update Twenty Twenty.
This brings `trunk`’s version of Twenty Twenty in-sync with GitHub.
For a complete list of changes since [46551], see https://github.com/WordPress/twentytwenty/compare/bc89c51...4549fd9.
Reviewed by SergeyBiryukov, desrosj, ianbelanger.
Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, intimez, itowhid06, decrecementofeliz, aristath, westonruter, mukesh27, jorgefilipecosta, karmatosed.
Fixes #48386.
Built from https://develop.svn.wordpress.org/trunk@46571
git-svn-id: http://core.svn.wordpress.org/trunk@46368 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-22 20:27:08 +02:00
|
|
|
minSaturation = 65,
|
|
|
|
maxSaturation = 100,
|
|
|
|
minLightness = 30,
|
|
|
|
maxLighness = 80,
|
|
|
|
stepSaturation = 2,
|
|
|
|
stepLightness = 2,
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
pushColor = function() {
|
|
|
|
var colorObj = new Color( {
|
|
|
|
h: self.accentHue,
|
|
|
|
s: s,
|
2019-09-23 22:54:57 +02:00
|
|
|
l: l
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
} ),
|
Bundled Themes: Update Twenty Twenty.
This brings `trunk`’s version of Twenty Twenty in-sync with GitHub.
For a complete list of changes since [46551], see https://github.com/WordPress/twentytwenty/compare/bc89c51...4549fd9.
Reviewed by SergeyBiryukov, desrosj, ianbelanger.
Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, intimez, itowhid06, decrecementofeliz, aristath, westonruter, mukesh27, jorgefilipecosta, karmatosed.
Fixes #48386.
Built from https://develop.svn.wordpress.org/trunk@46571
git-svn-id: http://core.svn.wordpress.org/trunk@46368 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-22 20:27:08 +02:00
|
|
|
item,
|
|
|
|
/**
|
|
|
|
* Get a score for this color in contrast to its background color and surrounding text.
|
|
|
|
*
|
|
|
|
* @since 1.0.0
|
|
|
|
* @param {number} contrastBackground - WCAG contrast with the background color.
|
|
|
|
* @param {number} contrastSurroundingText - WCAG contrast with surrounding text.
|
|
|
|
* @return {number} - 0 is best, higher numbers have bigger difference with the desired scores.
|
|
|
|
*/
|
|
|
|
getScore = function( contrastBackground, contrastSurroundingText ) {
|
|
|
|
var diffBackground = ( 7 >= contrastBackground ) ? 0 : 7 - contrastBackground,
|
|
|
|
diffSurroundingText = ( 3 >= contrastSurroundingText ) ? 0 : 3 - contrastSurroundingText;
|
|
|
|
|
|
|
|
return diffBackground + diffSurroundingText;
|
|
|
|
};
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
|
|
|
|
item = {
|
|
|
|
color: colorObj,
|
|
|
|
contrastBackground: colorObj.getDistanceLuminosityFrom( self.bgColorObj ),
|
2019-09-23 22:54:57 +02:00
|
|
|
contrastText: colorObj.getDistanceLuminosityFrom( self.textColorObj )
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
// Check a minimum of 4.5:1 contrast with the background and 3:1 with surrounding text.
|
|
|
|
if ( 4.5 > item.contrastBackground || 3 > item.contrastText ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Get a score for this color by multiplying the 2 contrasts.
|
|
|
|
// We'll use that to sort the array.
|
Bundled Themes: Update Twenty Twenty.
This brings `trunk`’s version of Twenty Twenty in-sync with GitHub.
For a complete list of changes since [46551], see https://github.com/WordPress/twentytwenty/compare/bc89c51...4549fd9.
Reviewed by SergeyBiryukov, desrosj, ianbelanger.
Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, intimez, itowhid06, decrecementofeliz, aristath, westonruter, mukesh27, jorgefilipecosta, karmatosed.
Fixes #48386.
Built from https://develop.svn.wordpress.org/trunk@46571
git-svn-id: http://core.svn.wordpress.org/trunk@46368 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-22 20:27:08 +02:00
|
|
|
item.score = getScore( item.contrastBackground, item.contrastText );
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
|
|
|
|
self.accentColorsArray.push( item );
|
|
|
|
},
|
|
|
|
s, l, aaa;
|
|
|
|
|
|
|
|
this.accentColorsArray = [];
|
|
|
|
|
|
|
|
// We're using `for` loops here because they perform marginally better than other loops.
|
|
|
|
for ( s = minSaturation; s <= maxSaturation; s += stepSaturation ) {
|
|
|
|
for ( l = minLightness; l <= maxLighness; l += stepLightness ) {
|
|
|
|
pushColor( s, l );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Check if we have colors that are AAA compliant.
|
|
|
|
aaa = this.accentColorsArray.filter( function( color ) {
|
|
|
|
return 7 <= color.contrastBackground;
|
|
|
|
} );
|
|
|
|
|
|
|
|
// If we have AAA-compliant colors, alpways prefer them.
|
|
|
|
if ( aaa.length ) {
|
|
|
|
this.accentColorsArray = aaa;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Sort colors by contrast.
|
|
|
|
this.accentColorsArray.sort( function( a, b ) {
|
Bundled Themes: Update Twenty Twenty.
This brings `trunk`’s version of Twenty Twenty in-sync with GitHub.
For a complete list of changes since [46551], see https://github.com/WordPress/twentytwenty/compare/bc89c51...4549fd9.
Reviewed by SergeyBiryukov, desrosj, ianbelanger.
Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, intimez, itowhid06, decrecementofeliz, aristath, westonruter, mukesh27, jorgefilipecosta, karmatosed.
Fixes #48386.
Built from https://develop.svn.wordpress.org/trunk@46571
git-svn-id: http://core.svn.wordpress.org/trunk@46368 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-22 20:27:08 +02:00
|
|
|
return a.score - b.score;
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
} );
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get accessible text-color.
|
|
|
|
*
|
|
|
|
* @since 1.0.0
|
|
|
|
*
|
|
|
|
* @return {Color} - Returns a Color object.
|
|
|
|
*/
|
|
|
|
_twentyTwentyColor.prototype.getTextColor = function() {
|
|
|
|
return this.textColor;
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get accessible color for the defined accent-hue and background-color.
|
|
|
|
*
|
|
|
|
* @since 1.0.0
|
|
|
|
*
|
|
|
|
* @return {Color} - Returns a Color object.
|
|
|
|
*/
|
|
|
|
_twentyTwentyColor.prototype.getAccentColor = function() {
|
|
|
|
var fallback;
|
|
|
|
|
|
|
|
// If we have colors returns the 1st one - it has the highest score.
|
|
|
|
if ( this.accentColorsArray[0] ) {
|
|
|
|
return this.accentColorsArray[0].color;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Fallback.
|
|
|
|
fallback = new Color( 'hsl(' + this.accentHue + ',75%,50%)' );
|
|
|
|
return fallback.getReadableContrastingColor( this.bgColorObj, 4.5 );
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Return a new instance of the _twentyTwentyColor object.
|
|
|
|
*
|
|
|
|
* @since 1.0.0
|
|
|
|
* @param {string} backgroundColor - The background color.
|
|
|
|
* @param {number} accentHue - The hue for our accent color.
|
|
|
|
* @return {Object} - this
|
|
|
|
*/
|
Bundled Themes: Update Twenty Twenty.
This brings `trunk`'s version of Twenty Twenty in-sync with GitHub.
For a complete list of changes since [46357], see https://github.com/WordPress/twentytwenty/compare/7157870...7246fd6.
Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, netweb, joyusly, luminuu, itowhid06, cbravobernal, intimez, glauberglauber, ocean90, amolv, briceduclos, aristath, mukesh27, garrett-eclipse, audrasjb, afercia, dianeco, utsav72640, mahesh901122, tobifjellner.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46445
git-svn-id: http://core.svn.wordpress.org/trunk@46243 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-10-08 21:08:07 +02:00
|
|
|
function twentyTwentyColor( backgroundColor, accentHue ) {// jshint ignore:line
|
Bundled Themes: Import Twenty Twenty, the new default theme for WordPress 5.3.
Welcome to the bundled themes family!
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwenty/.
Props anlino, ianbelanger, audrasjb, nielslange, fabiankaegy, mukesh27, poena, joyously, emiluzelac, williampatton, dingo-d, dkarfa, acosmin, rabmalin, kafleg, jeffpaul, hareesh-pillai, burhandodhy, afercia, juanfra, soean, presskopp, justinahinon, jrf, netweb, garyj, pento, flixos90, vbaimas, zebulan, byalextran, mor10, kjellr, allancole, tdh, karmatosed, mapk, matt, andrewtaylor-1, ismailelkorchi, garrett-eclipse, gsayed786, dianeco, celloexpressions, aristath, nadir, cbravobernal, intimez, hometowntrailers, collet, littlebigthing, tobifjellner, kevinkovadia, jarretc.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46271
git-svn-id: http://core.svn.wordpress.org/trunk@46083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 22:16:00 +02:00
|
|
|
var color = new _twentyTwentyColor( backgroundColor, accentHue );
|
|
|
|
color.setAccentColorsArray();
|
|
|
|
return color;
|
|
|
|
}
|