Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@remirror/ui

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@remirror/ui - npm Package Compare versions

Comparing version 0.7.5 to 0.7.6

8

CHANGELOG.md
# @remirror/ui
## 0.7.6
### Patch Changes
- Updated dependencies [0300d01c]
- @remirror/core-types@0.9.0
- @remirror/core-helpers@0.7.6
## 0.7.5

@@ -4,0 +12,0 @@

1320

lib/dist/ui.cjs.js

@@ -10,5 +10,10 @@ 'use strict';

var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _toArray = _interopDefault(require('@babel/runtime/helpers/toArray'));
var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
var coreHelpers = require('@remirror/core-helpers');
var core = require('@emotion/core');
var react = require('react');
var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
var css = require('@styled-system/css');

@@ -21,26 +26,37 @@ var emotionTheming = require('emotion-theming');

// Taken from https://github.com/regexhq/hsla-regex/blob/master/test/test.js#L7
const HSLA_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/; // Taken from https://github.com/regexhq/hsl-regex/blob/3ea5cede63c1e4a30878e7329a197c502337b7b3/index.js#L7
var HSLA_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/; // Taken from https://github.com/regexhq/hsl-regex/blob/3ea5cede63c1e4a30878e7329a197c502337b7b3/index.js#L7
const HSL_REGEX = /^hsl\(\s*([\d.]+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/;
const HSL_SYMBOL = Symbol.for('hslColor');
const isHSL = value => coreHelpers.isObject(value) && value.constructor && value.constructor.$$id === HSL_SYMBOL;
var HSL_REGEX = /^hsl\(\s*([\d.]+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/;
var HSL_SYMBOL = Symbol["for"]('hslColor');
var isHSL = function isHSL(value) {
return coreHelpers.isObject(value) && value.constructor && value.constructor.$$id === HSL_SYMBOL;
};
const isNamedHSLObject = value => coreHelpers.bool(coreHelpers.isPlainObject(value) && value.hue && value.saturation && value.lightness);
var isNamedHSLObject = function isNamedHSLObject(value) {
return coreHelpers.bool(coreHelpers.isPlainObject(value) && value.hue && value.saturation && value.lightness);
};
const isHSLObject = value => coreHelpers.bool(coreHelpers.isPlainObject(value) && value.h && value.s && value.l);
var isHSLObject = function isHSLObject(value) {
return coreHelpers.bool(coreHelpers.isPlainObject(value) && value.h && value.s && value.l);
};
const hslArrayToObject = value => {
const [h, s, l, a] = value;
var hslArrayToObject = function hslArrayToObject(value) {
var _value = _slicedToArray(value, 4),
h = _value[0],
s = _value[1],
l = _value[2],
a = _value[3];
return {
h,
s,
l,
a
h: h,
s: s,
l: l,
a: a
};
};
const hslStringToObject = value => {
var hslStringToObject = function hslStringToObject(value) {
var _HSLA_REGEX$exec;
const regexValue = (_HSLA_REGEX$exec = HSLA_REGEX.exec(value)) !== null && _HSLA_REGEX$exec !== void 0 ? _HSLA_REGEX$exec : HSL_REGEX.exec(value);
var regexValue = (_HSLA_REGEX$exec = HSLA_REGEX.exec(value)) !== null && _HSLA_REGEX$exec !== void 0 ? _HSLA_REGEX$exec : HSL_REGEX.exec(value);

@@ -51,7 +67,9 @@ if (!regexValue) {

const [, ...array] = regexValue;
var _regexValue = _toArray(regexValue),
array = _regexValue.slice(1);
return hslArrayToObject(array);
};
const convertHSLToObject = value => {
var convertHSLToObject = function convertHSLToObject(value) {
if (isHSLObject(value)) {

@@ -62,13 +80,11 @@ return value;

if (isNamedHSLObject(value)) {
const {
hue: h,
saturation: s,
lightness: l,
alpha: a
} = value;
var h = value.hue,
s = value.saturation,
l = value.lightness,
a = value.alpha;
return {
h,
s,
l,
a
h: h,
s: s,
l: l,
a: a
};

@@ -88,6 +104,8 @@ }

const isValidHue = hue => coreHelpers.isNumber(hue) && hue <= 360 && hue >= 0;
var isValidHue = function isValidHue(hue) {
return coreHelpers.isNumber(hue) && hue <= 360 && hue >= 0;
};
const createValidHue = value => {
const hue = coreHelpers.isString(value) ? Number(value) % 360 : value % 360;
var createValidHue = function createValidHue(value) {
var hue = coreHelpers.isString(value) ? Number(value) % 360 : value % 360;

@@ -101,6 +119,8 @@ if (!isValidHue(hue)) {

const isValidPercent = percent => coreHelpers.isNumber(percent) && percent <= 100 && percent >= 0;
var isValidPercent = function isValidPercent(percent) {
return coreHelpers.isNumber(percent) && percent <= 100 && percent >= 0;
};
const createValidPercent = value => {
const percent = coreHelpers.isString(value) ? Number(value.replace(/[%\s]+/g, '')) : value;
var createValidPercent = function createValidPercent(value) {
var percent = coreHelpers.isString(value) ? Number(value.replace(/[%\s]+/g, '')) : value;

@@ -114,10 +134,12 @@ if (!isValidPercent(percent)) {

const clampPercent = value => coreHelpers.clamp({
min: 0,
max: 100,
value
});
var clampPercent = function clampPercent(value) {
return coreHelpers.clamp({
min: 0,
max: 100,
value: value
});
};
const createValidAlpha = value => {
const alpha = coreHelpers.isString(value) ? value.includes('%') ? Number(value.replace(/[%\s]+/g, '')) : Number(value) * 100 : value;
var createValidAlpha = function createValidAlpha(value) {
var alpha = coreHelpers.isString(value) ? value.includes('%') ? Number(value.replace(/[%\s]+/g, '')) : Number(value) * 100 : value;

@@ -135,15 +157,18 @@ if (coreHelpers.isUndefined(alpha)) {

const createValidHSLObject = ({
h: hue,
s: saturation,
l: lightness,
a: alpha
}) => ({
h: createValidHue(hue),
s: createValidPercent(saturation),
l: createValidPercent(lightness),
a: createValidAlpha(alpha)
});
var createValidHSLObject = function createValidHSLObject(_ref) {
var hue = _ref.h,
saturation = _ref.s,
lightness = _ref.l,
alpha = _ref.a;
return {
h: createValidHue(hue),
s: createValidPercent(saturation),
l: createValidPercent(lightness),
a: createValidAlpha(alpha)
};
};
const freeze = hslObject => Object.freeze(hslObject);
var freeze = function freeze(hslObject) {
return Object.freeze(hslObject);
};
/**

@@ -154,3 +179,3 @@ * Taken from https://github.com/usemeta/hsl-rgb/blob/1afed9a9703816e375839b4fbb6458f2765a76a8/index.js#L1

const calculateHue = (pp, qq, hh) => {
var calculateHue = function calculateHue(pp, qq, hh) {
hh = hh < 0 ? hh + 1 : hh > 1 ? hh - 1 : hh;

@@ -164,13 +189,20 @@ return hh < 1 / 6 ? pp + (qq - pp) * 6 * hh : hh < 1 / 2 ? qq : hh < 2 / 3 ? pp + (qq - pp) * (2 / 3 - hh) * 6 : pp;

const hslToRgb = ([hue, saturation, lightness]) => {
let [rr, gg, bb] = [0, 0, 0];
const hh = hue / 360;
const ss = saturation / 100;
const ll = lightness / 100;
var hslToRgb = function hslToRgb(_ref2) {
var _ref3 = _slicedToArray(_ref2, 3),
hue = _ref3[0],
saturation = _ref3[1],
lightness = _ref3[2];
var rr = 0,
gg = 0,
bb = 0;
var hh = hue / 360;
var ss = saturation / 100;
var ll = lightness / 100;
if (ss === 0) {
rr = gg = bb = ll;
} else {
const qq = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
const pp = 2 * ll - qq;
var qq = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
var pp = 2 * ll - qq;
rr = calculateHue(pp, qq, hh + 1 / 3);

@@ -188,3 +220,6 @@ gg = calculateHue(pp, qq, hh);

const percentageToRatio = (percent, precision = 10) => Number((percent / 100).toFixed(precision));
var percentageToRatio = function percentageToRatio(percent) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
return Number((percent / 100).toFixed(precision));
};
/**

@@ -195,23 +230,31 @@ * HSLColor is a small utility for transforming colors, but only hsl colors.

class HSL {
/**
* Create a hsl class from the passed in string / array / object parameters.
*
* Throws a descriptive error if invalid parameters are passed in.
*/
static create(value) {
if (isHSL(value)) {
return value.clone();
var HSL =
/*#__PURE__*/
function () {
_createClass(HSL, null, [{
key: "create",
/**
* Create a hsl class from the passed in string / array / object parameters.
*
* Throws a descriptive error if invalid parameters are passed in.
*/
value: function create(value) {
if (isHSL(value)) {
return value.clone();
}
var hsl = createValidHSLObject(convertHSLToObject(value));
return new HSL(hsl);
}
/**
* Store the hue as an object of number values. Percentages are stored as decimals
* between 0 and 1.
*/
const hsl = createValidHSLObject(convertHSLToObject(value));
return new HSL(hsl);
}
/**
* Store the hue as an object of number values. Percentages are stored as decimals
* between 0 and 1.
*/
}]);
function HSL(hsla) {
_classCallCheck(this, HSL);
constructor(hsla) {
this.hsla = freeze(hsla);

@@ -226,478 +269,515 @@ }

get h() {
return this.hsla.h;
}
/**
* Saturation
*
* A value between 0 and 100 representing the percentage saturation.
*/
_createClass(HSL, [{
key: "toJSON",
/**
* Returns the object representation of the hsl class.
*/
value: function toJSON() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
return {
h: h,
s: s,
l: l,
a: a
};
}
/**
* Return the array representation of the hsl
*/
get s() {
return this.hsla.s;
}
/**
* Lightness
*
* A value between 0 and 100 representing the percentage lightness.
*/
}, {
key: "toArray",
value: function toArray() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
return [h, s, l, a];
}
/**
* Produces a valid HSL string that can be used to represent a color in your css.
*/
}, {
key: "toString",
value: function toString() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
var _ref4 = [h.toString(), "".concat(s, "%"), "".concat(l, "%"), "".concat(percentageToRatio(a))],
hue = _ref4[0],
saturation = _ref4[1],
lightness = _ref4[2],
alpha = _ref4[3];
return alpha === '1' ? "hsl(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ")") : "hsla(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ", ").concat(alpha, ")");
}
/**
* Returns the array
*/
get l() {
return this.hsla.l;
}
/**
* Alpha
*
* The alpha value which is a number between 0 and 1.
*/
}, {
key: "toRGB",
value: function toRGB() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
var _hslToRgb = hslToRgb([h, s, l]),
_hslToRgb2 = _slicedToArray(_hslToRgb, 3),
r = _hslToRgb2[0],
g = _hslToRgb2[1],
b = _hslToRgb2[2];
get a() {
return this.hsla.a;
}
/**
* Brightness
*
* Returns a number between 0 and 255 the current color (not taking into account the alpha level).
* The higher the number the brighter the color.
*
* https://24ways.org/2010/calculating-color-contrast
*/
return [r, g, b, a];
}
/**
* Rotate the color around the color wheel. The value is always clamped between 0 and 360deg.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.rotate(100).h // => 280
* ```
*/
get brightness() {
const [r, g, b] = this.toRGB();
return (r * 299 + g * 587 + b * 114) / 1000;
}
get isDark() {
return this.brightness < 128;
}
get isLight() {
return !this.isDark;
}
/**
* Returns the object representation of the hsl class.
*/
toJSON() {
const {
h,
s,
l,
a
} = this;
return {
h,
s,
l,
a
};
}
/**
* Return the array representation of the hsl
*/
toArray() {
const {
h,
s,
l,
a
} = this;
return [h, s, l, a];
}
/**
* Produces a valid HSL string that can be used to represent a color in your css.
*/
toString() {
const {
h,
s,
l,
a
} = this;
const [hue, saturation, lightness, alpha] = [h.toString(), "".concat(s, "%"), "".concat(l, "%"), "".concat(percentageToRatio(a))];
return alpha === '1' ? "hsl(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ")") : "hsla(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ", ").concat(alpha, ")");
}
/**
* Returns the array
*/
toRGB() {
const {
h,
s,
l,
a
} = this;
const [r, g, b] = hslToRgb([h, s, l]);
return [r, g, b, a];
}
/**
* Rotate the color around the color wheel. The value is always clamped between 0 and 360deg.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.rotate(100).h // => 280
* ```
*/
rotate(degrees) {
const _this$hsla = this.hsla,
{
h
} = _this$hsla,
}, {
key: "rotate",
value: function rotate(degrees) {
var _this$hsla = this.hsla,
h = _this$hsla.h,
sla = _objectWithoutProperties(_this$hsla, ["h"]);
return this.clone(_objectSpread({}, sla, {
h: createValidHue(h + degrees)
}));
}
/**
* Lighten the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.lighten(50).l // => 75
* color.lighten('25%').l // => 62.5
* ```
*/
return this.clone(_objectSpread({}, sla, {
h: createValidHue(h + degrees)
}));
}
/**
* Lighten the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.lighten(50).l // => 75
* color.lighten('25%').l // => 62.5
* ```
*/
lighten(percent) {
const _this$hsla2 = this.hsla,
{
l
} = _this$hsla2,
}, {
key: "lighten",
value: function lighten(percent) {
var _this$hsla2 = this.hsla,
l = _this$hsla2.l,
hsa = _objectWithoutProperties(_this$hsla2, ["l"]);
const lightness = createValidPercent(clampPercent(l + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Darken the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.darken(50).l // => 25
* color.darken('25%').l // => 37.5
* ```
*/
var lightness = createValidPercent(clampPercent(l + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Darken the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.darken(50).l // => 25
* color.darken('25%').l // => 37.5
* ```
*/
darken(percent) {
const _this$hsla3 = this.hsla,
{
l
} = _this$hsla3,
}, {
key: "darken",
value: function darken(percent) {
var _this$hsla3 = this.hsla,
l = _this$hsla3.l,
hsa = _objectWithoutProperties(_this$hsla3, ["l"]);
const lightness = createValidPercent(clampPercent(l - createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Increase the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.unfade(40).a // => 90
* color.unfade('25%').a // => 75
* ```
*/
var lightness = createValidPercent(clampPercent(l - createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Increase the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.unfade(40).a // => 90
* color.unfade('25%').a // => 75
* ```
*/
unfade(percent) {
const _this$hsla4 = this.hsla,
{
a = 100
} = _this$hsla4,
}, {
key: "unfade",
value: function unfade(percent) {
var _this$hsla4 = this.hsla,
_this$hsla4$a = _this$hsla4.a,
a = _this$hsla4$a === void 0 ? 100 : _this$hsla4$a,
hsl = _objectWithoutProperties(_this$hsla4, ["a"]);
const alpha = createValidPercent(clampPercent(a + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Decrease the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.fade(40).a // => 10
* color.fade('25%').a // => 25
* ```
*/
var alpha = createValidPercent(clampPercent(a + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Decrease the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.fade(40).a // => 10
* color.fade('25%').a // => 25
* ```
*/
fade(percent) {
const _this$hsla5 = this.hsla,
{
a = 100
} = _this$hsla5,
}, {
key: "fade",
value: function fade(percent) {
var _this$hsla5 = this.hsla,
_this$hsla5$a = _this$hsla5.a,
a = _this$hsla5$a === void 0 ? 100 : _this$hsla5$a,
hsl = _objectWithoutProperties(_this$hsla5, ["a"]);
const num = clampPercent(a - createValidPercent(percent));
const alpha = createValidPercent(num);
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Increase the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* NOTE: the number is treated as a percentage value (not a ratio).
* - `50` is treated as `50%`
* - `0.5` is treated as `0.5%`
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.saturate(50).s // => 75
* hsl.saturate('100%').s // => 100
* ```
*/
var num = clampPercent(a - createValidPercent(percent));
var alpha = createValidPercent(num);
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Increase the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* NOTE: the number is treated as a percentage value (not a ratio).
* - `50` is treated as `50%`
* - `0.5` is treated as `0.5%`
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.saturate(50).s // => 75
* hsl.saturate('100%').s // => 100
* ```
*/
saturate(percent) {
const _this$hsla6 = this.hsla,
{
s
} = _this$hsla6,
}, {
key: "saturate",
value: function saturate(percent) {
var _this$hsla6 = this.hsla,
s = _this$hsla6.s,
hla = _objectWithoutProperties(_this$hsla6, ["s"]);
const saturation = createValidPercent(clampPercent(s + createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Decrease the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.desaturate(50).s // => 25
* hsl.desaturate('100%').s // => 0
* ```
*/
var saturation = createValidPercent(clampPercent(s + createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Decrease the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.desaturate(50).s // => 25
* hsl.desaturate('100%').s // => 0
* ```
*/
desaturate(percent) {
const _this$hsla7 = this.hsla,
{
s
} = _this$hsla7,
}, {
key: "desaturate",
value: function desaturate(percent) {
var _this$hsla7 = this.hsla,
s = _this$hsla7.s,
hla = _objectWithoutProperties(_this$hsla7, ["s"]);
const saturation = createValidPercent(clampPercent(s - createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Set the hue value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.hue(100).h //=> 100
* ```
*/
var saturation = createValidPercent(clampPercent(s - createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Set the hue value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.hue(100).h //=> 100
* ```
*/
}, {
key: "hue",
value: function hue(_hue) {
return this.clone(_objectSpread({}, this.hsla, {
h: createValidHue(_hue)
}));
}
/**
* Set the saturation value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.saturation(15).s //=> 15
* ```
*/
hue(hue) {
return this.clone(_objectSpread({}, this.hsla, {
h: createValidHue(hue)
}));
}
/**
* Set the saturation value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.saturation(15).s //=> 15
* ```
*/
}, {
key: "saturation",
value: function saturation(_saturation) {
return this.clone(_objectSpread({}, this.hsla, {
s: createValidPercent(_saturation)
}));
}
/**
* Set the lightness value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.lightness(100).h //=> 100
* ```
*/
}, {
key: "lightness",
value: function lightness(_lightness) {
return this.clone(_objectSpread({}, this.hsla, {
l: createValidPercent(_lightness)
}));
}
/**
* Set the alpha (transparency) value of the color.
*
* Value passed must be a percentage;
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%, 0.5)');
* hsl.alpha(40).a // => 40
* ```
*/
saturation(saturation) {
return this.clone(_objectSpread({}, this.hsla, {
s: createValidPercent(saturation)
}));
}
/**
* Set the lightness value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.lightness(100).h //=> 100
* ```
*/
}, {
key: "alpha",
value: function alpha(_alpha) {
return this.clone(_objectSpread({}, this.hsla, {
a: createValidAlpha(coreHelpers.isNumber(_alpha) ? "".concat(_alpha, "%") : _alpha)
}));
}
/**
* Returns a cloned version of the HSL.
*
* If an HSLObject is provided it merges these properties into the final object.
*/
}, {
key: "clone",
value: function clone() {
var hsla = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.create(null);
return new HSL(createValidHSLObject(_objectSpread({}, this.hsla, {}, hsla)));
}
/* Color Harmonies
Docs taken from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm */
lightness(lightness) {
return this.clone(_objectSpread({}, this.hsla, {
l: createValidPercent(lightness)
}));
}
/**
* Set the alpha (transparency) value of the color.
*
* Value passed must be a percentage;
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%, 0.5)');
* hsl.alpha(40).a // => 40
* ```
*/
/**
* Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
*
* The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
* Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
*
* In general, complementary colors are really bad for text.
*/
}, {
key: "complement",
value: function complement() {
return this.rotate(180);
}
/**
* Analogous color schemes use colors that are next to each other on the color wheel.
* They usually match well and create serene and comfortable designs.
*
* Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
* Make sure you have enough contrast when choosing an analogous color scheme.
*
* Choose one color to dominate, a second to support. The third color is used (along with black,
* white or gray) as an accent.
*/
alpha(alpha) {
return this.clone(_objectSpread({}, this.hsla, {
a: createValidAlpha(coreHelpers.isNumber(alpha) ? "".concat(alpha, "%") : alpha)
}));
}
/**
* Returns a cloned version of the HSL.
*
* If an HSLObject is provided it merges these properties into the final object.
*/
}, {
key: "analagous",
value: function analagous() {
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'forwards';
var _ref5 = direction === 'forwards' ? [30, 60] : [-30, -60],
_ref6 = _slicedToArray(_ref5, 2),
secondary = _ref6[0],
tertiary = _ref6[1];
clone(hsla = Object.create(null)) {
return new HSL(createValidHSLObject(_objectSpread({}, this.hsla, {}, hsla)));
}
/* Color Harmonies
Docs taken from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm */
return [this, this.rotate(secondary), this.rotate(tertiary)];
}
/**
* A triadic color scheme uses colors that are evenly spaced around the color wheel.
*
* Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated
* versions of your hues.
*
* To use a triadic harmony successfully, the colors should be carefully balanced - let one
* color dominate and use the two others for accent.
*/
/**
* Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
*
* The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
* Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
*
* In general, complementary colors are really bad for text.
*/
}, {
key: "triadic",
value: function triadic() {
return [this, this.rotate(120), this.rotate(240)];
}
/**
* The split complementary color scheme is a variation of the complementary color scheme.
* In addition to the base color, it uses the two colors adjacent to its complement.
*
* This color scheme has the same strong visual contrast as the complementary color scheme,
* but has less tension.
*
* The split-complimentary color scheme is often a good choice for beginners, because it is
* difficult to mess up.
*/
}, {
key: "splitComplement",
value: function splitComplement() {
return [this, this.rotate(150), this.rotate(210)];
}
/**
* The rectangle or tetradic color scheme uses four colors arranged into two
* complementary pairs.
*
* This rich color scheme offers plenty of possibilities for variation.
* The tetradic color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors
* in your design.
*
* @param spacing - a value between 0 and 180 that separates the edges in degrees around a color wheel.
*/
complement() {
return this.rotate(180);
}
/**
* Analogous color schemes use colors that are next to each other on the color wheel.
* They usually match well and create serene and comfortable designs.
*
* Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
* Make sure you have enough contrast when choosing an analogous color scheme.
*
* Choose one color to dominate, a second to support. The third color is used (along with black,
* white or gray) as an accent.
*/
}, {
key: "rectangle",
value: function rectangle() {
var spacing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 60;
spacing = coreHelpers.clamp({
min: 0,
max: 180,
value: spacing
});
return [this, this.rotate(spacing), this.rotate(180), this.rotate(180 + spacing)];
}
/**
* The square color scheme is similar to the rectangle, but with all four colors spaced
* evenly around the color circle.
*
* The square color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors in your design.
*/
}, {
key: "square",
value: function square() {
return this.rectangle(90);
}
}, {
key: "h",
get: function get() {
return this.hsla.h;
}
/**
* Saturation
*
* A value between 0 and 100 representing the percentage saturation.
*/
analagous(direction = 'forwards') {
const [secondary, tertiary] = direction === 'forwards' ? [30, 60] : [-30, -60];
return [this, this.rotate(secondary), this.rotate(tertiary)];
}
/**
* A triadic color scheme uses colors that are evenly spaced around the color wheel.
*
* Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated
* versions of your hues.
*
* To use a triadic harmony successfully, the colors should be carefully balanced - let one
* color dominate and use the two others for accent.
*/
}, {
key: "s",
get: function get() {
return this.hsla.s;
}
/**
* Lightness
*
* A value between 0 and 100 representing the percentage lightness.
*/
}, {
key: "l",
get: function get() {
return this.hsla.l;
}
/**
* Alpha
*
* The alpha value which is a number between 0 and 1.
*/
triadic() {
return [this, this.rotate(120), this.rotate(240)];
}
/**
* The split complementary color scheme is a variation of the complementary color scheme.
* In addition to the base color, it uses the two colors adjacent to its complement.
*
* This color scheme has the same strong visual contrast as the complementary color scheme,
* but has less tension.
*
* The split-complimentary color scheme is often a good choice for beginners, because it is
* difficult to mess up.
*/
}, {
key: "a",
get: function get() {
return this.hsla.a;
}
/**
* Brightness
*
* Returns a number between 0 and 255 the current color (not taking into account the alpha level).
* The higher the number the brighter the color.
*
* https://24ways.org/2010/calculating-color-contrast
*/
}, {
key: "brightness",
get: function get() {
var _this$toRGB = this.toRGB(),
_this$toRGB2 = _slicedToArray(_this$toRGB, 3),
r = _this$toRGB2[0],
g = _this$toRGB2[1],
b = _this$toRGB2[2];
splitComplement() {
return [this, this.rotate(150), this.rotate(210)];
}
/**
* The rectangle or tetradic color scheme uses four colors arranged into two
* complementary pairs.
*
* This rich color scheme offers plenty of possibilities for variation.
* The tetradic color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors
* in your design.
*
* @param spacing - a value between 0 and 180 that separates the edges in degrees around a color wheel.
*/
return (r * 299 + g * 587 + b * 114) / 1000;
}
}, {
key: "isDark",
get: function get() {
return this.brightness < 128;
}
}, {
key: "isLight",
get: function get() {
return !this.isDark;
}
}]);
return HSL;
}();
rectangle(spacing = 60) {
spacing = coreHelpers.clamp({
min: 0,
max: 180,
value: spacing
});
return [this, this.rotate(spacing), this.rotate(180), this.rotate(180 + spacing)];
}
/**
* The square color scheme is similar to the rectangle, but with all four colors spaced
* evenly around the color circle.
*
* The square color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors in your design.
*/
_defineProperty(HSL, "$$id", HSL_SYMBOL);
var _remirrorEditor;
square() {
return this.rectangle(90);
}
}
_defineProperty(HSL, "$$id", HSL_SYMBOL);
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
const baseHue = 205;
const baseSaturation = 70;
const baseLightness = 50;
const primary = HSL.create([baseHue, baseSaturation, baseLightness]);
const hsl = {
primary,
var baseHue = 205;
var baseSaturation = 70;
var baseLightness = 50;
var primary = HSL.create([baseHue, baseSaturation, baseLightness]);
var hsl = {
primary: primary,
secondary: primary.complement(),

@@ -712,12 +792,28 @@ background: HSL.create([0, 0, 100]),

const str = (color, ...methods) => methods.reduce((col, method) => method(col), color).toString();
var str = function str(color) {
for (var _len = arguments.length, methods = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
methods[_key - 1] = arguments[_key];
}
const active = color => color.darken(10);
return methods.reduce(function (col, method) {
return method(col);
}, color).toString();
};
const hover = color => color.darken(5).saturate(9); // const fade = (amount: number) => (color: HSL) => color.fade(amount);
var active = function active(color) {
return color.darken(10);
};
var hover = function hover(color) {
return color.darken(5).saturate(9);
}; // const fade = (amount: number) => (color: HSL) => color.fade(amount);
const alpha = amount => color => color.alpha(amount);
const colors = {
var alpha = function alpha(amount) {
return function (color) {
return color.alpha(amount);
};
};
var colors = {
text: str(hsl.text),

@@ -737,3 +833,3 @@ background: str(hsl.background),

'grey:fade': str(hsl.grey, alpha(20)),
default: str(hsl.grey),
"default": str(hsl.grey),
'default:button:hover': str(hsl.grey, hover),

@@ -749,3 +845,3 @@ 'default:button:active': str(hsl.grey, active),

};
const zIndices = {
var zIndices = {
auto: 'auto',

@@ -759,3 +855,3 @@ '0': 0,

};
const letterSpacings = {
var letterSpacings = {
tighter: '-0.05em',

@@ -768,3 +864,3 @@ tight: '-0.025em',

};
const baseLineHeights = {
var baseLineHeights = {
none: '1',

@@ -777,3 +873,3 @@ tight: '1.25',

};
const heading = {
var heading = {
fontFamily: 'heading',

@@ -790,5 +886,5 @@ fontWeight: 'heading',

const baseTheme = {
var baseTheme = {
initialColorMode: 'light',
colors,
colors: colors,
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],

@@ -801,4 +897,4 @@ sizes: [0, 4, 8, 16, 32, 64, 128, 256, 512],

},
zIndices,
letterSpacings,
zIndices: zIndices,
letterSpacings: letterSpacings,
radii: [0, 4, 8, 16, 32, 64, 128],

@@ -822,3 +918,3 @@ fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],

'remirror:buttons': {
default: {
"default": {
backgroundColor: 'light',

@@ -880,3 +976,3 @@ minHeight: 3,

'remirror:icons': {
default: {
"default": {
color: 'text',

@@ -926,20 +1022,15 @@ transition: 'all 0.2s',

styles: {
'remirror:editor': {
[coreConstants.EDITOR_CLASS_SELECTOR]: {
caretColor: 'currentColor',
wordWrap: 'break-word',
overflowWrap: 'break-word',
fontSize: 2
},
["".concat(coreConstants.EDITOR_CLASS_SELECTOR, ":focus")]: {
outline: 'none' // boxShadow: 'focus',
'remirror:editor': (_remirrorEditor = {}, _defineProperty(_remirrorEditor, coreConstants.EDITOR_CLASS_SELECTOR, {
caretColor: 'currentColor',
wordWrap: 'break-word',
overflowWrap: 'break-word',
fontSize: 2
}), _defineProperty(_remirrorEditor, "".concat(coreConstants.EDITOR_CLASS_SELECTOR, ":focus"), {
outline: 'none' // boxShadow: 'focus',
},
["".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"false\"]")]: {
whiteSpace: 'normal'
},
["".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"true\"]")]: {
whiteSpace: 'pre-wrap'
}
}
}), _defineProperty(_remirrorEditor, "".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"false\"]"), {
whiteSpace: 'normal'
}), _defineProperty(_remirrorEditor, "".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"true\"]"), {
whiteSpace: 'pre-wrap'
}), _remirrorEditor)
}

@@ -957,3 +1048,3 @@ };

const applyColorMode = (theme, mode) => {
var applyColorMode = function applyColorMode(theme, mode) {
if (!mode) {

@@ -963,3 +1054,3 @@ return theme;

const modes = coreHelpers.get('colors.modes', theme, {});
var modes = coreHelpers.get('colors.modes', theme, {});
return coreHelpers.deepMerge(theme, {

@@ -973,3 +1064,5 @@ colors: coreHelpers.get(mode, modes, {})

const getColorModes = theme => Object.keys(coreHelpers.get('colors.modes', theme, {}));
var getColorModes = function getColorModes(theme) {
return Object.keys(coreHelpers.get('colors.modes', theme, {}));
};
/**

@@ -979,3 +1072,7 @@ * Creates a path getter for the provided theme.

const getFactory = theme => (path, fallback) => coreHelpers.get(path, theme, fallback);
var getFactory = function getFactory(theme) {
return function (path, fallback) {
return coreHelpers.get(path, theme, fallback);
};
};
/**

@@ -985,3 +1082,5 @@ * Checks whether an object passed is a serialized style

const isSerializedStyle = val => coreHelpers.isPlainObject(val) && coreHelpers.isString(val.name) && coreHelpers.isString(val.styles);
var isSerializedStyle = function isSerializedStyle(val) {
return coreHelpers.isPlainObject(val) && coreHelpers.isString(val.name) && coreHelpers.isString(val.styles);
};
/**

@@ -991,5 +1090,9 @@ * Return true when a theme prop exists on the value passed in.

const hasThemeProp = val => coreHelpers.isPlainObject(val) && coreHelpers.isPlainObject(val.theme);
var hasThemeProp = function hasThemeProp(val) {
return coreHelpers.isPlainObject(val) && coreHelpers.isPlainObject(val.theme);
};
const getTheme = props => hasThemeProp(props) ? props.theme : props;
var getTheme = function getTheme(props) {
return hasThemeProp(props) ? props.theme : props;
};
/**

@@ -1012,7 +1115,17 @@ * A wrapper around the `@styled-system/css` for composing multiple themed

const sx = (...styles) => props => {
const theme = getTheme(props);
return core.css(styles.map(style => coreHelpers.isArray(style) ? sx(...style)(theme) : coreHelpers.isFunction(style) ? css.css(style(theme))(theme) : isSerializedStyle(style) ? style : coreHelpers.isPlainObject(style) ? css.css(style)(theme) : style));
var sx = function sx() {
for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
styles[_key] = arguments[_key];
}
return function (props) {
var theme = getTheme(props);
return core.css(styles.map(function (style) {
return coreHelpers.isArray(style) ? sx.apply(void 0, _toConsumableArray(style))(theme) : coreHelpers.isFunction(style) ? css.css(style(theme))(theme) : isSerializedStyle(style) ? style : coreHelpers.isPlainObject(style) ? css.css(style)(theme) : style;
}));
};
};
const cssValueUnits = val => coreHelpers.isString(val) ? val.replace(/[0-9 ]+/g, '') : undefined;
var cssValueUnits = function cssValueUnits(val) {
return coreHelpers.isString(val) ? val.replace(/[0-9 ]+/g, '') : undefined;
};
/**

@@ -1022,3 +1135,5 @@ * Transforms a number to

const numberToPixels = val => cssValueUnits(val) ? "".concat(val).replace(/ /g, '') : "".concat(val, "px");
var numberToPixels = function numberToPixels(val) {
return cssValueUnits(val) ? "".concat(val).replace(/ /g, '') : "".concat(val, "px");
};

@@ -1033,3 +1148,5 @@ /**

const cssNoOp = () => undefined;
var cssNoOp = function cssNoOp() {
return undefined;
};
/**

@@ -1040,7 +1157,7 @@ * Provides access to the theme context

const EmotionThemeContext = core.ThemeContext;
const defaultRemirrorThemeValue = {
var EmotionThemeContext = core.ThemeContext;
var defaultRemirrorThemeValue = {
theme: baseTheme,
css: core.css,
sx,
sx: sx,
sxx: cssNoOp,

@@ -1050,5 +1167,5 @@ get: getFactory(baseTheme),

colorModes: getColorModes(baseTheme),
setColorMode: () => {}
setColorMode: function setColorMode() {}
};
const withoutEmotionProps = {
var withoutEmotionProps = {
css: cssNoOp,

@@ -1061,3 +1178,3 @@ sx: cssNoOp

const RemirrorThemeContext = react.createContext(defaultRemirrorThemeValue);
var RemirrorThemeContext = react.createContext(defaultRemirrorThemeValue);

@@ -1068,3 +1185,5 @@ /**

const useRemirrorTheme = () => react.useContext(RemirrorThemeContext);
var useRemirrorTheme = function useRemirrorTheme() {
return react.useContext(RemirrorThemeContext);
};
/**

@@ -1076,3 +1195,5 @@ * A hook which returns the current remirror theme from the emotion context.

const useEmotionTheme = () => react.useContext(EmotionThemeContext);
var useEmotionTheme = function useEmotionTheme() {
return react.useContext(EmotionThemeContext);
};

@@ -1086,3 +1207,5 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

*/
const hasParent = theme => coreHelpers.bool(theme.parent);
var hasParent = function hasParent(theme) {
return coreHelpers.bool(theme.parent);
};
/**

@@ -1096,3 +1219,5 @@ * When true this is the outermost remirror theme in the component tree.

const isRoot = theme => !hasParent(theme);
var isRoot = function isRoot(theme) {
return !hasParent(theme);
};
/**

@@ -1108,30 +1233,44 @@ * A component that either extends the existing emotion theme with the provided theme

const RemirrorThemeProvider = ({
theme: themeProp,
children,
withoutEmotion = false,
disableMerge = [],
initialColorMode
}) => {
const disableMergeWithParent = disableMerge.includes('parent');
const disableMergeWithBase = disableMerge.includes('base');
const disableMergeWithEmotion = disableMerge.includes('emotion');
const outer = useRemirrorTheme();
const emotionTheme = useEmotionTheme();
const [colorMode, setColorMode] = react.useState(initialColorMode !== null && initialColorMode !== void 0 ? initialColorMode : outer.colorMode);
const parentEmotionTheme = isRoot(outer) && !disableMergeWithEmotion ? emotionTheme : {};
const parent = disableMergeWithParent ? hasParent(outer) ? outer.parent : Object.create(null) : isRoot(outer) && disableMergeWithBase ? Object.create(null) : outer.theme;
const themeWithoutColorMode = coreHelpers.deepMerge(parentEmotionTheme, parent, coreHelpers.isFunction(themeProp) ? themeProp(parent) : themeProp);
const theme = applyColorMode(themeWithoutColorMode, colorMode);
const [get, colorModes] = react.useMemo(() => [getFactory(theme), getColorModes(theme)], [theme]);
var RemirrorThemeProvider = function RemirrorThemeProvider(_ref) {
var themeProp = _ref.theme,
children = _ref.children,
_ref$withoutEmotion = _ref.withoutEmotion,
withoutEmotion = _ref$withoutEmotion === void 0 ? false : _ref$withoutEmotion,
_ref$disableMerge = _ref.disableMerge,
disableMerge = _ref$disableMerge === void 0 ? [] : _ref$disableMerge,
initialColorMode = _ref.initialColorMode;
var disableMergeWithParent = disableMerge.includes('parent');
var disableMergeWithBase = disableMerge.includes('base');
var disableMergeWithEmotion = disableMerge.includes('emotion');
var outer = useRemirrorTheme();
var emotionTheme = useEmotionTheme();
const value = _objectSpread$2({}, defaultRemirrorThemeValue, {}, withoutEmotion ? withoutEmotionProps : {
sxx: (...args) => defaultRemirrorThemeValue.sx(...args)(theme)
var _useState = react.useState(initialColorMode !== null && initialColorMode !== void 0 ? initialColorMode : outer.colorMode),
_useState2 = _slicedToArray(_useState, 2),
colorMode = _useState2[0],
setColorMode = _useState2[1];
var parentEmotionTheme = isRoot(outer) && !disableMergeWithEmotion ? emotionTheme : {};
var parent = disableMergeWithParent ? hasParent(outer) ? outer.parent : Object.create(null) : isRoot(outer) && disableMergeWithBase ? Object.create(null) : outer.theme;
var themeWithoutColorMode = coreHelpers.deepMerge(parentEmotionTheme, parent, coreHelpers.isFunction(themeProp) ? themeProp(parent) : themeProp);
var theme = applyColorMode(themeWithoutColorMode, colorMode);
var _useMemo = react.useMemo(function () {
return [getFactory(theme), getColorModes(theme)];
}, [theme]),
_useMemo2 = _slicedToArray(_useMemo, 2),
get = _useMemo2[0],
colorModes = _useMemo2[1];
var value = _objectSpread$2({}, defaultRemirrorThemeValue, {}, withoutEmotion ? withoutEmotionProps : {
sxx: function sxx() {
return defaultRemirrorThemeValue.sx.apply(defaultRemirrorThemeValue, arguments)(theme);
}
}, {
parent,
theme,
get,
colorMode,
colorModes,
setColorMode
parent: parent,
theme: theme,
get: get,
colorMode: colorMode,
colorModes: colorModes,
setColorMode: setColorMode
});

@@ -1152,10 +1291,11 @@

*/
const RemirrorThemeRoot = ({
children,
makeGlobal = false
}) => {
const {
sxx
} = useRemirrorTheme();
const styles = sxx({
var RemirrorThemeRoot = function RemirrorThemeRoot(_ref) {
var children = _ref.children,
_ref$makeGlobal = _ref.makeGlobal,
makeGlobal = _ref$makeGlobal === void 0 ? false : _ref$makeGlobal;
var _useRemirrorTheme = useRemirrorTheme(),
sxx = _useRemirrorTheme.sxx;
var styles = sxx({
fontFamily: 'body'

@@ -1162,0 +1302,0 @@ });

1322

lib/dist/ui.esm.js
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { EDITOR_CLASS_SELECTOR } from '@remirror/core-constants';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import _toArray from '@babel/runtime/helpers/toArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { isObject, clamp, isNumber, bool, isPlainObject, isArray, isString, isUndefined, get, deepMerge, isFunction } from '@remirror/core-helpers';
import { css, ThemeContext, jsx, Global } from '@emotion/core';
import { createContext, useContext, useState, useMemo } from 'react';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import { css as css$1 } from '@styled-system/css';

@@ -14,26 +19,37 @@ import { ThemeProvider } from 'emotion-theming';

// Taken from https://github.com/regexhq/hsla-regex/blob/master/test/test.js#L7
const HSLA_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/; // Taken from https://github.com/regexhq/hsl-regex/blob/3ea5cede63c1e4a30878e7329a197c502337b7b3/index.js#L7
var HSLA_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/; // Taken from https://github.com/regexhq/hsl-regex/blob/3ea5cede63c1e4a30878e7329a197c502337b7b3/index.js#L7
const HSL_REGEX = /^hsl\(\s*([\d.]+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/;
const HSL_SYMBOL = Symbol.for('hslColor');
const isHSL = value => isObject(value) && value.constructor && value.constructor.$$id === HSL_SYMBOL;
var HSL_REGEX = /^hsl\(\s*([\d.]+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/;
var HSL_SYMBOL = Symbol["for"]('hslColor');
var isHSL = function isHSL(value) {
return isObject(value) && value.constructor && value.constructor.$$id === HSL_SYMBOL;
};
const isNamedHSLObject = value => bool(isPlainObject(value) && value.hue && value.saturation && value.lightness);
var isNamedHSLObject = function isNamedHSLObject(value) {
return bool(isPlainObject(value) && value.hue && value.saturation && value.lightness);
};
const isHSLObject = value => bool(isPlainObject(value) && value.h && value.s && value.l);
var isHSLObject = function isHSLObject(value) {
return bool(isPlainObject(value) && value.h && value.s && value.l);
};
const hslArrayToObject = value => {
const [h, s, l, a] = value;
var hslArrayToObject = function hslArrayToObject(value) {
var _value = _slicedToArray(value, 4),
h = _value[0],
s = _value[1],
l = _value[2],
a = _value[3];
return {
h,
s,
l,
a
h: h,
s: s,
l: l,
a: a
};
};
const hslStringToObject = value => {
var hslStringToObject = function hslStringToObject(value) {
var _HSLA_REGEX$exec;
const regexValue = (_HSLA_REGEX$exec = HSLA_REGEX.exec(value)) !== null && _HSLA_REGEX$exec !== void 0 ? _HSLA_REGEX$exec : HSL_REGEX.exec(value);
var regexValue = (_HSLA_REGEX$exec = HSLA_REGEX.exec(value)) !== null && _HSLA_REGEX$exec !== void 0 ? _HSLA_REGEX$exec : HSL_REGEX.exec(value);

@@ -44,7 +60,9 @@ if (!regexValue) {

const [, ...array] = regexValue;
var _regexValue = _toArray(regexValue),
array = _regexValue.slice(1);
return hslArrayToObject(array);
};
const convertHSLToObject = value => {
var convertHSLToObject = function convertHSLToObject(value) {
if (isHSLObject(value)) {

@@ -55,13 +73,11 @@ return value;

if (isNamedHSLObject(value)) {
const {
hue: h,
saturation: s,
lightness: l,
alpha: a
} = value;
var h = value.hue,
s = value.saturation,
l = value.lightness,
a = value.alpha;
return {
h,
s,
l,
a
h: h,
s: s,
l: l,
a: a
};

@@ -81,6 +97,8 @@ }

const isValidHue = hue => isNumber(hue) && hue <= 360 && hue >= 0;
var isValidHue = function isValidHue(hue) {
return isNumber(hue) && hue <= 360 && hue >= 0;
};
const createValidHue = value => {
const hue = isString(value) ? Number(value) % 360 : value % 360;
var createValidHue = function createValidHue(value) {
var hue = isString(value) ? Number(value) % 360 : value % 360;

@@ -94,6 +112,8 @@ if (!isValidHue(hue)) {

const isValidPercent = percent => isNumber(percent) && percent <= 100 && percent >= 0;
var isValidPercent = function isValidPercent(percent) {
return isNumber(percent) && percent <= 100 && percent >= 0;
};
const createValidPercent = value => {
const percent = isString(value) ? Number(value.replace(/[%\s]+/g, '')) : value;
var createValidPercent = function createValidPercent(value) {
var percent = isString(value) ? Number(value.replace(/[%\s]+/g, '')) : value;

@@ -107,10 +127,12 @@ if (!isValidPercent(percent)) {

const clampPercent = value => clamp({
min: 0,
max: 100,
value
});
var clampPercent = function clampPercent(value) {
return clamp({
min: 0,
max: 100,
value: value
});
};
const createValidAlpha = value => {
const alpha = isString(value) ? value.includes('%') ? Number(value.replace(/[%\s]+/g, '')) : Number(value) * 100 : value;
var createValidAlpha = function createValidAlpha(value) {
var alpha = isString(value) ? value.includes('%') ? Number(value.replace(/[%\s]+/g, '')) : Number(value) * 100 : value;

@@ -128,15 +150,18 @@ if (isUndefined(alpha)) {

const createValidHSLObject = ({
h: hue,
s: saturation,
l: lightness,
a: alpha
}) => ({
h: createValidHue(hue),
s: createValidPercent(saturation),
l: createValidPercent(lightness),
a: createValidAlpha(alpha)
});
var createValidHSLObject = function createValidHSLObject(_ref) {
var hue = _ref.h,
saturation = _ref.s,
lightness = _ref.l,
alpha = _ref.a;
return {
h: createValidHue(hue),
s: createValidPercent(saturation),
l: createValidPercent(lightness),
a: createValidAlpha(alpha)
};
};
const freeze = hslObject => Object.freeze(hslObject);
var freeze = function freeze(hslObject) {
return Object.freeze(hslObject);
};
/**

@@ -147,3 +172,3 @@ * Taken from https://github.com/usemeta/hsl-rgb/blob/1afed9a9703816e375839b4fbb6458f2765a76a8/index.js#L1

const calculateHue = (pp, qq, hh) => {
var calculateHue = function calculateHue(pp, qq, hh) {
hh = hh < 0 ? hh + 1 : hh > 1 ? hh - 1 : hh;

@@ -157,13 +182,20 @@ return hh < 1 / 6 ? pp + (qq - pp) * 6 * hh : hh < 1 / 2 ? qq : hh < 2 / 3 ? pp + (qq - pp) * (2 / 3 - hh) * 6 : pp;

const hslToRgb = ([hue, saturation, lightness]) => {
let [rr, gg, bb] = [0, 0, 0];
const hh = hue / 360;
const ss = saturation / 100;
const ll = lightness / 100;
var hslToRgb = function hslToRgb(_ref2) {
var _ref3 = _slicedToArray(_ref2, 3),
hue = _ref3[0],
saturation = _ref3[1],
lightness = _ref3[2];
var rr = 0,
gg = 0,
bb = 0;
var hh = hue / 360;
var ss = saturation / 100;
var ll = lightness / 100;
if (ss === 0) {
rr = gg = bb = ll;
} else {
const qq = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
const pp = 2 * ll - qq;
var qq = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
var pp = 2 * ll - qq;
rr = calculateHue(pp, qq, hh + 1 / 3);

@@ -181,3 +213,6 @@ gg = calculateHue(pp, qq, hh);

const percentageToRatio = (percent, precision = 10) => Number((percent / 100).toFixed(precision));
var percentageToRatio = function percentageToRatio(percent) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
return Number((percent / 100).toFixed(precision));
};
/**

@@ -188,23 +223,31 @@ * HSLColor is a small utility for transforming colors, but only hsl colors.

class HSL {
/**
* Create a hsl class from the passed in string / array / object parameters.
*
* Throws a descriptive error if invalid parameters are passed in.
*/
static create(value) {
if (isHSL(value)) {
return value.clone();
var HSL =
/*#__PURE__*/
function () {
_createClass(HSL, null, [{
key: "create",
/**
* Create a hsl class from the passed in string / array / object parameters.
*
* Throws a descriptive error if invalid parameters are passed in.
*/
value: function create(value) {
if (isHSL(value)) {
return value.clone();
}
var hsl = createValidHSLObject(convertHSLToObject(value));
return new HSL(hsl);
}
/**
* Store the hue as an object of number values. Percentages are stored as decimals
* between 0 and 1.
*/
const hsl = createValidHSLObject(convertHSLToObject(value));
return new HSL(hsl);
}
/**
* Store the hue as an object of number values. Percentages are stored as decimals
* between 0 and 1.
*/
}]);
function HSL(hsla) {
_classCallCheck(this, HSL);
constructor(hsla) {
this.hsla = freeze(hsla);

@@ -219,478 +262,515 @@ }

get h() {
return this.hsla.h;
}
/**
* Saturation
*
* A value between 0 and 100 representing the percentage saturation.
*/
_createClass(HSL, [{
key: "toJSON",
/**
* Returns the object representation of the hsl class.
*/
value: function toJSON() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
return {
h: h,
s: s,
l: l,
a: a
};
}
/**
* Return the array representation of the hsl
*/
get s() {
return this.hsla.s;
}
/**
* Lightness
*
* A value between 0 and 100 representing the percentage lightness.
*/
}, {
key: "toArray",
value: function toArray() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
return [h, s, l, a];
}
/**
* Produces a valid HSL string that can be used to represent a color in your css.
*/
}, {
key: "toString",
value: function toString() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
var _ref4 = [h.toString(), "".concat(s, "%"), "".concat(l, "%"), "".concat(percentageToRatio(a))],
hue = _ref4[0],
saturation = _ref4[1],
lightness = _ref4[2],
alpha = _ref4[3];
return alpha === '1' ? "hsl(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ")") : "hsla(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ", ").concat(alpha, ")");
}
/**
* Returns the array
*/
get l() {
return this.hsla.l;
}
/**
* Alpha
*
* The alpha value which is a number between 0 and 1.
*/
}, {
key: "toRGB",
value: function toRGB() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
var _hslToRgb = hslToRgb([h, s, l]),
_hslToRgb2 = _slicedToArray(_hslToRgb, 3),
r = _hslToRgb2[0],
g = _hslToRgb2[1],
b = _hslToRgb2[2];
get a() {
return this.hsla.a;
}
/**
* Brightness
*
* Returns a number between 0 and 255 the current color (not taking into account the alpha level).
* The higher the number the brighter the color.
*
* https://24ways.org/2010/calculating-color-contrast
*/
return [r, g, b, a];
}
/**
* Rotate the color around the color wheel. The value is always clamped between 0 and 360deg.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.rotate(100).h // => 280
* ```
*/
get brightness() {
const [r, g, b] = this.toRGB();
return (r * 299 + g * 587 + b * 114) / 1000;
}
get isDark() {
return this.brightness < 128;
}
get isLight() {
return !this.isDark;
}
/**
* Returns the object representation of the hsl class.
*/
toJSON() {
const {
h,
s,
l,
a
} = this;
return {
h,
s,
l,
a
};
}
/**
* Return the array representation of the hsl
*/
toArray() {
const {
h,
s,
l,
a
} = this;
return [h, s, l, a];
}
/**
* Produces a valid HSL string that can be used to represent a color in your css.
*/
toString() {
const {
h,
s,
l,
a
} = this;
const [hue, saturation, lightness, alpha] = [h.toString(), "".concat(s, "%"), "".concat(l, "%"), "".concat(percentageToRatio(a))];
return alpha === '1' ? "hsl(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ")") : "hsla(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ", ").concat(alpha, ")");
}
/**
* Returns the array
*/
toRGB() {
const {
h,
s,
l,
a
} = this;
const [r, g, b] = hslToRgb([h, s, l]);
return [r, g, b, a];
}
/**
* Rotate the color around the color wheel. The value is always clamped between 0 and 360deg.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.rotate(100).h // => 280
* ```
*/
rotate(degrees) {
const _this$hsla = this.hsla,
{
h
} = _this$hsla,
}, {
key: "rotate",
value: function rotate(degrees) {
var _this$hsla = this.hsla,
h = _this$hsla.h,
sla = _objectWithoutProperties(_this$hsla, ["h"]);
return this.clone(_objectSpread({}, sla, {
h: createValidHue(h + degrees)
}));
}
/**
* Lighten the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.lighten(50).l // => 75
* color.lighten('25%').l // => 62.5
* ```
*/
return this.clone(_objectSpread({}, sla, {
h: createValidHue(h + degrees)
}));
}
/**
* Lighten the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.lighten(50).l // => 75
* color.lighten('25%').l // => 62.5
* ```
*/
lighten(percent) {
const _this$hsla2 = this.hsla,
{
l
} = _this$hsla2,
}, {
key: "lighten",
value: function lighten(percent) {
var _this$hsla2 = this.hsla,
l = _this$hsla2.l,
hsa = _objectWithoutProperties(_this$hsla2, ["l"]);
const lightness = createValidPercent(clampPercent(l + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Darken the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.darken(50).l // => 25
* color.darken('25%').l // => 37.5
* ```
*/
var lightness = createValidPercent(clampPercent(l + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Darken the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.darken(50).l // => 25
* color.darken('25%').l // => 37.5
* ```
*/
darken(percent) {
const _this$hsla3 = this.hsla,
{
l
} = _this$hsla3,
}, {
key: "darken",
value: function darken(percent) {
var _this$hsla3 = this.hsla,
l = _this$hsla3.l,
hsa = _objectWithoutProperties(_this$hsla3, ["l"]);
const lightness = createValidPercent(clampPercent(l - createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Increase the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.unfade(40).a // => 90
* color.unfade('25%').a // => 75
* ```
*/
var lightness = createValidPercent(clampPercent(l - createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Increase the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.unfade(40).a // => 90
* color.unfade('25%').a // => 75
* ```
*/
unfade(percent) {
const _this$hsla4 = this.hsla,
{
a = 100
} = _this$hsla4,
}, {
key: "unfade",
value: function unfade(percent) {
var _this$hsla4 = this.hsla,
_this$hsla4$a = _this$hsla4.a,
a = _this$hsla4$a === void 0 ? 100 : _this$hsla4$a,
hsl = _objectWithoutProperties(_this$hsla4, ["a"]);
const alpha = createValidPercent(clampPercent(a + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Decrease the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.fade(40).a // => 10
* color.fade('25%').a // => 25
* ```
*/
var alpha = createValidPercent(clampPercent(a + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Decrease the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.fade(40).a // => 10
* color.fade('25%').a // => 25
* ```
*/
fade(percent) {
const _this$hsla5 = this.hsla,
{
a = 100
} = _this$hsla5,
}, {
key: "fade",
value: function fade(percent) {
var _this$hsla5 = this.hsla,
_this$hsla5$a = _this$hsla5.a,
a = _this$hsla5$a === void 0 ? 100 : _this$hsla5$a,
hsl = _objectWithoutProperties(_this$hsla5, ["a"]);
const num = clampPercent(a - createValidPercent(percent));
const alpha = createValidPercent(num);
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Increase the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* NOTE: the number is treated as a percentage value (not a ratio).
* - `50` is treated as `50%`
* - `0.5` is treated as `0.5%`
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.saturate(50).s // => 75
* hsl.saturate('100%').s // => 100
* ```
*/
var num = clampPercent(a - createValidPercent(percent));
var alpha = createValidPercent(num);
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Increase the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* NOTE: the number is treated as a percentage value (not a ratio).
* - `50` is treated as `50%`
* - `0.5` is treated as `0.5%`
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.saturate(50).s // => 75
* hsl.saturate('100%').s // => 100
* ```
*/
saturate(percent) {
const _this$hsla6 = this.hsla,
{
s
} = _this$hsla6,
}, {
key: "saturate",
value: function saturate(percent) {
var _this$hsla6 = this.hsla,
s = _this$hsla6.s,
hla = _objectWithoutProperties(_this$hsla6, ["s"]);
const saturation = createValidPercent(clampPercent(s + createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Decrease the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.desaturate(50).s // => 25
* hsl.desaturate('100%').s // => 0
* ```
*/
var saturation = createValidPercent(clampPercent(s + createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Decrease the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.desaturate(50).s // => 25
* hsl.desaturate('100%').s // => 0
* ```
*/
desaturate(percent) {
const _this$hsla7 = this.hsla,
{
s
} = _this$hsla7,
}, {
key: "desaturate",
value: function desaturate(percent) {
var _this$hsla7 = this.hsla,
s = _this$hsla7.s,
hla = _objectWithoutProperties(_this$hsla7, ["s"]);
const saturation = createValidPercent(clampPercent(s - createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Set the hue value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.hue(100).h //=> 100
* ```
*/
var saturation = createValidPercent(clampPercent(s - createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Set the hue value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.hue(100).h //=> 100
* ```
*/
}, {
key: "hue",
value: function hue(_hue) {
return this.clone(_objectSpread({}, this.hsla, {
h: createValidHue(_hue)
}));
}
/**
* Set the saturation value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.saturation(15).s //=> 15
* ```
*/
hue(hue) {
return this.clone(_objectSpread({}, this.hsla, {
h: createValidHue(hue)
}));
}
/**
* Set the saturation value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.saturation(15).s //=> 15
* ```
*/
}, {
key: "saturation",
value: function saturation(_saturation) {
return this.clone(_objectSpread({}, this.hsla, {
s: createValidPercent(_saturation)
}));
}
/**
* Set the lightness value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.lightness(100).h //=> 100
* ```
*/
}, {
key: "lightness",
value: function lightness(_lightness) {
return this.clone(_objectSpread({}, this.hsla, {
l: createValidPercent(_lightness)
}));
}
/**
* Set the alpha (transparency) value of the color.
*
* Value passed must be a percentage;
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%, 0.5)');
* hsl.alpha(40).a // => 40
* ```
*/
saturation(saturation) {
return this.clone(_objectSpread({}, this.hsla, {
s: createValidPercent(saturation)
}));
}
/**
* Set the lightness value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.lightness(100).h //=> 100
* ```
*/
}, {
key: "alpha",
value: function alpha(_alpha) {
return this.clone(_objectSpread({}, this.hsla, {
a: createValidAlpha(isNumber(_alpha) ? "".concat(_alpha, "%") : _alpha)
}));
}
/**
* Returns a cloned version of the HSL.
*
* If an HSLObject is provided it merges these properties into the final object.
*/
}, {
key: "clone",
value: function clone() {
var hsla = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.create(null);
return new HSL(createValidHSLObject(_objectSpread({}, this.hsla, {}, hsla)));
}
/* Color Harmonies
Docs taken from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm */
lightness(lightness) {
return this.clone(_objectSpread({}, this.hsla, {
l: createValidPercent(lightness)
}));
}
/**
* Set the alpha (transparency) value of the color.
*
* Value passed must be a percentage;
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%, 0.5)');
* hsl.alpha(40).a // => 40
* ```
*/
/**
* Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
*
* The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
* Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
*
* In general, complementary colors are really bad for text.
*/
}, {
key: "complement",
value: function complement() {
return this.rotate(180);
}
/**
* Analogous color schemes use colors that are next to each other on the color wheel.
* They usually match well and create serene and comfortable designs.
*
* Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
* Make sure you have enough contrast when choosing an analogous color scheme.
*
* Choose one color to dominate, a second to support. The third color is used (along with black,
* white or gray) as an accent.
*/
alpha(alpha) {
return this.clone(_objectSpread({}, this.hsla, {
a: createValidAlpha(isNumber(alpha) ? "".concat(alpha, "%") : alpha)
}));
}
/**
* Returns a cloned version of the HSL.
*
* If an HSLObject is provided it merges these properties into the final object.
*/
}, {
key: "analagous",
value: function analagous() {
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'forwards';
var _ref5 = direction === 'forwards' ? [30, 60] : [-30, -60],
_ref6 = _slicedToArray(_ref5, 2),
secondary = _ref6[0],
tertiary = _ref6[1];
clone(hsla = Object.create(null)) {
return new HSL(createValidHSLObject(_objectSpread({}, this.hsla, {}, hsla)));
}
/* Color Harmonies
Docs taken from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm */
return [this, this.rotate(secondary), this.rotate(tertiary)];
}
/**
* A triadic color scheme uses colors that are evenly spaced around the color wheel.
*
* Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated
* versions of your hues.
*
* To use a triadic harmony successfully, the colors should be carefully balanced - let one
* color dominate and use the two others for accent.
*/
/**
* Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
*
* The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
* Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
*
* In general, complementary colors are really bad for text.
*/
}, {
key: "triadic",
value: function triadic() {
return [this, this.rotate(120), this.rotate(240)];
}
/**
* The split complementary color scheme is a variation of the complementary color scheme.
* In addition to the base color, it uses the two colors adjacent to its complement.
*
* This color scheme has the same strong visual contrast as the complementary color scheme,
* but has less tension.
*
* The split-complimentary color scheme is often a good choice for beginners, because it is
* difficult to mess up.
*/
}, {
key: "splitComplement",
value: function splitComplement() {
return [this, this.rotate(150), this.rotate(210)];
}
/**
* The rectangle or tetradic color scheme uses four colors arranged into two
* complementary pairs.
*
* This rich color scheme offers plenty of possibilities for variation.
* The tetradic color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors
* in your design.
*
* @param spacing - a value between 0 and 180 that separates the edges in degrees around a color wheel.
*/
complement() {
return this.rotate(180);
}
/**
* Analogous color schemes use colors that are next to each other on the color wheel.
* They usually match well and create serene and comfortable designs.
*
* Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
* Make sure you have enough contrast when choosing an analogous color scheme.
*
* Choose one color to dominate, a second to support. The third color is used (along with black,
* white or gray) as an accent.
*/
}, {
key: "rectangle",
value: function rectangle() {
var spacing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 60;
spacing = clamp({
min: 0,
max: 180,
value: spacing
});
return [this, this.rotate(spacing), this.rotate(180), this.rotate(180 + spacing)];
}
/**
* The square color scheme is similar to the rectangle, but with all four colors spaced
* evenly around the color circle.
*
* The square color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors in your design.
*/
}, {
key: "square",
value: function square() {
return this.rectangle(90);
}
}, {
key: "h",
get: function get() {
return this.hsla.h;
}
/**
* Saturation
*
* A value between 0 and 100 representing the percentage saturation.
*/
analagous(direction = 'forwards') {
const [secondary, tertiary] = direction === 'forwards' ? [30, 60] : [-30, -60];
return [this, this.rotate(secondary), this.rotate(tertiary)];
}
/**
* A triadic color scheme uses colors that are evenly spaced around the color wheel.
*
* Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated
* versions of your hues.
*
* To use a triadic harmony successfully, the colors should be carefully balanced - let one
* color dominate and use the two others for accent.
*/
}, {
key: "s",
get: function get() {
return this.hsla.s;
}
/**
* Lightness
*
* A value between 0 and 100 representing the percentage lightness.
*/
}, {
key: "l",
get: function get() {
return this.hsla.l;
}
/**
* Alpha
*
* The alpha value which is a number between 0 and 1.
*/
triadic() {
return [this, this.rotate(120), this.rotate(240)];
}
/**
* The split complementary color scheme is a variation of the complementary color scheme.
* In addition to the base color, it uses the two colors adjacent to its complement.
*
* This color scheme has the same strong visual contrast as the complementary color scheme,
* but has less tension.
*
* The split-complimentary color scheme is often a good choice for beginners, because it is
* difficult to mess up.
*/
}, {
key: "a",
get: function get() {
return this.hsla.a;
}
/**
* Brightness
*
* Returns a number between 0 and 255 the current color (not taking into account the alpha level).
* The higher the number the brighter the color.
*
* https://24ways.org/2010/calculating-color-contrast
*/
}, {
key: "brightness",
get: function get() {
var _this$toRGB = this.toRGB(),
_this$toRGB2 = _slicedToArray(_this$toRGB, 3),
r = _this$toRGB2[0],
g = _this$toRGB2[1],
b = _this$toRGB2[2];
splitComplement() {
return [this, this.rotate(150), this.rotate(210)];
}
/**
* The rectangle or tetradic color scheme uses four colors arranged into two
* complementary pairs.
*
* This rich color scheme offers plenty of possibilities for variation.
* The tetradic color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors
* in your design.
*
* @param spacing - a value between 0 and 180 that separates the edges in degrees around a color wheel.
*/
return (r * 299 + g * 587 + b * 114) / 1000;
}
}, {
key: "isDark",
get: function get() {
return this.brightness < 128;
}
}, {
key: "isLight",
get: function get() {
return !this.isDark;
}
}]);
return HSL;
}();
rectangle(spacing = 60) {
spacing = clamp({
min: 0,
max: 180,
value: spacing
});
return [this, this.rotate(spacing), this.rotate(180), this.rotate(180 + spacing)];
}
/**
* The square color scheme is similar to the rectangle, but with all four colors spaced
* evenly around the color circle.
*
* The square color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors in your design.
*/
_defineProperty(HSL, "$$id", HSL_SYMBOL);
var _remirrorEditor;
square() {
return this.rectangle(90);
}
}
_defineProperty(HSL, "$$id", HSL_SYMBOL);
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
const baseHue = 205;
const baseSaturation = 70;
const baseLightness = 50;
const primary = HSL.create([baseHue, baseSaturation, baseLightness]);
const hsl = {
primary,
var baseHue = 205;
var baseSaturation = 70;
var baseLightness = 50;
var primary = HSL.create([baseHue, baseSaturation, baseLightness]);
var hsl = {
primary: primary,
secondary: primary.complement(),

@@ -705,12 +785,28 @@ background: HSL.create([0, 0, 100]),

const str = (color, ...methods) => methods.reduce((col, method) => method(col), color).toString();
var str = function str(color) {
for (var _len = arguments.length, methods = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
methods[_key - 1] = arguments[_key];
}
const active = color => color.darken(10);
return methods.reduce(function (col, method) {
return method(col);
}, color).toString();
};
const hover = color => color.darken(5).saturate(9); // const fade = (amount: number) => (color: HSL) => color.fade(amount);
var active = function active(color) {
return color.darken(10);
};
var hover = function hover(color) {
return color.darken(5).saturate(9);
}; // const fade = (amount: number) => (color: HSL) => color.fade(amount);
const alpha = amount => color => color.alpha(amount);
const colors = {
var alpha = function alpha(amount) {
return function (color) {
return color.alpha(amount);
};
};
var colors = {
text: str(hsl.text),

@@ -730,3 +826,3 @@ background: str(hsl.background),

'grey:fade': str(hsl.grey, alpha(20)),
default: str(hsl.grey),
"default": str(hsl.grey),
'default:button:hover': str(hsl.grey, hover),

@@ -742,3 +838,3 @@ 'default:button:active': str(hsl.grey, active),

};
const zIndices = {
var zIndices = {
auto: 'auto',

@@ -752,3 +848,3 @@ '0': 0,

};
const letterSpacings = {
var letterSpacings = {
tighter: '-0.05em',

@@ -761,3 +857,3 @@ tight: '-0.025em',

};
const baseLineHeights = {
var baseLineHeights = {
none: '1',

@@ -770,3 +866,3 @@ tight: '1.25',

};
const heading = {
var heading = {
fontFamily: 'heading',

@@ -783,5 +879,5 @@ fontWeight: 'heading',

const baseTheme = {
var baseTheme = {
initialColorMode: 'light',
colors,
colors: colors,
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],

@@ -794,4 +890,4 @@ sizes: [0, 4, 8, 16, 32, 64, 128, 256, 512],

},
zIndices,
letterSpacings,
zIndices: zIndices,
letterSpacings: letterSpacings,
radii: [0, 4, 8, 16, 32, 64, 128],

@@ -815,3 +911,3 @@ fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],

'remirror:buttons': {
default: {
"default": {
backgroundColor: 'light',

@@ -873,3 +969,3 @@ minHeight: 3,

'remirror:icons': {
default: {
"default": {
color: 'text',

@@ -919,20 +1015,15 @@ transition: 'all 0.2s',

styles: {
'remirror:editor': {
[EDITOR_CLASS_SELECTOR]: {
caretColor: 'currentColor',
wordWrap: 'break-word',
overflowWrap: 'break-word',
fontSize: 2
},
["".concat(EDITOR_CLASS_SELECTOR, ":focus")]: {
outline: 'none' // boxShadow: 'focus',
'remirror:editor': (_remirrorEditor = {}, _defineProperty(_remirrorEditor, EDITOR_CLASS_SELECTOR, {
caretColor: 'currentColor',
wordWrap: 'break-word',
overflowWrap: 'break-word',
fontSize: 2
}), _defineProperty(_remirrorEditor, "".concat(EDITOR_CLASS_SELECTOR, ":focus"), {
outline: 'none' // boxShadow: 'focus',
},
["".concat(EDITOR_CLASS_SELECTOR, "[contenteditable=\"false\"]")]: {
whiteSpace: 'normal'
},
["".concat(EDITOR_CLASS_SELECTOR, "[contenteditable=\"true\"]")]: {
whiteSpace: 'pre-wrap'
}
}
}), _defineProperty(_remirrorEditor, "".concat(EDITOR_CLASS_SELECTOR, "[contenteditable=\"false\"]"), {
whiteSpace: 'normal'
}), _defineProperty(_remirrorEditor, "".concat(EDITOR_CLASS_SELECTOR, "[contenteditable=\"true\"]"), {
whiteSpace: 'pre-wrap'
}), _remirrorEditor)
}

@@ -950,3 +1041,3 @@ };

const applyColorMode = (theme, mode) => {
var applyColorMode = function applyColorMode(theme, mode) {
if (!mode) {

@@ -956,3 +1047,3 @@ return theme;

const modes = get('colors.modes', theme, {});
var modes = get('colors.modes', theme, {});
return deepMerge(theme, {

@@ -966,3 +1057,5 @@ colors: get(mode, modes, {})

const getColorModes = theme => Object.keys(get('colors.modes', theme, {}));
var getColorModes = function getColorModes(theme) {
return Object.keys(get('colors.modes', theme, {}));
};
/**

@@ -972,3 +1065,7 @@ * Creates a path getter for the provided theme.

const getFactory = theme => (path, fallback) => get(path, theme, fallback);
var getFactory = function getFactory(theme) {
return function (path, fallback) {
return get(path, theme, fallback);
};
};
/**

@@ -978,3 +1075,5 @@ * Checks whether an object passed is a serialized style

const isSerializedStyle = val => isPlainObject(val) && isString(val.name) && isString(val.styles);
var isSerializedStyle = function isSerializedStyle(val) {
return isPlainObject(val) && isString(val.name) && isString(val.styles);
};
/**

@@ -984,5 +1083,9 @@ * Return true when a theme prop exists on the value passed in.

const hasThemeProp = val => isPlainObject(val) && isPlainObject(val.theme);
var hasThemeProp = function hasThemeProp(val) {
return isPlainObject(val) && isPlainObject(val.theme);
};
const getTheme = props => hasThemeProp(props) ? props.theme : props;
var getTheme = function getTheme(props) {
return hasThemeProp(props) ? props.theme : props;
};
/**

@@ -1005,7 +1108,17 @@ * A wrapper around the `@styled-system/css` for composing multiple themed

const sx = (...styles) => props => {
const theme = getTheme(props);
return css(styles.map(style => isArray(style) ? sx(...style)(theme) : isFunction(style) ? css$1(style(theme))(theme) : isSerializedStyle(style) ? style : isPlainObject(style) ? css$1(style)(theme) : style));
var sx = function sx() {
for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
styles[_key] = arguments[_key];
}
return function (props) {
var theme = getTheme(props);
return css(styles.map(function (style) {
return isArray(style) ? sx.apply(void 0, _toConsumableArray(style))(theme) : isFunction(style) ? css$1(style(theme))(theme) : isSerializedStyle(style) ? style : isPlainObject(style) ? css$1(style)(theme) : style;
}));
};
};
const cssValueUnits = val => isString(val) ? val.replace(/[0-9 ]+/g, '') : undefined;
var cssValueUnits = function cssValueUnits(val) {
return isString(val) ? val.replace(/[0-9 ]+/g, '') : undefined;
};
/**

@@ -1015,3 +1128,5 @@ * Transforms a number to

const numberToPixels = val => cssValueUnits(val) ? "".concat(val).replace(/ /g, '') : "".concat(val, "px");
var numberToPixels = function numberToPixels(val) {
return cssValueUnits(val) ? "".concat(val).replace(/ /g, '') : "".concat(val, "px");
};

@@ -1026,3 +1141,5 @@ /**

const cssNoOp = () => undefined;
var cssNoOp = function cssNoOp() {
return undefined;
};
/**

@@ -1033,7 +1150,7 @@ * Provides access to the theme context

const EmotionThemeContext = ThemeContext;
const defaultRemirrorThemeValue = {
var EmotionThemeContext = ThemeContext;
var defaultRemirrorThemeValue = {
theme: baseTheme,
css,
sx,
css: css,
sx: sx,
sxx: cssNoOp,

@@ -1043,5 +1160,5 @@ get: getFactory(baseTheme),

colorModes: getColorModes(baseTheme),
setColorMode: () => {}
setColorMode: function setColorMode() {}
};
const withoutEmotionProps = {
var withoutEmotionProps = {
css: cssNoOp,

@@ -1054,3 +1171,3 @@ sx: cssNoOp

const RemirrorThemeContext = createContext(defaultRemirrorThemeValue);
var RemirrorThemeContext = createContext(defaultRemirrorThemeValue);

@@ -1061,3 +1178,5 @@ /**

const useRemirrorTheme = () => useContext(RemirrorThemeContext);
var useRemirrorTheme = function useRemirrorTheme() {
return useContext(RemirrorThemeContext);
};
/**

@@ -1069,3 +1188,5 @@ * A hook which returns the current remirror theme from the emotion context.

const useEmotionTheme = () => useContext(EmotionThemeContext);
var useEmotionTheme = function useEmotionTheme() {
return useContext(EmotionThemeContext);
};

@@ -1079,3 +1200,5 @@ function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

*/
const hasParent = theme => bool(theme.parent);
var hasParent = function hasParent(theme) {
return bool(theme.parent);
};
/**

@@ -1089,3 +1212,5 @@ * When true this is the outermost remirror theme in the component tree.

const isRoot = theme => !hasParent(theme);
var isRoot = function isRoot(theme) {
return !hasParent(theme);
};
/**

@@ -1101,30 +1226,44 @@ * A component that either extends the existing emotion theme with the provided theme

const RemirrorThemeProvider = ({
theme: themeProp,
children,
withoutEmotion = false,
disableMerge = [],
initialColorMode
}) => {
const disableMergeWithParent = disableMerge.includes('parent');
const disableMergeWithBase = disableMerge.includes('base');
const disableMergeWithEmotion = disableMerge.includes('emotion');
const outer = useRemirrorTheme();
const emotionTheme = useEmotionTheme();
const [colorMode, setColorMode] = useState(initialColorMode !== null && initialColorMode !== void 0 ? initialColorMode : outer.colorMode);
const parentEmotionTheme = isRoot(outer) && !disableMergeWithEmotion ? emotionTheme : {};
const parent = disableMergeWithParent ? hasParent(outer) ? outer.parent : Object.create(null) : isRoot(outer) && disableMergeWithBase ? Object.create(null) : outer.theme;
const themeWithoutColorMode = deepMerge(parentEmotionTheme, parent, isFunction(themeProp) ? themeProp(parent) : themeProp);
const theme = applyColorMode(themeWithoutColorMode, colorMode);
const [get, colorModes] = useMemo(() => [getFactory(theme), getColorModes(theme)], [theme]);
var RemirrorThemeProvider = function RemirrorThemeProvider(_ref) {
var themeProp = _ref.theme,
children = _ref.children,
_ref$withoutEmotion = _ref.withoutEmotion,
withoutEmotion = _ref$withoutEmotion === void 0 ? false : _ref$withoutEmotion,
_ref$disableMerge = _ref.disableMerge,
disableMerge = _ref$disableMerge === void 0 ? [] : _ref$disableMerge,
initialColorMode = _ref.initialColorMode;
var disableMergeWithParent = disableMerge.includes('parent');
var disableMergeWithBase = disableMerge.includes('base');
var disableMergeWithEmotion = disableMerge.includes('emotion');
var outer = useRemirrorTheme();
var emotionTheme = useEmotionTheme();
const value = _objectSpread$2({}, defaultRemirrorThemeValue, {}, withoutEmotion ? withoutEmotionProps : {
sxx: (...args) => defaultRemirrorThemeValue.sx(...args)(theme)
var _useState = useState(initialColorMode !== null && initialColorMode !== void 0 ? initialColorMode : outer.colorMode),
_useState2 = _slicedToArray(_useState, 2),
colorMode = _useState2[0],
setColorMode = _useState2[1];
var parentEmotionTheme = isRoot(outer) && !disableMergeWithEmotion ? emotionTheme : {};
var parent = disableMergeWithParent ? hasParent(outer) ? outer.parent : Object.create(null) : isRoot(outer) && disableMergeWithBase ? Object.create(null) : outer.theme;
var themeWithoutColorMode = deepMerge(parentEmotionTheme, parent, isFunction(themeProp) ? themeProp(parent) : themeProp);
var theme = applyColorMode(themeWithoutColorMode, colorMode);
var _useMemo = useMemo(function () {
return [getFactory(theme), getColorModes(theme)];
}, [theme]),
_useMemo2 = _slicedToArray(_useMemo, 2),
get = _useMemo2[0],
colorModes = _useMemo2[1];
var value = _objectSpread$2({}, defaultRemirrorThemeValue, {}, withoutEmotion ? withoutEmotionProps : {
sxx: function sxx() {
return defaultRemirrorThemeValue.sx.apply(defaultRemirrorThemeValue, arguments)(theme);
}
}, {
parent,
theme,
get,
colorMode,
colorModes,
setColorMode
parent: parent,
theme: theme,
get: get,
colorMode: colorMode,
colorModes: colorModes,
setColorMode: setColorMode
});

@@ -1145,10 +1284,11 @@

*/
const RemirrorThemeRoot = ({
children,
makeGlobal = false
}) => {
const {
sxx
} = useRemirrorTheme();
const styles = sxx({
var RemirrorThemeRoot = function RemirrorThemeRoot(_ref) {
var children = _ref.children,
_ref$makeGlobal = _ref.makeGlobal,
makeGlobal = _ref$makeGlobal === void 0 ? false : _ref$makeGlobal;
var _useRemirrorTheme = useRemirrorTheme(),
sxx = _useRemirrorTheme.sxx;
var styles = sxx({
fontFamily: 'body'

@@ -1155,0 +1295,0 @@ });

14

lib/ui-context.js

@@ -18,3 +18,5 @@ 'use strict';

const cssNoOp = () => undefined;
var cssNoOp = function cssNoOp() {
return undefined;
};
/**

@@ -25,4 +27,4 @@ * Provides access to the theme context

const EmotionThemeContext = core.ThemeContext;
const defaultRemirrorThemeValue = {
var EmotionThemeContext = core.ThemeContext;
var defaultRemirrorThemeValue = {
theme: uiTheme.baseTheme,

@@ -35,5 +37,5 @@ css: core.css,

colorModes: uiUtils.getColorModes(uiTheme.baseTheme),
setColorMode: () => {}
setColorMode: function setColorMode() {}
};
const withoutEmotionProps = {
var withoutEmotionProps = {
css: cssNoOp,

@@ -46,3 +48,3 @@ sx: cssNoOp

const RemirrorThemeContext = react.createContext(defaultRemirrorThemeValue);
var RemirrorThemeContext = react.createContext(defaultRemirrorThemeValue);

@@ -49,0 +51,0 @@ exports.EmotionThemeContext = EmotionThemeContext;

8

lib/ui-hooks.js

@@ -12,3 +12,5 @@ 'use strict';

const useRemirrorTheme = () => react.useContext(uiContext.RemirrorThemeContext);
var useRemirrorTheme = function useRemirrorTheme() {
return react.useContext(uiContext.RemirrorThemeContext);
};
/**

@@ -20,3 +22,5 @@ * A hook which returns the current remirror theme from the emotion context.

const useEmotionTheme = () => react.useContext(uiContext.EmotionThemeContext);
var useEmotionTheme = function useEmotionTheme() {
return react.useContext(uiContext.EmotionThemeContext);
};

@@ -23,0 +27,0 @@ exports.useEmotionTheme = useEmotionTheme;

1065

lib/ui-hsl.js

@@ -9,2 +9,6 @@ 'use strict';

var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _toArray = _interopDefault(require('@babel/runtime/helpers/toArray'));
var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
var coreHelpers = require('@remirror/core-helpers');

@@ -16,26 +20,37 @@

// Taken from https://github.com/regexhq/hsla-regex/blob/master/test/test.js#L7
const HSLA_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/; // Taken from https://github.com/regexhq/hsl-regex/blob/3ea5cede63c1e4a30878e7329a197c502337b7b3/index.js#L7
var HSLA_REGEX = /^hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*(\d*(?:\.\d+)?)\)$/; // Taken from https://github.com/regexhq/hsl-regex/blob/3ea5cede63c1e4a30878e7329a197c502337b7b3/index.js#L7
const HSL_REGEX = /^hsl\(\s*([\d.]+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/;
const HSL_SYMBOL = Symbol.for('hslColor');
const isHSL = value => coreHelpers.isObject(value) && value.constructor && value.constructor.$$id === HSL_SYMBOL;
var HSL_REGEX = /^hsl\(\s*([\d.]+)\s*,\s*(\d*(?:\.\d+)?%)\s*,\s*(\d*(?:\.\d+)?%)\)$/;
var HSL_SYMBOL = Symbol["for"]('hslColor');
var isHSL = function isHSL(value) {
return coreHelpers.isObject(value) && value.constructor && value.constructor.$$id === HSL_SYMBOL;
};
const isNamedHSLObject = value => coreHelpers.bool(coreHelpers.isPlainObject(value) && value.hue && value.saturation && value.lightness);
var isNamedHSLObject = function isNamedHSLObject(value) {
return coreHelpers.bool(coreHelpers.isPlainObject(value) && value.hue && value.saturation && value.lightness);
};
const isHSLObject = value => coreHelpers.bool(coreHelpers.isPlainObject(value) && value.h && value.s && value.l);
var isHSLObject = function isHSLObject(value) {
return coreHelpers.bool(coreHelpers.isPlainObject(value) && value.h && value.s && value.l);
};
const hslArrayToObject = value => {
const [h, s, l, a] = value;
var hslArrayToObject = function hslArrayToObject(value) {
var _value = _slicedToArray(value, 4),
h = _value[0],
s = _value[1],
l = _value[2],
a = _value[3];
return {
h,
s,
l,
a
h: h,
s: s,
l: l,
a: a
};
};
const hslStringToObject = value => {
var hslStringToObject = function hslStringToObject(value) {
var _HSLA_REGEX$exec;
const regexValue = (_HSLA_REGEX$exec = HSLA_REGEX.exec(value)) !== null && _HSLA_REGEX$exec !== void 0 ? _HSLA_REGEX$exec : HSL_REGEX.exec(value);
var regexValue = (_HSLA_REGEX$exec = HSLA_REGEX.exec(value)) !== null && _HSLA_REGEX$exec !== void 0 ? _HSLA_REGEX$exec : HSL_REGEX.exec(value);

@@ -46,7 +61,9 @@ if (!regexValue) {

const [, ...array] = regexValue;
var _regexValue = _toArray(regexValue),
array = _regexValue.slice(1);
return hslArrayToObject(array);
};
const convertHSLToObject = value => {
var convertHSLToObject = function convertHSLToObject(value) {
if (isHSLObject(value)) {

@@ -57,13 +74,11 @@ return value;

if (isNamedHSLObject(value)) {
const {
hue: h,
saturation: s,
lightness: l,
alpha: a
} = value;
var h = value.hue,
s = value.saturation,
l = value.lightness,
a = value.alpha;
return {
h,
s,
l,
a
h: h,
s: s,
l: l,
a: a
};

@@ -83,6 +98,8 @@ }

const isValidHue = hue => coreHelpers.isNumber(hue) && hue <= 360 && hue >= 0;
var isValidHue = function isValidHue(hue) {
return coreHelpers.isNumber(hue) && hue <= 360 && hue >= 0;
};
const createValidHue = value => {
const hue = coreHelpers.isString(value) ? Number(value) % 360 : value % 360;
var createValidHue = function createValidHue(value) {
var hue = coreHelpers.isString(value) ? Number(value) % 360 : value % 360;

@@ -96,6 +113,8 @@ if (!isValidHue(hue)) {

const isValidPercent = percent => coreHelpers.isNumber(percent) && percent <= 100 && percent >= 0;
var isValidPercent = function isValidPercent(percent) {
return coreHelpers.isNumber(percent) && percent <= 100 && percent >= 0;
};
const createValidPercent = value => {
const percent = coreHelpers.isString(value) ? Number(value.replace(/[%\s]+/g, '')) : value;
var createValidPercent = function createValidPercent(value) {
var percent = coreHelpers.isString(value) ? Number(value.replace(/[%\s]+/g, '')) : value;

@@ -109,10 +128,12 @@ if (!isValidPercent(percent)) {

const clampPercent = value => coreHelpers.clamp({
min: 0,
max: 100,
value
});
var clampPercent = function clampPercent(value) {
return coreHelpers.clamp({
min: 0,
max: 100,
value: value
});
};
const createValidAlpha = value => {
const alpha = coreHelpers.isString(value) ? value.includes('%') ? Number(value.replace(/[%\s]+/g, '')) : Number(value) * 100 : value;
var createValidAlpha = function createValidAlpha(value) {
var alpha = coreHelpers.isString(value) ? value.includes('%') ? Number(value.replace(/[%\s]+/g, '')) : Number(value) * 100 : value;

@@ -130,15 +151,18 @@ if (coreHelpers.isUndefined(alpha)) {

const createValidHSLObject = ({
h: hue,
s: saturation,
l: lightness,
a: alpha
}) => ({
h: createValidHue(hue),
s: createValidPercent(saturation),
l: createValidPercent(lightness),
a: createValidAlpha(alpha)
});
var createValidHSLObject = function createValidHSLObject(_ref) {
var hue = _ref.h,
saturation = _ref.s,
lightness = _ref.l,
alpha = _ref.a;
return {
h: createValidHue(hue),
s: createValidPercent(saturation),
l: createValidPercent(lightness),
a: createValidAlpha(alpha)
};
};
const freeze = hslObject => Object.freeze(hslObject);
var freeze = function freeze(hslObject) {
return Object.freeze(hslObject);
};
/**

@@ -149,3 +173,3 @@ * Taken from https://github.com/usemeta/hsl-rgb/blob/1afed9a9703816e375839b4fbb6458f2765a76a8/index.js#L1

const calculateHue = (pp, qq, hh) => {
var calculateHue = function calculateHue(pp, qq, hh) {
hh = hh < 0 ? hh + 1 : hh > 1 ? hh - 1 : hh;

@@ -159,13 +183,20 @@ return hh < 1 / 6 ? pp + (qq - pp) * 6 * hh : hh < 1 / 2 ? qq : hh < 2 / 3 ? pp + (qq - pp) * (2 / 3 - hh) * 6 : pp;

const hslToRgb = ([hue, saturation, lightness]) => {
let [rr, gg, bb] = [0, 0, 0];
const hh = hue / 360;
const ss = saturation / 100;
const ll = lightness / 100;
var hslToRgb = function hslToRgb(_ref2) {
var _ref3 = _slicedToArray(_ref2, 3),
hue = _ref3[0],
saturation = _ref3[1],
lightness = _ref3[2];
var rr = 0,
gg = 0,
bb = 0;
var hh = hue / 360;
var ss = saturation / 100;
var ll = lightness / 100;
if (ss === 0) {
rr = gg = bb = ll;
} else {
const qq = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
const pp = 2 * ll - qq;
var qq = ll < 0.5 ? ll * (1 + ss) : ll + ss - ll * ss;
var pp = 2 * ll - qq;
rr = calculateHue(pp, qq, hh + 1 / 3);

@@ -183,3 +214,6 @@ gg = calculateHue(pp, qq, hh);

const percentageToRatio = (percent, precision = 10) => Number((percent / 100).toFixed(precision));
var percentageToRatio = function percentageToRatio(percent) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
return Number((percent / 100).toFixed(precision));
};
/**

@@ -190,23 +224,31 @@ * HSLColor is a small utility for transforming colors, but only hsl colors.

class HSL {
/**
* Create a hsl class from the passed in string / array / object parameters.
*
* Throws a descriptive error if invalid parameters are passed in.
*/
static create(value) {
if (isHSL(value)) {
return value.clone();
var HSL =
/*#__PURE__*/
function () {
_createClass(HSL, null, [{
key: "create",
/**
* Create a hsl class from the passed in string / array / object parameters.
*
* Throws a descriptive error if invalid parameters are passed in.
*/
value: function create(value) {
if (isHSL(value)) {
return value.clone();
}
var hsl = createValidHSLObject(convertHSLToObject(value));
return new HSL(hsl);
}
/**
* Store the hue as an object of number values. Percentages are stored as decimals
* between 0 and 1.
*/
const hsl = createValidHSLObject(convertHSLToObject(value));
return new HSL(hsl);
}
/**
* Store the hue as an object of number values. Percentages are stored as decimals
* between 0 and 1.
*/
}]);
function HSL(hsla) {
_classCallCheck(this, HSL);
constructor(hsla) {
this.hsla = freeze(hsla);

@@ -221,467 +263,502 @@ }

get h() {
return this.hsla.h;
}
/**
* Saturation
*
* A value between 0 and 100 representing the percentage saturation.
*/
_createClass(HSL, [{
key: "toJSON",
/**
* Returns the object representation of the hsl class.
*/
value: function toJSON() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
return {
h: h,
s: s,
l: l,
a: a
};
}
/**
* Return the array representation of the hsl
*/
get s() {
return this.hsla.s;
}
/**
* Lightness
*
* A value between 0 and 100 representing the percentage lightness.
*/
}, {
key: "toArray",
value: function toArray() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
return [h, s, l, a];
}
/**
* Produces a valid HSL string that can be used to represent a color in your css.
*/
}, {
key: "toString",
value: function toString() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
var _ref4 = [h.toString(), "".concat(s, "%"), "".concat(l, "%"), "".concat(percentageToRatio(a))],
hue = _ref4[0],
saturation = _ref4[1],
lightness = _ref4[2],
alpha = _ref4[3];
return alpha === '1' ? "hsl(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ")") : "hsla(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ", ").concat(alpha, ")");
}
/**
* Returns the array
*/
get l() {
return this.hsla.l;
}
/**
* Alpha
*
* The alpha value which is a number between 0 and 1.
*/
}, {
key: "toRGB",
value: function toRGB() {
var h = this.h,
s = this.s,
l = this.l,
a = this.a;
var _hslToRgb = hslToRgb([h, s, l]),
_hslToRgb2 = _slicedToArray(_hslToRgb, 3),
r = _hslToRgb2[0],
g = _hslToRgb2[1],
b = _hslToRgb2[2];
get a() {
return this.hsla.a;
}
/**
* Brightness
*
* Returns a number between 0 and 255 the current color (not taking into account the alpha level).
* The higher the number the brighter the color.
*
* https://24ways.org/2010/calculating-color-contrast
*/
return [r, g, b, a];
}
/**
* Rotate the color around the color wheel. The value is always clamped between 0 and 360deg.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.rotate(100).h // => 280
* ```
*/
get brightness() {
const [r, g, b] = this.toRGB();
return (r * 299 + g * 587 + b * 114) / 1000;
}
get isDark() {
return this.brightness < 128;
}
get isLight() {
return !this.isDark;
}
/**
* Returns the object representation of the hsl class.
*/
toJSON() {
const {
h,
s,
l,
a
} = this;
return {
h,
s,
l,
a
};
}
/**
* Return the array representation of the hsl
*/
toArray() {
const {
h,
s,
l,
a
} = this;
return [h, s, l, a];
}
/**
* Produces a valid HSL string that can be used to represent a color in your css.
*/
toString() {
const {
h,
s,
l,
a
} = this;
const [hue, saturation, lightness, alpha] = [h.toString(), "".concat(s, "%"), "".concat(l, "%"), "".concat(percentageToRatio(a))];
return alpha === '1' ? "hsl(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ")") : "hsla(".concat(hue, ", ").concat(saturation, ", ").concat(lightness, ", ").concat(alpha, ")");
}
/**
* Returns the array
*/
toRGB() {
const {
h,
s,
l,
a
} = this;
const [r, g, b] = hslToRgb([h, s, l]);
return [r, g, b, a];
}
/**
* Rotate the color around the color wheel. The value is always clamped between 0 and 360deg.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.rotate(100).h // => 280
* ```
*/
rotate(degrees) {
const _this$hsla = this.hsla,
{
h
} = _this$hsla,
}, {
key: "rotate",
value: function rotate(degrees) {
var _this$hsla = this.hsla,
h = _this$hsla.h,
sla = _objectWithoutProperties(_this$hsla, ["h"]);
return this.clone(_objectSpread({}, sla, {
h: createValidHue(h + degrees)
}));
}
/**
* Lighten the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.lighten(50).l // => 75
* color.lighten('25%').l // => 62.5
* ```
*/
return this.clone(_objectSpread({}, sla, {
h: createValidHue(h + degrees)
}));
}
/**
* Lighten the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.lighten(50).l // => 75
* color.lighten('25%').l // => 62.5
* ```
*/
lighten(percent) {
const _this$hsla2 = this.hsla,
{
l
} = _this$hsla2,
}, {
key: "lighten",
value: function lighten(percent) {
var _this$hsla2 = this.hsla,
l = _this$hsla2.l,
hsa = _objectWithoutProperties(_this$hsla2, ["l"]);
const lightness = createValidPercent(clampPercent(l + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Darken the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.darken(50).l // => 25
* color.darken('25%').l // => 37.5
* ```
*/
var lightness = createValidPercent(clampPercent(l + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Darken the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* color.darken(50).l // => 25
* color.darken('25%').l // => 37.5
* ```
*/
darken(percent) {
const _this$hsla3 = this.hsla,
{
l
} = _this$hsla3,
}, {
key: "darken",
value: function darken(percent) {
var _this$hsla3 = this.hsla,
l = _this$hsla3.l,
hsa = _objectWithoutProperties(_this$hsla3, ["l"]);
const lightness = createValidPercent(clampPercent(l - createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Increase the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.unfade(40).a // => 90
* color.unfade('25%').a // => 75
* ```
*/
var lightness = createValidPercent(clampPercent(l - createValidPercent(percent)));
return this.clone(_objectSpread({}, hsa, {
l: lightness
}));
}
/**
* Increase the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.unfade(40).a // => 90
* color.unfade('25%').a // => 75
* ```
*/
unfade(percent) {
const _this$hsla4 = this.hsla,
{
a = 100
} = _this$hsla4,
}, {
key: "unfade",
value: function unfade(percent) {
var _this$hsla4 = this.hsla,
_this$hsla4$a = _this$hsla4.a,
a = _this$hsla4$a === void 0 ? 100 : _this$hsla4$a,
hsl = _objectWithoutProperties(_this$hsla4, ["a"]);
const alpha = createValidPercent(clampPercent(a + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Decrease the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.fade(40).a // => 10
* color.fade('25%').a // => 25
* ```
*/
var alpha = createValidPercent(clampPercent(a + createValidPercent(percent)));
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Decrease the opacity of the color.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsla(180, 50%, 50%, 0.5)')
* color.fade(40).a // => 10
* color.fade('25%').a // => 25
* ```
*/
fade(percent) {
const _this$hsla5 = this.hsla,
{
a = 100
} = _this$hsla5,
}, {
key: "fade",
value: function fade(percent) {
var _this$hsla5 = this.hsla,
_this$hsla5$a = _this$hsla5.a,
a = _this$hsla5$a === void 0 ? 100 : _this$hsla5$a,
hsl = _objectWithoutProperties(_this$hsla5, ["a"]);
const num = clampPercent(a - createValidPercent(percent));
const alpha = createValidPercent(num);
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Increase the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* NOTE: the number is treated as a percentage value (not a ratio).
* - `50` is treated as `50%`
* - `0.5` is treated as `0.5%`
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.saturate(50).s // => 75
* hsl.saturate('100%').s // => 100
* ```
*/
var num = clampPercent(a - createValidPercent(percent));
var alpha = createValidPercent(num);
return this.clone(_objectSpread({}, hsl, {
a: alpha
}));
}
/**
* Increase the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* NOTE: the number is treated as a percentage value (not a ratio).
* - `50` is treated as `50%`
* - `0.5` is treated as `0.5%`
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.saturate(50).s // => 75
* hsl.saturate('100%').s // => 100
* ```
*/
saturate(percent) {
const _this$hsla6 = this.hsla,
{
s
} = _this$hsla6,
}, {
key: "saturate",
value: function saturate(percent) {
var _this$hsla6 = this.hsla,
s = _this$hsla6.s,
hla = _objectWithoutProperties(_this$hsla6, ["s"]);
const saturation = createValidPercent(clampPercent(s + createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Decrease the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.desaturate(50).s // => 25
* hsl.desaturate('100%').s // => 0
* ```
*/
var saturation = createValidPercent(clampPercent(s + createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Decrease the color saturation.
*
* Can either be a number or a string which represents a percentage.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)')
* hsl.desaturate(50).s // => 25
* hsl.desaturate('100%').s // => 0
* ```
*/
desaturate(percent) {
const _this$hsla7 = this.hsla,
{
s
} = _this$hsla7,
}, {
key: "desaturate",
value: function desaturate(percent) {
var _this$hsla7 = this.hsla,
s = _this$hsla7.s,
hla = _objectWithoutProperties(_this$hsla7, ["s"]);
const saturation = createValidPercent(clampPercent(s - createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Set the hue value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.hue(100).h //=> 100
* ```
*/
var saturation = createValidPercent(clampPercent(s - createValidPercent(percent)));
return this.clone(_objectSpread({}, hla, {
s: saturation
}));
}
/**
* Set the hue value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.hue(100).h //=> 100
* ```
*/
}, {
key: "hue",
value: function hue(_hue) {
return this.clone(_objectSpread({}, this.hsla, {
h: createValidHue(_hue)
}));
}
/**
* Set the saturation value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.saturation(15).s //=> 15
* ```
*/
hue(hue) {
return this.clone(_objectSpread({}, this.hsla, {
h: createValidHue(hue)
}));
}
/**
* Set the saturation value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.saturation(15).s //=> 15
* ```
*/
}, {
key: "saturation",
value: function saturation(_saturation) {
return this.clone(_objectSpread({}, this.hsla, {
s: createValidPercent(_saturation)
}));
}
/**
* Set the lightness value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.lightness(100).h //=> 100
* ```
*/
}, {
key: "lightness",
value: function lightness(_lightness) {
return this.clone(_objectSpread({}, this.hsla, {
l: createValidPercent(_lightness)
}));
}
/**
* Set the alpha (transparency) value of the color.
*
* Value passed must be a percentage;
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%, 0.5)');
* hsl.alpha(40).a // => 40
* ```
*/
saturation(saturation) {
return this.clone(_objectSpread({}, this.hsla, {
s: createValidPercent(saturation)
}));
}
/**
* Set the lightness value of the color.
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%)');
* hsl.lightness(100).h //=> 100
* ```
*/
}, {
key: "alpha",
value: function alpha(_alpha) {
return this.clone(_objectSpread({}, this.hsla, {
a: createValidAlpha(coreHelpers.isNumber(_alpha) ? "".concat(_alpha, "%") : _alpha)
}));
}
/**
* Returns a cloned version of the HSL.
*
* If an HSLObject is provided it merges these properties into the final object.
*/
}, {
key: "clone",
value: function clone() {
var hsla = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Object.create(null);
return new HSL(createValidHSLObject(_objectSpread({}, this.hsla, {}, hsla)));
}
/* Color Harmonies
Docs taken from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm */
lightness(lightness) {
return this.clone(_objectSpread({}, this.hsla, {
l: createValidPercent(lightness)
}));
}
/**
* Set the alpha (transparency) value of the color.
*
* Value passed must be a percentage;
*
* ```ts
* const hsl = HSL.create('hsl(180, 50%, 50%, 0.5)');
* hsl.alpha(40).a // => 40
* ```
*/
/**
* Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
*
* The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
* Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
*
* In general, complementary colors are really bad for text.
*/
}, {
key: "complement",
value: function complement() {
return this.rotate(180);
}
/**
* Analogous color schemes use colors that are next to each other on the color wheel.
* They usually match well and create serene and comfortable designs.
*
* Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
* Make sure you have enough contrast when choosing an analogous color scheme.
*
* Choose one color to dominate, a second to support. The third color is used (along with black,
* white or gray) as an accent.
*/
alpha(alpha) {
return this.clone(_objectSpread({}, this.hsla, {
a: createValidAlpha(coreHelpers.isNumber(alpha) ? "".concat(alpha, "%") : alpha)
}));
}
/**
* Returns a cloned version of the HSL.
*
* If an HSLObject is provided it merges these properties into the final object.
*/
}, {
key: "analagous",
value: function analagous() {
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'forwards';
var _ref5 = direction === 'forwards' ? [30, 60] : [-30, -60],
_ref6 = _slicedToArray(_ref5, 2),
secondary = _ref6[0],
tertiary = _ref6[1];
clone(hsla = Object.create(null)) {
return new HSL(createValidHSLObject(_objectSpread({}, this.hsla, {}, hsla)));
}
/* Color Harmonies
Docs taken from https://www.tigercolor.com/color-lab/color-theory/color-harmonies.htm */
return [this, this.rotate(secondary), this.rotate(tertiary)];
}
/**
* A triadic color scheme uses colors that are evenly spaced around the color wheel.
*
* Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated
* versions of your hues.
*
* To use a triadic harmony successfully, the colors should be carefully balanced - let one
* color dominate and use the two others for accent.
*/
/**
* Colors that are opposite each other on the color wheel are considered to be complementary colors (example: red and green).
*
* The high contrast of complementary colors creates a vibrant look especially when used at full saturation. This color scheme must be managed well so it is not jarring.
* Complementary colors are tricky to use in large doses, but work well when you want something to stand out.
*
* In general, complementary colors are really bad for text.
*/
}, {
key: "triadic",
value: function triadic() {
return [this, this.rotate(120), this.rotate(240)];
}
/**
* The split complementary color scheme is a variation of the complementary color scheme.
* In addition to the base color, it uses the two colors adjacent to its complement.
*
* This color scheme has the same strong visual contrast as the complementary color scheme,
* but has less tension.
*
* The split-complimentary color scheme is often a good choice for beginners, because it is
* difficult to mess up.
*/
}, {
key: "splitComplement",
value: function splitComplement() {
return [this, this.rotate(150), this.rotate(210)];
}
/**
* The rectangle or tetradic color scheme uses four colors arranged into two
* complementary pairs.
*
* This rich color scheme offers plenty of possibilities for variation.
* The tetradic color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors
* in your design.
*
* @param spacing - a value between 0 and 180 that separates the edges in degrees around a color wheel.
*/
complement() {
return this.rotate(180);
}
/**
* Analogous color schemes use colors that are next to each other on the color wheel.
* They usually match well and create serene and comfortable designs.
*
* Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.
* Make sure you have enough contrast when choosing an analogous color scheme.
*
* Choose one color to dominate, a second to support. The third color is used (along with black,
* white or gray) as an accent.
*/
}, {
key: "rectangle",
value: function rectangle() {
var spacing = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 60;
spacing = coreHelpers.clamp({
min: 0,
max: 180,
value: spacing
});
return [this, this.rotate(spacing), this.rotate(180), this.rotate(180 + spacing)];
}
/**
* The square color scheme is similar to the rectangle, but with all four colors spaced
* evenly around the color circle.
*
* The square color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors in your design.
*/
}, {
key: "square",
value: function square() {
return this.rectangle(90);
}
}, {
key: "h",
get: function get() {
return this.hsla.h;
}
/**
* Saturation
*
* A value between 0 and 100 representing the percentage saturation.
*/
analagous(direction = 'forwards') {
const [secondary, tertiary] = direction === 'forwards' ? [30, 60] : [-30, -60];
return [this, this.rotate(secondary), this.rotate(tertiary)];
}
/**
* A triadic color scheme uses colors that are evenly spaced around the color wheel.
*
* Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated
* versions of your hues.
*
* To use a triadic harmony successfully, the colors should be carefully balanced - let one
* color dominate and use the two others for accent.
*/
}, {
key: "s",
get: function get() {
return this.hsla.s;
}
/**
* Lightness
*
* A value between 0 and 100 representing the percentage lightness.
*/
}, {
key: "l",
get: function get() {
return this.hsla.l;
}
/**
* Alpha
*
* The alpha value which is a number between 0 and 1.
*/
triadic() {
return [this, this.rotate(120), this.rotate(240)];
}
/**
* The split complementary color scheme is a variation of the complementary color scheme.
* In addition to the base color, it uses the two colors adjacent to its complement.
*
* This color scheme has the same strong visual contrast as the complementary color scheme,
* but has less tension.
*
* The split-complimentary color scheme is often a good choice for beginners, because it is
* difficult to mess up.
*/
}, {
key: "a",
get: function get() {
return this.hsla.a;
}
/**
* Brightness
*
* Returns a number between 0 and 255 the current color (not taking into account the alpha level).
* The higher the number the brighter the color.
*
* https://24ways.org/2010/calculating-color-contrast
*/
}, {
key: "brightness",
get: function get() {
var _this$toRGB = this.toRGB(),
_this$toRGB2 = _slicedToArray(_this$toRGB, 3),
r = _this$toRGB2[0],
g = _this$toRGB2[1],
b = _this$toRGB2[2];
splitComplement() {
return [this, this.rotate(150), this.rotate(210)];
}
/**
* The rectangle or tetradic color scheme uses four colors arranged into two
* complementary pairs.
*
* This rich color scheme offers plenty of possibilities for variation.
* The tetradic color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors
* in your design.
*
* @param spacing - a value between 0 and 180 that separates the edges in degrees around a color wheel.
*/
return (r * 299 + g * 587 + b * 114) / 1000;
}
}, {
key: "isDark",
get: function get() {
return this.brightness < 128;
}
}, {
key: "isLight",
get: function get() {
return !this.isDark;
}
}]);
return HSL;
}();
rectangle(spacing = 60) {
spacing = coreHelpers.clamp({
min: 0,
max: 180,
value: spacing
});
return [this, this.rotate(spacing), this.rotate(180), this.rotate(180 + spacing)];
}
/**
* The square color scheme is similar to the rectangle, but with all four colors spaced
* evenly around the color circle.
*
* The square color scheme works best if you let one color be dominant.
*
* You should also pay attention to the balance between warm and cool colors in your design.
*/
square() {
return this.rectangle(90);
}
}
_defineProperty(HSL, "$$id", HSL_SYMBOL);

@@ -688,0 +765,0 @@

75

lib/ui-provider.js

@@ -8,2 +8,3 @@ 'use strict';

var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
var coreHelpers = require('@remirror/core-helpers');

@@ -24,3 +25,5 @@ var core = require('@emotion/core');

*/
const hasParent = theme => coreHelpers.bool(theme.parent);
var hasParent = function hasParent(theme) {
return coreHelpers.bool(theme.parent);
};
/**

@@ -34,3 +37,5 @@ * When true this is the outermost remirror theme in the component tree.

const isRoot = theme => !hasParent(theme);
var isRoot = function isRoot(theme) {
return !hasParent(theme);
};
/**

@@ -46,30 +51,44 @@ * A component that either extends the existing emotion theme with the provided theme

const RemirrorThemeProvider = ({
theme: themeProp,
children,
withoutEmotion = false,
disableMerge = [],
initialColorMode
}) => {
const disableMergeWithParent = disableMerge.includes('parent');
const disableMergeWithBase = disableMerge.includes('base');
const disableMergeWithEmotion = disableMerge.includes('emotion');
const outer = uiHooks.useRemirrorTheme();
const emotionTheme = uiHooks.useEmotionTheme();
const [colorMode, setColorMode] = react.useState(initialColorMode !== null && initialColorMode !== void 0 ? initialColorMode : outer.colorMode);
const parentEmotionTheme = isRoot(outer) && !disableMergeWithEmotion ? emotionTheme : {};
const parent = disableMergeWithParent ? hasParent(outer) ? outer.parent : Object.create(null) : isRoot(outer) && disableMergeWithBase ? Object.create(null) : outer.theme;
const themeWithoutColorMode = coreHelpers.deepMerge(parentEmotionTheme, parent, coreHelpers.isFunction(themeProp) ? themeProp(parent) : themeProp);
const theme = uiUtils.applyColorMode(themeWithoutColorMode, colorMode);
const [get, colorModes] = react.useMemo(() => [uiUtils.getFactory(theme), uiUtils.getColorModes(theme)], [theme]);
var RemirrorThemeProvider = function RemirrorThemeProvider(_ref) {
var themeProp = _ref.theme,
children = _ref.children,
_ref$withoutEmotion = _ref.withoutEmotion,
withoutEmotion = _ref$withoutEmotion === void 0 ? false : _ref$withoutEmotion,
_ref$disableMerge = _ref.disableMerge,
disableMerge = _ref$disableMerge === void 0 ? [] : _ref$disableMerge,
initialColorMode = _ref.initialColorMode;
var disableMergeWithParent = disableMerge.includes('parent');
var disableMergeWithBase = disableMerge.includes('base');
var disableMergeWithEmotion = disableMerge.includes('emotion');
var outer = uiHooks.useRemirrorTheme();
var emotionTheme = uiHooks.useEmotionTheme();
const value = _objectSpread({}, uiContext.defaultRemirrorThemeValue, {}, withoutEmotion ? uiContext.withoutEmotionProps : {
sxx: (...args) => uiContext.defaultRemirrorThemeValue.sx(...args)(theme)
var _useState = react.useState(initialColorMode !== null && initialColorMode !== void 0 ? initialColorMode : outer.colorMode),
_useState2 = _slicedToArray(_useState, 2),
colorMode = _useState2[0],
setColorMode = _useState2[1];
var parentEmotionTheme = isRoot(outer) && !disableMergeWithEmotion ? emotionTheme : {};
var parent = disableMergeWithParent ? hasParent(outer) ? outer.parent : Object.create(null) : isRoot(outer) && disableMergeWithBase ? Object.create(null) : outer.theme;
var themeWithoutColorMode = coreHelpers.deepMerge(parentEmotionTheme, parent, coreHelpers.isFunction(themeProp) ? themeProp(parent) : themeProp);
var theme = uiUtils.applyColorMode(themeWithoutColorMode, colorMode);
var _useMemo = react.useMemo(function () {
return [uiUtils.getFactory(theme), uiUtils.getColorModes(theme)];
}, [theme]),
_useMemo2 = _slicedToArray(_useMemo, 2),
get = _useMemo2[0],
colorModes = _useMemo2[1];
var value = _objectSpread({}, uiContext.defaultRemirrorThemeValue, {}, withoutEmotion ? uiContext.withoutEmotionProps : {
sxx: function sxx() {
return uiContext.defaultRemirrorThemeValue.sx.apply(uiContext.defaultRemirrorThemeValue, arguments)(theme);
}
}, {
parent,
theme,
get,
colorMode,
colorModes,
setColorMode
parent: parent,
theme: theme,
get: get,
colorMode: colorMode,
colorModes: colorModes,
setColorMode: setColorMode
});

@@ -76,0 +95,0 @@

17

lib/ui-theme-root.js

@@ -14,10 +14,11 @@ 'use strict';

*/
const RemirrorThemeRoot = ({
children,
makeGlobal = false
}) => {
const {
sxx
} = uiHooks.useRemirrorTheme();
const styles = sxx({
var RemirrorThemeRoot = function RemirrorThemeRoot(_ref) {
var children = _ref.children,
_ref$makeGlobal = _ref.makeGlobal,
makeGlobal = _ref$makeGlobal === void 0 ? false : _ref$makeGlobal;
var _useRemirrorTheme = uiHooks.useRemirrorTheme(),
sxx = _useRemirrorTheme.sxx;
var styles = sxx({
fontFamily: 'body'

@@ -24,0 +25,0 @@ });

91

lib/ui-theme.js

@@ -11,11 +11,13 @@ 'use strict';

var _remirrorEditor;
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
const baseHue = 205;
const baseSaturation = 70;
const baseLightness = 50;
const primary = uiHsl.HSL.create([baseHue, baseSaturation, baseLightness]);
const hsl = {
primary,
var baseHue = 205;
var baseSaturation = 70;
var baseLightness = 50;
var primary = uiHsl.HSL.create([baseHue, baseSaturation, baseLightness]);
var hsl = {
primary: primary,
secondary: primary.complement(),

@@ -30,12 +32,28 @@ background: uiHsl.HSL.create([0, 0, 100]),

const str = (color, ...methods) => methods.reduce((col, method) => method(col), color).toString();
var str = function str(color) {
for (var _len = arguments.length, methods = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
methods[_key - 1] = arguments[_key];
}
const active = color => color.darken(10);
return methods.reduce(function (col, method) {
return method(col);
}, color).toString();
};
const hover = color => color.darken(5).saturate(9); // const fade = (amount: number) => (color: HSL) => color.fade(amount);
var active = function active(color) {
return color.darken(10);
};
var hover = function hover(color) {
return color.darken(5).saturate(9);
}; // const fade = (amount: number) => (color: HSL) => color.fade(amount);
const alpha = amount => color => color.alpha(amount);
const colors = {
var alpha = function alpha(amount) {
return function (color) {
return color.alpha(amount);
};
};
var colors = {
text: str(hsl.text),

@@ -55,3 +73,3 @@ background: str(hsl.background),

'grey:fade': str(hsl.grey, alpha(20)),
default: str(hsl.grey),
"default": str(hsl.grey),
'default:button:hover': str(hsl.grey, hover),

@@ -67,3 +85,3 @@ 'default:button:active': str(hsl.grey, active),

};
const zIndices = {
var zIndices = {
auto: 'auto',

@@ -77,3 +95,3 @@ '0': 0,

};
const letterSpacings = {
var letterSpacings = {
tighter: '-0.05em',

@@ -86,3 +104,3 @@ tight: '-0.025em',

};
const baseLineHeights = {
var baseLineHeights = {
none: '1',

@@ -95,3 +113,3 @@ tight: '1.25',

};
const heading = {
var heading = {
fontFamily: 'heading',

@@ -108,5 +126,5 @@ fontWeight: 'heading',

const baseTheme = {
var baseTheme = {
initialColorMode: 'light',
colors,
colors: colors,
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],

@@ -119,4 +137,4 @@ sizes: [0, 4, 8, 16, 32, 64, 128, 256, 512],

},
zIndices,
letterSpacings,
zIndices: zIndices,
letterSpacings: letterSpacings,
radii: [0, 4, 8, 16, 32, 64, 128],

@@ -140,3 +158,3 @@ fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],

'remirror:buttons': {
default: {
"default": {
backgroundColor: 'light',

@@ -198,3 +216,3 @@ minHeight: 3,

'remirror:icons': {
default: {
"default": {
color: 'text',

@@ -244,20 +262,15 @@ transition: 'all 0.2s',

styles: {
'remirror:editor': {
[coreConstants.EDITOR_CLASS_SELECTOR]: {
caretColor: 'currentColor',
wordWrap: 'break-word',
overflowWrap: 'break-word',
fontSize: 2
},
["".concat(coreConstants.EDITOR_CLASS_SELECTOR, ":focus")]: {
outline: 'none' // boxShadow: 'focus',
'remirror:editor': (_remirrorEditor = {}, _defineProperty(_remirrorEditor, coreConstants.EDITOR_CLASS_SELECTOR, {
caretColor: 'currentColor',
wordWrap: 'break-word',
overflowWrap: 'break-word',
fontSize: 2
}), _defineProperty(_remirrorEditor, "".concat(coreConstants.EDITOR_CLASS_SELECTOR, ":focus"), {
outline: 'none' // boxShadow: 'focus',
},
["".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"false\"]")]: {
whiteSpace: 'normal'
},
["".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"true\"]")]: {
whiteSpace: 'pre-wrap'
}
}
}), _defineProperty(_remirrorEditor, "".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"false\"]"), {
whiteSpace: 'normal'
}), _defineProperty(_remirrorEditor, "".concat(coreConstants.EDITOR_CLASS_SELECTOR, "[contenteditable=\"true\"]"), {
whiteSpace: 'pre-wrap'
}), _remirrorEditor)
}

@@ -264,0 +277,0 @@ };

51

lib/ui-utils.js

@@ -5,4 +5,7 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var coreHelpers = require('@remirror/core-helpers');
var core = require('@emotion/core');
var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
var css = require('@styled-system/css');

@@ -19,3 +22,3 @@

const applyColorMode = (theme, mode) => {
var applyColorMode = function applyColorMode(theme, mode) {
if (!mode) {

@@ -25,3 +28,3 @@ return theme;

const modes = coreHelpers.get('colors.modes', theme, {});
var modes = coreHelpers.get('colors.modes', theme, {});
return coreHelpers.deepMerge(theme, {

@@ -35,3 +38,5 @@ colors: coreHelpers.get(mode, modes, {})

const getColorModes = theme => Object.keys(coreHelpers.get('colors.modes', theme, {}));
var getColorModes = function getColorModes(theme) {
return Object.keys(coreHelpers.get('colors.modes', theme, {}));
};
/**

@@ -41,3 +46,7 @@ * Creates a path getter for the provided theme.

const getFactory = theme => (path, fallback) => coreHelpers.get(path, theme, fallback);
var getFactory = function getFactory(theme) {
return function (path, fallback) {
return coreHelpers.get(path, theme, fallback);
};
};
/**

@@ -47,3 +56,5 @@ * Checks whether an object passed is a serialized style

const isSerializedStyle = val => coreHelpers.isPlainObject(val) && coreHelpers.isString(val.name) && coreHelpers.isString(val.styles);
var isSerializedStyle = function isSerializedStyle(val) {
return coreHelpers.isPlainObject(val) && coreHelpers.isString(val.name) && coreHelpers.isString(val.styles);
};
/**

@@ -53,5 +64,9 @@ * Return true when a theme prop exists on the value passed in.

const hasThemeProp = val => coreHelpers.isPlainObject(val) && coreHelpers.isPlainObject(val.theme);
var hasThemeProp = function hasThemeProp(val) {
return coreHelpers.isPlainObject(val) && coreHelpers.isPlainObject(val.theme);
};
const getTheme = props => hasThemeProp(props) ? props.theme : props;
var getTheme = function getTheme(props) {
return hasThemeProp(props) ? props.theme : props;
};
/**

@@ -74,7 +89,17 @@ * A wrapper around the `@styled-system/css` for composing multiple themed

const sx = (...styles) => props => {
const theme = getTheme(props);
return core.css(styles.map(style => coreHelpers.isArray(style) ? sx(...style)(theme) : coreHelpers.isFunction(style) ? css.css(style(theme))(theme) : isSerializedStyle(style) ? style : coreHelpers.isPlainObject(style) ? css.css(style)(theme) : style));
var sx = function sx() {
for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
styles[_key] = arguments[_key];
}
return function (props) {
var theme = getTheme(props);
return core.css(styles.map(function (style) {
return coreHelpers.isArray(style) ? sx.apply(void 0, _toConsumableArray(style))(theme) : coreHelpers.isFunction(style) ? css.css(style(theme))(theme) : isSerializedStyle(style) ? style : coreHelpers.isPlainObject(style) ? css.css(style)(theme) : style;
}));
};
};
const cssValueUnits = val => coreHelpers.isString(val) ? val.replace(/[0-9 ]+/g, '') : undefined;
var cssValueUnits = function cssValueUnits(val) {
return coreHelpers.isString(val) ? val.replace(/[0-9 ]+/g, '') : undefined;
};
/**

@@ -84,3 +109,5 @@ * Transforms a number to

const numberToPixels = val => cssValueUnits(val) ? "".concat(val).replace(/ /g, '') : "".concat(val, "px");
var numberToPixels = function numberToPixels(val) {
return cssValueUnits(val) ? "".concat(val).replace(/ /g, '') : "".concat(val, "px");
};

@@ -87,0 +114,0 @@ exports.applyColorMode = applyColorMode;

6

package.json

@@ -8,3 +8,3 @@ {

"repository": "https://github.com/remirror/remirror/tree/master/@remirror/ui",
"version": "0.7.5",
"version": "0.7.6",
"main": "lib/index.js",

@@ -21,4 +21,4 @@ "module": "lib/dist/ui.esm.js",

"@remirror/core-constants": "^0.7.4",
"@remirror/core-helpers": "^0.7.5",
"@remirror/core-types": "^0.8.0",
"@remirror/core-helpers": "^0.7.6",
"@remirror/core-types": "^0.9.0",
"@styled-system/css": "^5.0.23",

@@ -25,0 +25,0 @@ "@types/styled-system__css": "^5.0.4",

lib/dist/ui.cjs.js.map

Sorry, the diff of this file is not supported yet

lib/dist/ui.esm.js.map

Sorry, the diff of this file is not supported yet

lib/ui-context.js.map

Sorry, the diff of this file is not supported yet

lib/ui-hooks.js.map

Sorry, the diff of this file is not supported yet

lib/ui-hsl.js.map

Sorry, the diff of this file is not supported yet

lib/ui-provider.js.map

Sorry, the diff of this file is not supported yet

lib/ui-theme-root.js.map

Sorry, the diff of this file is not supported yet

lib/ui-theme.js.map

Sorry, the diff of this file is not supported yet

lib/ui-utils.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc