Skip to content

Commit

Permalink
docs(docs): update docs for LTS release
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhough
bhough committed Feb 6, 2021
1 parent a78b761 commit ac34128
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 37 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Expand Up @@ -10,9 +10,9 @@ A lightweight toolset for writing styles in JavaScript. ✨
[![Github All Releases](https://img.shields.io/npm/dm/polished.svg)](https://npmcharts.com/compare/polished)

```sh
npm install --save polished
npm install --save polished@lts
# or if you're using yarn
yarn add polished
yarn add polished@lts
```

Want to write styles in JavaScript, but also want Sass-style helper functions and mixins? Need a consistent color palette throughout your app? `✨ polished` is for you!
Expand Down Expand Up @@ -122,4 +122,4 @@ Support this project by becoming a sponsor. Your logo will show up here with a l

## License

Copyright © 2016-2020 Brian Hough, Maximilian Stoiber, & Nik Graf. Licensed under the MIT License, see [LICENSE.md](LICENSE.md) for more information!
Copyright © 2016-2021 Brian Hough, Maximilian Stoiber, & Nik Graf. Licensed under the MIT License, see [LICENSE.md](LICENSE.md) for more information!
63 changes: 38 additions & 25 deletions docs/assets/polished.js
View file
Expand Up @@ -310,7 +310,8 @@
"71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"73": "Please provide a valid CSS variable.\n\n",
"74": "CSS variable not found.\n"
"74": "CSS variable not found.\n\n",
"75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
};
/**
* super basic version of sprintf
Expand Down Expand Up @@ -935,6 +936,10 @@
throw new PolishedError(48);
}

if (fromSizeUnit !== minScreenUnit || toSizeUnit !== maxScreenUnit) {
throw new PolishedError(75);
}

var slope = (unitlessFromSize - unitlessToSize) / (unitlessMinScreen - unitlessMaxScreen);
var base = unitlessToSize - slope * unitlessMaxScreen;
return "calc(" + base.toFixed(2) + (fromSizeUnit || '') + " + " + (100 * slope).toFixed(2) + "vw)";
Expand Down Expand Up @@ -1804,23 +1809,31 @@
}
};

var getBorderColor = function getBorderColor(pointingDirection, foregroundColor, backgroundColor) {
var getBorderColor = function getBorderColor(pointingDirection, foregroundColor) {
switch (pointingDirection) {
case 'top':
case 'bottomRight':
return backgroundColor + " " + backgroundColor + " " + foregroundColor + " " + backgroundColor;
return {
borderBottomColor: foregroundColor
};

case 'right':
case 'bottomLeft':
return backgroundColor + " " + backgroundColor + " " + backgroundColor + " " + foregroundColor;
return {
borderLeftColor: foregroundColor
};

case 'bottom':
case 'topLeft':
return foregroundColor + " " + backgroundColor + " " + backgroundColor + " " + backgroundColor;
return {
borderTopColor: foregroundColor
};

case 'left':
case 'topRight':
return backgroundColor + " " + foregroundColor + " " + backgroundColor + " " + backgroundColor;
return {
borderRightColor: foregroundColor
};

default:
throw new PolishedError(59);
Expand Down Expand Up @@ -1868,13 +1881,14 @@
throw new PolishedError(60);
}

return {
return _extends__default['default']({
width: '0',
height: '0',
borderColor: getBorderColor(pointingDirection, foregroundColor, backgroundColor),
borderColor: backgroundColor
}, getBorderColor(pointingDirection, foregroundColor), {
borderStyle: 'solid',
borderWidth: getBorderWidth(pointingDirection, heightAndUnit, widthAndUnit)
};
});
}

/**
Expand Down Expand Up @@ -3070,15 +3084,15 @@
/* ::<number | string, string, string> */
(opacify);

var defaultLightReturnColor = '#000';
var defaultDarkReturnColor = '#fff';
var defaultReturnIfLightColor = '#000';
var defaultReturnIfDarkColor = '#fff';
/**
* Returns black or white (or optional light and dark return colors) for best
* Returns black or white (or optional passed colors) for best
* contrast depending on the luminosity of the given color.
* When passing custom return colors, set `strict` to `true` to ensure that the
* When passing custom return colors, strict mode ensures that the
* return color always meets or exceeds WCAG level AA or greater. If this test
* fails, the default return color (black or white) is returned in place of the
* custom return color.
* custom return color. You can optionally turn off strict mode.
*
* Follows [W3C specs for readability](https://www.w3.org/TR/WCAG20-TECHS/G18.html).
*
Expand Down Expand Up @@ -3108,28 +3122,27 @@
* }
*/

function readableColor(color, lightReturnColor, darkReturnColor, strict) {
if (lightReturnColor === void 0) {
lightReturnColor = defaultLightReturnColor;
function readableColor(color, returnIfLightColor, returnIfDarkColor, strict) {
if (returnIfLightColor === void 0) {
returnIfLightColor = defaultReturnIfLightColor;
}

if (darkReturnColor === void 0) {
darkReturnColor = defaultDarkReturnColor;
if (returnIfDarkColor === void 0) {
returnIfDarkColor = defaultReturnIfDarkColor;
}

if (strict === void 0) {
strict = false;
strict = true;
}

var isLightColor = getLuminance(color) > 0.179;
var preferredReturnColor = isLightColor ? lightReturnColor : darkReturnColor; // TODO: Make `strict` the default behaviour in the next major release.
// Without `strict`, this may return a color that does not meet WCAG AA.
var isColorLight = getLuminance(color) > 0.179;
var preferredReturnColor = isColorLight ? returnIfLightColor : returnIfDarkColor;

if (!strict || getContrast(color, preferredReturnColor) >= 4.5) {
return preferredReturnColor;
}

return isLightColor ? defaultLightReturnColor : defaultDarkReturnColor;
return isColorLight ? defaultReturnIfLightColor : defaultReturnIfDarkColor;
}

/**
Expand Down Expand Up @@ -3424,7 +3437,7 @@
var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;

var colorWithAlpha = _extends__default['default']({}, parsedColor, {
alpha: guard(0, 1, (alpha * 100 - parseFloat(amount) * 100) / 100)
alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
});

return rgba(colorWithAlpha);
Expand Down
18 changes: 9 additions & 9 deletions docs/docs/index.html
View file
Expand Up @@ -5017,16 +5017,16 @@ <h3 class='fl m0' id='readablecolor'>
</div>


<p>Returns black or white (or optional light and dark return colors) for best
<p>Returns black or white (or optional passed colors) for best
contrast depending on the luminosity of the given color.
When passing custom return colors, set <code>strict</code> to <code>true</code> to ensure that the
When passing custom return colors, strict mode ensures that the
return color always meets or exceeds WCAG level AA or greater. If this test
fails, the default return color (black or white) is returned in place of the
custom return color.</p>
custom return color. You can optionally turn off strict mode.</p>
<p>Follows <a href="https://www.w3.org/TR/WCAG20-TECHS/G18.html">W3C specs for readability</a>.</p>


<div class='pre p1 fill-light mt0'>readableColor(color: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, lightReturnColor: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, darkReturnColor: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, strict: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>
<div class='pre p1 fill-light mt0'>readableColor(color: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, returnIfLightColor: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, returnIfDarkColor: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, strict: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>


<p>
Expand Down Expand Up @@ -5057,17 +5057,17 @@ <h3 class='fl m0' id='readablecolor'>

<div class='space-bottom0'>
<div>
<span class='code bold'>lightReturnColor</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
= <code>defaultLightReturnColor</code>)</code>
<span class='code bold'>returnIfLightColor</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
= <code>defaultReturnIfLightColor</code>)</code>

</div>

</div>

<div class='space-bottom0'>
<div>
<span class='code bold'>darkReturnColor</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
= <code>defaultDarkReturnColor</code>)</code>
<span class='code bold'>returnIfDarkColor</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
= <code>defaultReturnIfDarkColor</code>)</code>

</div>

Expand All @@ -5076,7 +5076,7 @@ <h3 class='fl m0' id='readablecolor'>
<div class='space-bottom0'>
<div>
<span class='code bold'>strict</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
= <code>false</code>)</code>
= <code>true</code>)</code>

</div>

Expand Down

0 comments on commit ac34128

Please sign in to comment.