simpler-color - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

es/color/transforms/rgbToHsl.js

@@ -6,4 +6,2 @@ "use strict";
 
-require("../../utils");
-
 var _rgb = require("../rgb");
@@ -10,0 +8,0 @@

es/index.js

@@ -6,3 +6,3 @@ "use strict";
 exports.__esModule = true;
-exports.triad = exports.saturation = exports.rotation = exports.palette = exports.opacity = exports.normalize = exports.lightness = exports.harmony = exports.complement = exports.colorSet = exports.colorScheme = exports.analogue = void 0;
+exports.triad = exports.saturation = exports.rotation = exports.rgbToHsl = exports.rgb = exports.palette = exports.opacity = exports.normalize = exports.lightness = exports.isRgb = exports.isHsl = exports.hslToRgb = exports.hsl = exports.harmony = exports.complement = exports.colorSet = exports.colorScheme = exports.analogue = void 0;
 
@@ -52,2 +52,24 @@ var _colorScheme = _interopRequireDefault(require("./colorScheme"));
 
-exports.harmony = _harmony.default;
+exports.harmony = _harmony.default;
+
+var _hsl = _interopRequireWildcard(require("./color/hsl"));
+
+exports.hsl = _hsl.default;
+exports.isHsl = _hsl.isHsl;
+
+var _rgb = _interopRequireWildcard(require("./color/rgb"));
+
+exports.rgb = _rgb.default;
+exports.isRgb = _rgb.isRgb;
+
+var _hslToRgb = _interopRequireDefault(require("./color/transforms/hslToRgb"));
+
+exports.hslToRgb = _hslToRgb.default;
+
+var _rgbToHsl = _interopRequireDefault(require("./color/transforms/rgbToHsl"));
+
+exports.rgbToHsl = _rgbToHsl.default;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

lib/color/transforms/rgbToHsl.js

@@ -6,4 +6,2 @@ "use strict";
 
-require("../../utils");
-
 var _rgb = require("../rgb");
@@ -10,0 +8,0 @@

lib/index.js

@@ -6,3 +6,3 @@ "use strict";
 exports.__esModule = true;
-exports.triad = exports.saturation = exports.rotation = exports.palette = exports.opacity = exports.normalize = exports.lightness = exports.harmony = exports.complement = exports.colorSet = exports.colorScheme = exports.analogue = void 0;
+exports.triad = exports.saturation = exports.rotation = exports.rgbToHsl = exports.rgb = exports.palette = exports.opacity = exports.normalize = exports.lightness = exports.isRgb = exports.isHsl = exports.hslToRgb = exports.hsl = exports.harmony = exports.complement = exports.colorSet = exports.colorScheme = exports.analogue = void 0;
 
@@ -52,2 +52,24 @@ var _colorScheme = _interopRequireDefault(require("./colorScheme"));
 
-exports.harmony = _harmony.default;
+exports.harmony = _harmony.default;
+
+var _hsl = _interopRequireWildcard(require("./color/hsl"));
+
+exports.hsl = _hsl.default;
+exports.isHsl = _hsl.isHsl;
+
+var _rgb = _interopRequireWildcard(require("./color/rgb"));
+
+exports.rgb = _rgb.default;
+exports.isRgb = _rgb.isRgb;
+
+var _hslToRgb = _interopRequireDefault(require("./color/transforms/hslToRgb"));
+
+exports.hslToRgb = _hslToRgb.default;
+
+var _rgbToHsl = _interopRequireDefault(require("./color/transforms/rgbToHsl"));
+
+exports.rgbToHsl = _rgbToHsl.default;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package.json

 {
   "name": "simpler-color",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Simpler Color - Create your own complete color system fast and easy!",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -19,3 +19,3 @@ # Simpler Color
 
-**Step 1:** Install simpler-color
+**Step 1:** Install Simpler Color
 
@@ -37,3 +37,3 @@ ```
 
-**—OR—** just give simpler-color ONE base color, and it will generate the rest!
+**—OR—** just give Simpler Color ONE base color, and it will generate the rest!
 
@@ -87,3 +87,3 @@ ```js
 
-Palettes are automatically created by simpler-color based on your specified base colors. By default, it generates **tonal** palettes, with specific tones accessed by passing a numeric key between 0 and 100, which represents % _lightness_ (0 = black, 100 = white). Any value in between generates a specific shade of the base color. So, for example, if your `primary` palette is based on green (like in the illustration above), `primary(40)` gives you green with 40% lightness.
+Palettes are automatically created by Simpler Color based on your specified base colors. By default, it generates **tonal** palettes, with specific tones accessed by passing a numeric key between 0 and 100, which represents % _lightness_ (0 = black, 100 = white). Any value in between generates a specific shade of the base color. So, for example, if your `primary` palette is based on green (like in the illustration above), `primary(40)` gives you green with 40% lightness.
 
@@ -108,3 +108,3 @@ You can, of course, define your own color mapping function to override the default. This also means that you can define a completely different set of color keys, which can be any of these common alternatives:
 
-To ensure consistency of your color set, simpler-color enforces that you use the same set of color keys (and thus the same color mapping function) across all your palettes.
+To ensure consistency of your color set, Simpler Color enforces that you use the same set of color keys (and thus the same color mapping function) across all your palettes.
 
@@ -124,32 +124,24 @@ ### Color Scheme
 
-The final step is to map each UI role to a specific color value from one of the palettes in your color set. Each such mapping gives us one color scheme. By using a consistent set of color roles, simpler-color helps ensure that your UI can easily and safely switch between color schemes.
+The final step is to map each UI role to a specific color value from one of the palettes in your color set. Each such mapping gives us one color scheme. By using a consistent set of color roles, Simpler Color helps ensure that your UI can easily and safely switch between color schemes.
 
 ## Recipes
 
-### Defining a custom color mapping function
+- [Using the built-in color mapping functions](#built-ins)
+  - [Lightness](#lightness)
+  - [Saturation](#saturation)
+  - [Rotation](#rotation)
+  - [Analogue](#analogue)
+  - [Complement](#complement)
+  - [Triad](#triad)
+  - [Opacity](#opacity)
+- [Defining a custom color mapping function](#custom-colormap)
 
-```js
-import { complement, saturation } from 'simpler-color'
+<a name="built-ins"></a>
 
-function awesomeColor(baseColor, key) {
-  return complement(saturation(baseColor, 80), key)
-}
+### Using the built-in color mapping functions
 
-const uiColors = colorScheme(
-  'blue',
-  colors => ({
-    primaryButton: colors.primary(0),
-    floatingActionButton: colors.primary(2),
-    ...etc,
-  }),
-  {
-    colorMapping: awesomeColor, // 👈
-  },
-)
-```
+Color mapping functions are not only used to generate entire palettes, but also to calculate individual colors, such as palette base colors, based on another. This helps you ensure that base colors for your other palettes are "visually harmonious" with your primary palette's.
 
-### Using the built-in color mapping functions
+The format is always `fn(baseColor, key)` where the valid `key` values vary depending on the function. They can also be nested to perform more complex calculations.
 
-Color mapping functions are not only used to generate entire palettes, but also to calculate individual colors based on another. The format is always `fn(baseColor, key)` where the valid `key` values vary depending on the function. They can also be nested to perform more complex calculations.
-
 ```js
@@ -166,21 +158,23 @@ import { analogue, complement, saturation } from 'simpler-color'
 
-#### Saturation
+Below is the description of each of the built-in color mapping functions:
 
-<img src="./docs/assets/saturation.png" alt="saturation scale of green" height="50"/>
+#### Lightness
 
+<img src="./docs/assets/palette.png" alt="lightness scale of green" height="50"/>
+
 ```js
-saturation(baseColor, percentSaturation)
+lightness(baseColor, percentLightness)
 ```
 
-Generates a new color value by adjusting the base color's % saturation (the "S" value in HSL color).
+Generates a new color value by adjusting the base color's % lightness (the "L" value in HSL color). This is the default color mapping used to generate tonal palettes.
 
-#### Lightness
+#### Saturation
 
-<img src="./docs/assets/palette.png" alt="lightness scale of green" height="50"/>
+<img src="./docs/assets/saturation.png" alt="saturation scale of green" height="50"/>
 
 ```js
-lightness(baseColor, percentLightness)
+saturation(baseColor, percentSaturation)
 ```
 
-Generates a new color value by adjusting the base color's % lightness (the "L" value in HSL color). This is the default color mapping used to generate tonal palettes.
+Generates a new color value by adjusting the base color's % saturation (the "S" value in HSL color).
 
@@ -240,1 +234,49 @@ #### Rotation
 Generates a new color value by adjusting the base color's opacity (the alpha or "A" value in RGBA) between 0 (transparent) and 1 (opaque).
+
+[Back to recipes](#recipes)
+
+<a name="custom-colormap"></a>
+
+### Defining a custom color mapping function
+
+Although the default color mapping function already gives you great looking tonal palettes, sometimes your color system might require a different approach, such as:
+
+- a different set of color keys (e.g. strings or discrete numbers)
+- a different formula for calculating colors in your palettes
+
+This is where a custom color mapping function comes in. For example, here is a modified version of the default (`lightness`) color mapping function that accepts a string for `key` instead of a number from 0-100.
+
+```js
+import { lightness } from 'simpler-color'
+
+function shade(baseColor, key) {
+  const lightnessValues = {
+    darker: 10,
+    dark: 30,
+    main: 40,
+    light: 60,
+    lighter: 80,
+  }
+  return lightness(baseColor, lightnessValues[key])
+}
+```
+
+You can then tell Simpler Color to use this custom color mapping instead of the default:
+
+```js
+const uiColors = colorScheme(
+  'blue',
+  colors => ({
+    // notice the color keys used   👇
+    primaryButton: colors.primary('main'),
+    floatingActionButton: colors.accent('light'),
+    navBar: colors.secondary('lighter'),
+    ...etc,
+  }),
+  {
+    colorMapping: shade, // 👈 custom color mapping
+  },
+)
+```
+
+[Back to recipes](#recipes)

types/color/transforms/rgbToHsl.d.ts

@@ -0,3 +1,3 @@
+import { RGB } from '../rgb';
 import type { HSL } from '../hsl';
-import { RGB } from '../rgb';
 /**
@@ -4,0 +4,0 @@ * Converts from RGB to HSL color model

types/index.d.ts

@@ -13,2 +13,6 @@ export { default as colorScheme } from './colorScheme';
 export { default as harmony } from './presets/harmony';
+export { default as hsl, isHsl } from './color/hsl';
+export { default as rgb, isRgb } from './color/rgb';
+export { default as hslToRgb } from './color/transforms/hslToRgb';
+export { default as rgbToHsl } from './color/transforms/rgbToHsl';
 export type { ColorRoleMapping, ColorScheme, ColorSchemeOptions, } from './colorScheme';
@@ -18,1 +22,3 @@ export type { BaseColors, ColorSet } from './colorSet';
 export type { HarmonyBaseColors, HarmonyColors } from './presets/harmony';
+export type { HSL } from './color/hsl';
+export type { RGB } from './color/rgb';

No alert changes

Improved metrics

Total package byte prevSize

102894

increased by5.25%

Lines of code

2251

increased by1.44%

Number of lines in readme file

276

increased by17.95%

No dependency changes