@react-style-system/core - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

index.esm.js

 import React, { createContext, useMemo, useContext } from 'react';
-import parseToRgba from '@ricokahler/parse-to-rgba';
+import { readableColor, getContrast } from 'color2k';
+export * from 'color2k';
 
@@ -20,73 +21,2 @@ var ColorContext = createContext(null);
 
-// https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js
-
-/**
- * Returns a number (float) representing the luminance of a color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',
- *   background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
- *                             'rgba(58, 133, 255, 1)' :
- *                             'rgba(255, 57, 149, 1)',
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};
- *   background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
- *                             'rgba(58, 133, 255, 1)' :
- *                             'rgba(255, 57, 149, 1)'};
- *
- * // CSS in JS Output
- *
- * div {
- *   background: "#CCCD64";
- *   background: "rgba(58, 133, 255, 1)";
- * }
- */
-
-function getLuminance(color) {
-  if (color === 'transparent') return 0;
-
-  function f(x) {
-    const channel = x / 255;
-    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
-  }
-
-  const parsed = parseToRgba(color);
-
-  if (!parsed) {
-    throw new Error(`Could not parse color "${color}"`);
-  }
-
-  const [r, g, b] = parsed;
-  return parseFloat((0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)).toFixed(3));
-}
-
-// taken from:
-/**
- * Returns black or white for best contrast depending on the luminosity of the given color.
- */
-
-function readableColor(color) {
-  return getLuminance(color) > 0.179 ? '#000' : '#fff';
-}
-
-// taken from:
-/**
- * Returns the contrast ratio between two colors based on
- * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).
- *
- * @example
- * const contrastRatio = getContrast('#444', '#fff');
- */
-
-function getContrast(color1, color2) {
-  const luminance1 = getLuminance(color1);
-  const luminance2 = getLuminance(color2);
-  return parseFloat((luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05)).toFixed(2));
-}
-
 const hasBadDecorativeContrast = (a, b) => getContrast(a, b) < 1.5;
@@ -159,3 +89,3 @@
 
-export { ColorContext, ColorContextProvider, ThemeContext, ThemeProvider, createReadablePalette, css, getContrast, getLuminance, readableColor, useColorContext, useTheme };
+export { ColorContext, ColorContextProvider, ThemeContext, ThemeProvider, createReadablePalette, css, useColorContext, useTheme };
 //# sourceMappingURL=index.esm.js.map

index.esm.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.esm.js","sources":["../../packages/core/src/ColorContext.ts","../../packages/core/src/ColorContextProvider.tsx","../../packages/core/src/getLuminance.ts","../../packages/core/src/readableColor.ts","../../packages/core/src/getContrast.ts","../../packages/core/src/createReadablePalette.ts","../../packages/core/src/ThemeContext.ts","../../packages/core/src/ThemeProvider.tsx","../../packages/core/src/useColorContext.ts","../../packages/core/src/useTheme.ts","../../packages/core/src/css.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { ColorContextValue } from './types';\n\nexport default createContext<ColorContextValue | null>(null);\n","import React, { useMemo } from 'react';\nimport ColorContext from './ColorContext';\n\ninterface Props {\n  color: string;\n  surface: string;\n  children: React.ReactNode;\n}\n\nfunction ColorContextProvider({ color, surface, children }: Props) {\n  const contextValue = useMemo(() => ({ color, surface }), [color, surface]);\n  return (\n    <ColorContext.Provider value={contextValue}>\n      {children}\n    </ColorContext.Provider>\n  );\n}\n\nexport default ColorContextProvider;\n","import parseToRgba from '@ricokahler/parse-to-rgba';\n// taken from:\n// https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js\n\n/**\n * Returns a number (float) representing the luminance of a color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n *   background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',\n *   background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?\n *                             'rgba(58, 133, 255, 1)' :\n *                             'rgba(255, 57, 149, 1)',\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n *   background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};\n *   background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?\n *                             'rgba(58, 133, 255, 1)' :\n *                             'rgba(255, 57, 149, 1)'};\n *\n * // CSS in JS Output\n *\n * div {\n *   background: \"#CCCD64\";\n *   background: \"rgba(58, 133, 255, 1)\";\n * }\n */\nexport default function getLuminance(color: string): number {\n  if (color === 'transparent') return 0;\n\n  function f(x: number) {\n    const channel = x / 255;\n    return channel <= 0.03928\n      ? channel / 12.92\n      : ((channel + 0.055) / 1.055) ** 2.4;\n  }\n\n  const parsed = parseToRgba(color);\n\n  if (!parsed) {\n    throw new Error(`Could not parse color \"${color}\"`);\n  }\n\n  const [r, g, b] = parsed;\n  return parseFloat((0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)).toFixed(3));\n}\n","// taken from:\n// https://github.com/styled-components/polished/blob/6f72ff07eed0bb63ada17369fde4986c9389e5f9/src/color/readableColor.js\nimport getLuminance from './getLuminance';\n\n/**\n * Returns black or white for best contrast depending on the luminosity of the given color.\n */\nexport default function readableColor(color: string): string {\n  return getLuminance(color) > 0.179 ? '#000' : '#fff';\n}\n","// taken from:\n// https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getContrast.js\nimport getLuminance from './getLuminance';\n\n/**\n * Returns the contrast ratio between two colors based on\n * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).\n *\n * @example\n * const contrastRatio = getContrast('#444', '#fff');\n */\nexport default function getContrast(color1: string, color2: string): number {\n  const luminance1 = getLuminance(color1);\n  const luminance2 = getLuminance(color2);\n  return parseFloat(\n    (luminance1 > luminance2\n      ? (luminance1 + 0.05) / (luminance2 + 0.05)\n      : (luminance2 + 0.05) / (luminance1 + 0.05)\n    ).toFixed(2),\n  );\n}\n","import readableColor from './readableColor';\nimport getContrast from './getContrast';\n\nimport { ReadableColorPalette } from './types';\n\nconst hasBadDecorativeContrast = (a: string, b: string) =>\n  getContrast(a, b) < 1.5;\nconst hasBadReadableContrast = (a: string, b: string) => getContrast(a, b) < 3;\nconst hasBadAaContrast = (a: string, b: string) => getContrast(a, b) < 4.5;\nconst hasBadAaaContrast = (a: string, b: string) => getContrast(a, b) < 7;\n\nfunction createReadablePalette(\n  color: string,\n  surface = '#fff',\n): ReadableColorPalette {\n  const readableContrast = readableColor(surface);\n\n  return {\n    original: color,\n    decorative: hasBadDecorativeContrast(color, surface)\n      ? readableContrast\n      : color,\n    readable: hasBadReadableContrast(color, surface) ? readableContrast : color,\n    aa: hasBadAaContrast(color, surface) ? readableContrast : color,\n    aaa: hasBadAaaContrast(color, surface) ? readableContrast : color,\n  };\n}\n\nexport default createReadablePalette;\n","import { createContext } from 'react';\nexport default createContext<unknown>(null);\n","import React from 'react';\nimport ThemeContext from './ThemeContext';\n\ninterface Props {\n  theme: unknown;\n  children: React.ReactNode;\n}\n\nfunction ThemeProvider({ theme, children }: Props) {\n  return (\n    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n","import { useContext, useMemo } from 'react';\nimport ColorContext from './ColorContext';\nimport createReadablePalette from './createReadablePalette';\n\ninterface Props {\n  color?: string;\n  surface?: string;\n}\n\nfunction useColorContext(props?: Props) {\n  const colorContext = useContext(ColorContext);\n\n  if (!colorContext) {\n    throw new Error(\n      'Could not find color context. Ensure this component is wrapped in a ColorContextProvider.',\n    );\n  }\n\n  const color = props?.color || colorContext.color;\n  const surface = props?.surface || colorContext.surface;\n\n  return useMemo(\n    () => ({\n      color: createReadablePalette(color, surface),\n      surface,\n    }),\n    [color, surface],\n  );\n}\n\nexport default useColorContext;\n","import { useContext } from 'react';\nimport ThemeContext from './ThemeContext';\n\nfunction useTheme<T>(): T {\n  const theme = useContext(ThemeContext) as T | null;\n\n  if (!theme) {\n    throw new Error(\n      'Could not find theme. Ensure this component is wrapped in a ThemeProvider',\n    );\n  }\n\n  return theme;\n}\n\nexport default useTheme;\n","function css(strings: TemplateStringsArray, ...values: Array<string | number>) {\n  let combined = '';\n\n  for (let i = 0; i < strings.length; i += 1) {\n    const currentString = strings[i];\n    const currentValue = values[i] || '';\n    combined += currentString + currentValue;\n  }\n\n  return combined;\n}\n\nexport default css;\n"],"names":["createContext","ColorContextProvider","color","surface","children","contextValue","useMemo","getLuminance","f","x","channel","parsed","parseToRgba","Error","r","g","b","parseFloat","toFixed","readableColor","getContrast","color1","color2","luminance1","luminance2","hasBadDecorativeContrast","a","hasBadReadableContrast","hasBadAaContrast","hasBadAaaContrast","createReadablePalette","readableContrast","original","decorative","readable","aa","aaa","ThemeProvider","theme","useColorContext","props","colorContext","useContext","ColorContext","useTheme","ThemeContext","css","strings","values","combined","i","length","currentString","currentValue"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../packages/core/src/ColorContext.ts","../../packages/core/src/ColorContextProvider.tsx","../../packages/core/src/createReadablePalette.ts","../../packages/core/src/ThemeContext.ts","../../packages/core/src/ThemeProvider.tsx","../../packages/core/src/useColorContext.ts","../../packages/core/src/useTheme.ts","../../packages/core/src/css.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { ColorContextValue } from './types';\n\nexport default createContext<ColorContextValue | null>(null);\n","import React, { useMemo } from 'react';\nimport ColorContext from './ColorContext';\n\ninterface Props {\n  color: string;\n  surface: string;\n  children: React.ReactNode;\n}\n\nfunction ColorContextProvider({ color, surface, children }: Props) {\n  const contextValue = useMemo(() => ({ color, surface }), [color, surface]);\n  return (\n    <ColorContext.Provider value={contextValue}>\n      {children}\n    </ColorContext.Provider>\n  );\n}\n\nexport default ColorContextProvider;\n","import { readableColor, getContrast } from 'color2k';\nimport { ReadableColorPalette } from './types';\n\nconst hasBadDecorativeContrast = (a: string, b: string) =>\n  getContrast(a, b) < 1.5;\nconst hasBadReadableContrast = (a: string, b: string) => getContrast(a, b) < 3;\nconst hasBadAaContrast = (a: string, b: string) => getContrast(a, b) < 4.5;\nconst hasBadAaaContrast = (a: string, b: string) => getContrast(a, b) < 7;\n\nfunction createReadablePalette(\n  color: string,\n  surface = '#fff',\n): ReadableColorPalette {\n  const readableContrast = readableColor(surface);\n\n  return {\n    original: color,\n    decorative: hasBadDecorativeContrast(color, surface)\n      ? readableContrast\n      : color,\n    readable: hasBadReadableContrast(color, surface) ? readableContrast : color,\n    aa: hasBadAaContrast(color, surface) ? readableContrast : color,\n    aaa: hasBadAaaContrast(color, surface) ? readableContrast : color,\n  };\n}\n\nexport default createReadablePalette;\n","import { createContext } from 'react';\nexport default createContext<unknown>(null);\n","import React from 'react';\nimport ThemeContext from './ThemeContext';\n\ninterface Props {\n  theme: unknown;\n  children: React.ReactNode;\n}\n\nfunction ThemeProvider({ theme, children }: Props) {\n  return (\n    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n","import { useContext, useMemo } from 'react';\nimport ColorContext from './ColorContext';\nimport createReadablePalette from './createReadablePalette';\n\ninterface Props {\n  color?: string;\n  surface?: string;\n}\n\nfunction useColorContext(props?: Props) {\n  const colorContext = useContext(ColorContext);\n\n  if (!colorContext) {\n    throw new Error(\n      'Could not find color context. Ensure this component is wrapped in a ColorContextProvider.',\n    );\n  }\n\n  const color = props?.color || colorContext.color;\n  const surface = props?.surface || colorContext.surface;\n\n  return useMemo(\n    () => ({\n      color: createReadablePalette(color, surface),\n      surface,\n    }),\n    [color, surface],\n  );\n}\n\nexport default useColorContext;\n","import { useContext } from 'react';\nimport ThemeContext from './ThemeContext';\n\nfunction useTheme<T>(): T {\n  const theme = useContext(ThemeContext) as T | null;\n\n  if (!theme) {\n    throw new Error(\n      'Could not find theme. Ensure this component is wrapped in a ThemeProvider',\n    );\n  }\n\n  return theme;\n}\n\nexport default useTheme;\n","function css(strings: TemplateStringsArray, ...values: Array<string | number>) {\n  let combined = '';\n\n  for (let i = 0; i < strings.length; i += 1) {\n    const currentString = strings[i];\n    const currentValue = values[i] || '';\n    combined += currentString + currentValue;\n  }\n\n  return combined;\n}\n\nexport default css;\n"],"names":["createContext","ColorContextProvider","color","surface","children","contextValue","useMemo","hasBadDecorativeContrast","a","b","getContrast","hasBadReadableContrast","hasBadAaContrast","hasBadAaaContrast","createReadablePalette","readableContrast","readableColor","original","decorative","readable","aa","aaa","ThemeProvider","theme","useColorContext","props","colorContext","useContext","ColorContext","Error","useTheme","ThemeContext","css","strings","values","combined","i","length","currentString","currentValue"],"mappings":"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"}

index.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@ricokahler/parse-to-rgba')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@ricokahler/parse-to-rgba'], factory) :
-  (global = global || self, factory(global.ReactStyleSystem = {}, global.React, global.parseToRgba));
-}(this, (function (exports, React, parseToRgba) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('color2k')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'color2k'], factory) :
+  (global = global || self, factory(global.ReactStyleSystem = {}, global.React, global.color2k));
+}(this, (function (exports, React, color2k) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
-  parseToRgba = parseToRgba && Object.prototype.hasOwnProperty.call(parseToRgba, 'default') ? parseToRgba['default'] : parseToRgba;
 
@@ -27,147 +26,16 @@ var ColorContext = React.createContext(null);
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
-
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
-
-  function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
-
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-
-    return _arr;
-  }
-
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  // https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js
-
-  /**
-   * Returns a number (float) representing the luminance of a color.
-   *
-   * @example
-   * // Styles as object usage
-   * const styles = {
-   *   background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',
-   *   background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
-   *                             'rgba(58, 133, 255, 1)' :
-   *                             'rgba(255, 57, 149, 1)',
-   * }
-   *
-   * // styled-components usage
-   * const div = styled.div`
-   *   background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};
-   *   background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
-   *                             'rgba(58, 133, 255, 1)' :
-   *                             'rgba(255, 57, 149, 1)'};
-   *
-   * // CSS in JS Output
-   *
-   * div {
-   *   background: "#CCCD64";
-   *   background: "rgba(58, 133, 255, 1)";
-   * }
-   */
-
-  function getLuminance(color) {
-    if (color === 'transparent') return 0;
-
-    function f(x) {
-      var channel = x / 255;
-      return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
-    }
-
-    var parsed = parseToRgba(color);
-
-    if (!parsed) {
-      throw new Error("Could not parse color \"".concat(color, "\""));
-    }
-
-    var _parsed = _slicedToArray(parsed, 3),
-        r = _parsed[0],
-        g = _parsed[1],
-        b = _parsed[2];
-
-    return parseFloat((0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)).toFixed(3));
-  }
-
-  // taken from:
-  /**
-   * Returns black or white for best contrast depending on the luminosity of the given color.
-   */
-
-  function readableColor(color) {
-    return getLuminance(color) > 0.179 ? '#000' : '#fff';
-  }
-
-  // taken from:
-  /**
-   * Returns the contrast ratio between two colors based on
-   * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).
-   *
-   * @example
-   * const contrastRatio = getContrast('#444', '#fff');
-   */
-
-  function getContrast(color1, color2) {
-    var luminance1 = getLuminance(color1);
-    var luminance2 = getLuminance(color2);
-    return parseFloat((luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05)).toFixed(2));
-  }
-
   var hasBadDecorativeContrast = function hasBadDecorativeContrast(a, b) {
-    return getContrast(a, b) < 1.5;
+    return color2k.getContrast(a, b) < 1.5;
   };
 
   var hasBadReadableContrast = function hasBadReadableContrast(a, b) {
-    return getContrast(a, b) < 3;
+    return color2k.getContrast(a, b) < 3;
   };
 
   var hasBadAaContrast = function hasBadAaContrast(a, b) {
-    return getContrast(a, b) < 4.5;
+    return color2k.getContrast(a, b) < 4.5;
   };
 
   var hasBadAaaContrast = function hasBadAaaContrast(a, b) {
-    return getContrast(a, b) < 7;
+    return color2k.getContrast(a, b) < 7;
   };
@@ -177,3 +45,3 @@
     var surface = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#fff';
-    var readableContrast = readableColor(surface);
+    var readableContrast = color2k.readableColor(surface);
     return {
@@ -237,2 +105,10 @@ original: color,
 
+  Object.keys(color2k).forEach(function (k) {
+    if (k !== 'default') Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: function () {
+        return color2k[k];
+      }
+    });
+  });
   exports.ColorContext = ColorContext;
@@ -244,5 +120,2 @@ exports.ColorContextProvider = ColorContextProvider;
   exports.css = css;
-  exports.getContrast = getContrast;
-  exports.getLuminance = getLuminance;
-  exports.readableColor = readableColor;
   exports.useColorContext = useColorContext;
@@ -249,0 +122,0 @@ exports.useTheme = useTheme;

index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../../packages/core/src/ColorContext.ts","../../packages/core/src/ColorContextProvider.tsx","../../packages/core/src/getLuminance.ts","../../packages/core/src/readableColor.ts","../../packages/core/src/getContrast.ts","../../packages/core/src/createReadablePalette.ts","../../packages/core/src/ThemeContext.ts","../../packages/core/src/ThemeProvider.tsx","../../packages/core/src/useColorContext.ts","../../packages/core/src/useTheme.ts","../../packages/core/src/css.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { ColorContextValue } from './types';\n\nexport default createContext<ColorContextValue | null>(null);\n","import React, { useMemo } from 'react';\nimport ColorContext from './ColorContext';\n\ninterface Props {\n  color: string;\n  surface: string;\n  children: React.ReactNode;\n}\n\nfunction ColorContextProvider({ color, surface, children }: Props) {\n  const contextValue = useMemo(() => ({ color, surface }), [color, surface]);\n  return (\n    <ColorContext.Provider value={contextValue}>\n      {children}\n    </ColorContext.Provider>\n  );\n}\n\nexport default ColorContextProvider;\n","import parseToRgba from '@ricokahler/parse-to-rgba';\n// taken from:\n// https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js\n\n/**\n * Returns a number (float) representing the luminance of a color.\n *\n * @example\n * // Styles as object usage\n * const styles = {\n *   background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',\n *   background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?\n *                             'rgba(58, 133, 255, 1)' :\n *                             'rgba(255, 57, 149, 1)',\n * }\n *\n * // styled-components usage\n * const div = styled.div`\n *   background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};\n *   background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?\n *                             'rgba(58, 133, 255, 1)' :\n *                             'rgba(255, 57, 149, 1)'};\n *\n * // CSS in JS Output\n *\n * div {\n *   background: \"#CCCD64\";\n *   background: \"rgba(58, 133, 255, 1)\";\n * }\n */\nexport default function getLuminance(color: string): number {\n  if (color === 'transparent') return 0;\n\n  function f(x: number) {\n    const channel = x / 255;\n    return channel <= 0.03928\n      ? channel / 12.92\n      : ((channel + 0.055) / 1.055) ** 2.4;\n  }\n\n  const parsed = parseToRgba(color);\n\n  if (!parsed) {\n    throw new Error(`Could not parse color \"${color}\"`);\n  }\n\n  const [r, g, b] = parsed;\n  return parseFloat((0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b)).toFixed(3));\n}\n","// taken from:\n// https://github.com/styled-components/polished/blob/6f72ff07eed0bb63ada17369fde4986c9389e5f9/src/color/readableColor.js\nimport getLuminance from './getLuminance';\n\n/**\n * Returns black or white for best contrast depending on the luminosity of the given color.\n */\nexport default function readableColor(color: string): string {\n  return getLuminance(color) > 0.179 ? '#000' : '#fff';\n}\n","// taken from:\n// https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getContrast.js\nimport getLuminance from './getLuminance';\n\n/**\n * Returns the contrast ratio between two colors based on\n * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).\n *\n * @example\n * const contrastRatio = getContrast('#444', '#fff');\n */\nexport default function getContrast(color1: string, color2: string): number {\n  const luminance1 = getLuminance(color1);\n  const luminance2 = getLuminance(color2);\n  return parseFloat(\n    (luminance1 > luminance2\n      ? (luminance1 + 0.05) / (luminance2 + 0.05)\n      : (luminance2 + 0.05) / (luminance1 + 0.05)\n    ).toFixed(2),\n  );\n}\n","import readableColor from './readableColor';\nimport getContrast from './getContrast';\n\nimport { ReadableColorPalette } from './types';\n\nconst hasBadDecorativeContrast = (a: string, b: string) =>\n  getContrast(a, b) < 1.5;\nconst hasBadReadableContrast = (a: string, b: string) => getContrast(a, b) < 3;\nconst hasBadAaContrast = (a: string, b: string) => getContrast(a, b) < 4.5;\nconst hasBadAaaContrast = (a: string, b: string) => getContrast(a, b) < 7;\n\nfunction createReadablePalette(\n  color: string,\n  surface = '#fff',\n): ReadableColorPalette {\n  const readableContrast = readableColor(surface);\n\n  return {\n    original: color,\n    decorative: hasBadDecorativeContrast(color, surface)\n      ? readableContrast\n      : color,\n    readable: hasBadReadableContrast(color, surface) ? readableContrast : color,\n    aa: hasBadAaContrast(color, surface) ? readableContrast : color,\n    aaa: hasBadAaaContrast(color, surface) ? readableContrast : color,\n  };\n}\n\nexport default createReadablePalette;\n","import { createContext } from 'react';\nexport default createContext<unknown>(null);\n","import React from 'react';\nimport ThemeContext from './ThemeContext';\n\ninterface Props {\n  theme: unknown;\n  children: React.ReactNode;\n}\n\nfunction ThemeProvider({ theme, children }: Props) {\n  return (\n    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n","import { useContext, useMemo } from 'react';\nimport ColorContext from './ColorContext';\nimport createReadablePalette from './createReadablePalette';\n\ninterface Props {\n  color?: string;\n  surface?: string;\n}\n\nfunction useColorContext(props?: Props) {\n  const colorContext = useContext(ColorContext);\n\n  if (!colorContext) {\n    throw new Error(\n      'Could not find color context. Ensure this component is wrapped in a ColorContextProvider.',\n    );\n  }\n\n  const color = props?.color || colorContext.color;\n  const surface = props?.surface || colorContext.surface;\n\n  return useMemo(\n    () => ({\n      color: createReadablePalette(color, surface),\n      surface,\n    }),\n    [color, surface],\n  );\n}\n\nexport default useColorContext;\n","import { useContext } from 'react';\nimport ThemeContext from './ThemeContext';\n\nfunction useTheme<T>(): T {\n  const theme = useContext(ThemeContext) as T | null;\n\n  if (!theme) {\n    throw new Error(\n      'Could not find theme. Ensure this component is wrapped in a ThemeProvider',\n    );\n  }\n\n  return theme;\n}\n\nexport default useTheme;\n","function css(strings: TemplateStringsArray, ...values: Array<string | number>) {\n  let combined = '';\n\n  for (let i = 0; i < strings.length; i += 1) {\n    const currentString = strings[i];\n    const currentValue = values[i] || '';\n    combined += currentString + currentValue;\n  }\n\n  return combined;\n}\n\nexport default css;\n"],"names":["createContext","ColorContextProvider","color","surface","children","contextValue","useMemo","React","getLuminance","f","x","channel","parsed","parseToRgba","Error","r","g","b","parseFloat","toFixed","readableColor","getContrast","color1","color2","luminance1","luminance2","hasBadDecorativeContrast","a","hasBadReadableContrast","hasBadAaContrast","hasBadAaaContrast","createReadablePalette","readableContrast","original","decorative","readable","aa","aaa","ThemeProvider","theme","useColorContext","props","colorContext","useContext","ColorContext","useTheme","ThemeContext","css","strings","combined","i","length","currentString","currentValue"],"mappings":";;;;;;;;;AAGA,qBAAeA,mBAAa,CAA2B,IAA3B,CAA5B;;ECMA,SAASC,oBAAT,OAAmE;EAAA,MAAnCC,KAAmC,QAAnCA,KAAmC;EAAA,MAA5BC,OAA4B,QAA5BA,OAA4B;EAAA,MAAnBC,QAAmB,QAAnBA,QAAmB;EACjE,MAAMC,YAAY,GAAGC,aAAO,CAAC;EAAA,WAAO;EAAEJ,MAAAA,KAAK,EAALA,KAAF;EAASC,MAAAA,OAAO,EAAPA;EAAT,KAAP;EAAA,GAAD,EAA6B,CAACD,KAAD,EAAQC,OAAR,CAA7B,CAA5B;EACA,sBACEI,6BAAC,YAAD,CAAc,QAAd;EAAuB,IAAA,KAAK,EAAEF;EAA9B,KACGD,QADH,CADF;EAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECdD;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0Be,SAASI,YAAT,CAAsBN,KAAtB,EAA6C;EAC1D,MAAIA,KAAK,KAAK,aAAd,EAA6B,OAAO,CAAP;;EAE7B,WAASO,CAAT,CAAWC,CAAX,EAAsB;EACpB,QAAMC,OAAO,GAAGD,CAAC,GAAG,GAApB;EACA,WAAOC,OAAO,IAAI,OAAX,GACHA,OAAO,GAAG,KADP,YAEF,CAACA,OAAO,GAAG,KAAX,IAAoB,KAFlB,EAE4B,GAF5B,CAAP;EAGD;;EAED,MAAMC,MAAM,GAAGC,WAAW,CAACX,KAAD,CAA1B;;EAEA,MAAI,CAACU,MAAL,EAAa;EACX,UAAM,IAAIE,KAAJ,mCAAoCZ,KAApC,QAAN;EACD;;EAdyD,+BAgBxCU,MAhBwC;EAAA,MAgBnDG,CAhBmD;EAAA,MAgBhDC,CAhBgD;EAAA,MAgB7CC,CAhB6C;;EAiB1D,SAAOC,UAAU,CAAC,CAAC,SAAST,CAAC,CAACM,CAAD,CAAV,GAAgB,SAASN,CAAC,CAACO,CAAD,CAA1B,GAAgC,SAASP,CAAC,CAACQ,CAAD,CAA3C,EAAgDE,OAAhD,CAAwD,CAAxD,CAAD,CAAjB;EACD;;EChDD;EAIA;;;;EAGe,SAASC,aAAT,CAAuBlB,KAAvB,EAA8C;EAC3D,SAAOM,YAAY,CAACN,KAAD,CAAZ,GAAsB,KAAtB,GAA8B,MAA9B,GAAuC,MAA9C;EACD;;ECTD;EAIA;;;;;;;;EAOe,SAASmB,WAAT,CAAqBC,MAArB,EAAqCC,MAArC,EAA6D;EAC1E,MAAMC,UAAU,GAAGhB,YAAY,CAACc,MAAD,CAA/B;EACA,MAAMG,UAAU,GAAGjB,YAAY,CAACe,MAAD,CAA/B;EACA,SAAOL,UAAU,CACf,CAACM,UAAU,GAAGC,UAAb,GACG,CAACD,UAAU,GAAG,IAAd,KAAuBC,UAAU,GAAG,IAApC,CADH,GAEG,CAACA,UAAU,GAAG,IAAd,KAAuBD,UAAU,GAAG,IAApC,CAFJ,EAGEL,OAHF,CAGU,CAHV,CADe,CAAjB;EAMD;;ECfD,IAAMO,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACC,CAAD,EAAYV,CAAZ;EAAA,SAC/BI,WAAW,CAACM,CAAD,EAAIV,CAAJ,CAAX,GAAoB,GADW;EAAA,CAAjC;;EAEA,IAAMW,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACD,CAAD,EAAYV,CAAZ;EAAA,SAA0BI,WAAW,CAACM,CAAD,EAAIV,CAAJ,CAAX,GAAoB,CAA9C;EAAA,CAA/B;;EACA,IAAMY,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,CAAD,EAAYV,CAAZ;EAAA,SAA0BI,WAAW,CAACM,CAAD,EAAIV,CAAJ,CAAX,GAAoB,GAA9C;EAAA,CAAzB;;EACA,IAAMa,iBAAiB,GAAG,SAApBA,iBAAoB,CAACH,CAAD,EAAYV,CAAZ;EAAA,SAA0BI,WAAW,CAACM,CAAD,EAAIV,CAAJ,CAAX,GAAoB,CAA9C;EAAA,CAA1B;;EAEA,SAASc,qBAAT,CACE7B,KADF,EAGwB;EAAA,MADtBC,OACsB,uEADZ,MACY;EACtB,MAAM6B,gBAAgB,GAAGZ,aAAa,CAACjB,OAAD,CAAtC;EAEA,SAAO;EACL8B,IAAAA,QAAQ,EAAE/B,KADL;EAELgC,IAAAA,UAAU,EAAER,wBAAwB,CAACxB,KAAD,EAAQC,OAAR,CAAxB,GACR6B,gBADQ,GAER9B,KAJC;EAKLiC,IAAAA,QAAQ,EAAEP,sBAAsB,CAAC1B,KAAD,EAAQC,OAAR,CAAtB,GAAyC6B,gBAAzC,GAA4D9B,KALjE;EAMLkC,IAAAA,EAAE,EAAEP,gBAAgB,CAAC3B,KAAD,EAAQC,OAAR,CAAhB,GAAmC6B,gBAAnC,GAAsD9B,KANrD;EAOLmC,IAAAA,GAAG,EAAEP,iBAAiB,CAAC5B,KAAD,EAAQC,OAAR,CAAjB,GAAoC6B,gBAApC,GAAuD9B;EAPvD,GAAP;EASD;;ACzBD,qBAAeF,mBAAa,CAAU,IAAV,CAA5B;;ECOA,SAASsC,aAAT,OAAmD;EAAA,MAA1BC,KAA0B,QAA1BA,KAA0B;EAAA,MAAnBnC,QAAmB,QAAnBA,QAAmB;EACjD,sBACEG,6BAAC,YAAD,CAAc,QAAd;EAAuB,IAAA,KAAK,EAAEgC;EAA9B,KAAsCnC,QAAtC,CADF;EAGD;;ECHD,SAASoC,eAAT,CAAyBC,KAAzB,EAAwC;EACtC,MAAMC,YAAY,GAAGC,gBAAU,CAACC,YAAD,CAA/B;;EAEA,MAAI,CAACF,YAAL,EAAmB;EACjB,UAAM,IAAI5B,KAAJ,CACJ,2FADI,CAAN;EAGD;;EAED,MAAMZ,KAAK,GAAG,CAAAuC,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEvC,KAAP,KAAgBwC,YAAY,CAACxC,KAA3C;EACA,MAAMC,OAAO,GAAG,CAAAsC,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEtC,OAAP,KAAkBuC,YAAY,CAACvC,OAA/C;EAEA,SAAOG,aAAO,CACZ;EAAA,WAAO;EACLJ,MAAAA,KAAK,EAAE6B,qBAAqB,CAAC7B,KAAD,EAAQC,OAAR,CADvB;EAELA,MAAAA,OAAO,EAAPA;EAFK,KAAP;EAAA,GADY,EAKZ,CAACD,KAAD,EAAQC,OAAR,CALY,CAAd;EAOD;;ECzBD,SAAS0C,QAAT,GAA0B;EACxB,MAAMN,KAAK,GAAGI,gBAAU,CAACG,YAAD,CAAxB;;EAEA,MAAI,CAACP,KAAL,EAAY;EACV,UAAM,IAAIzB,KAAJ,CACJ,2EADI,CAAN;EAGD;;EAED,SAAOyB,KAAP;EACD;;ECbD,SAASQ,GAAT,CAAaC,OAAb,EAA+E;EAC7E,MAAIC,QAAQ,GAAG,EAAf;;EAEA,OAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,OAAO,CAACG,MAA5B,EAAoCD,CAAC,IAAI,CAAzC,EAA4C;EAC1C,QAAME,aAAa,GAAGJ,OAAO,CAACE,CAAD,CAA7B;EACA,QAAMG,YAAY,GAAG,CAAOH,CAAP,gCAAOA,CAAP,6BAAOA,CAAP,UAAa,EAAlC;EACAD,IAAAA,QAAQ,IAAIG,aAAa,GAAGC,YAA5B;EACD;;EAED,SAAOJ,QAAP;EACD;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../packages/core/src/ColorContext.ts","../../packages/core/src/ColorContextProvider.tsx","../../packages/core/src/createReadablePalette.ts","../../packages/core/src/ThemeContext.ts","../../packages/core/src/ThemeProvider.tsx","../../packages/core/src/useColorContext.ts","../../packages/core/src/useTheme.ts","../../packages/core/src/css.ts"],"sourcesContent":["import { createContext } from 'react';\nimport { ColorContextValue } from './types';\n\nexport default createContext<ColorContextValue | null>(null);\n","import React, { useMemo } from 'react';\nimport ColorContext from './ColorContext';\n\ninterface Props {\n  color: string;\n  surface: string;\n  children: React.ReactNode;\n}\n\nfunction ColorContextProvider({ color, surface, children }: Props) {\n  const contextValue = useMemo(() => ({ color, surface }), [color, surface]);\n  return (\n    <ColorContext.Provider value={contextValue}>\n      {children}\n    </ColorContext.Provider>\n  );\n}\n\nexport default ColorContextProvider;\n","import { readableColor, getContrast } from 'color2k';\nimport { ReadableColorPalette } from './types';\n\nconst hasBadDecorativeContrast = (a: string, b: string) =>\n  getContrast(a, b) < 1.5;\nconst hasBadReadableContrast = (a: string, b: string) => getContrast(a, b) < 3;\nconst hasBadAaContrast = (a: string, b: string) => getContrast(a, b) < 4.5;\nconst hasBadAaaContrast = (a: string, b: string) => getContrast(a, b) < 7;\n\nfunction createReadablePalette(\n  color: string,\n  surface = '#fff',\n): ReadableColorPalette {\n  const readableContrast = readableColor(surface);\n\n  return {\n    original: color,\n    decorative: hasBadDecorativeContrast(color, surface)\n      ? readableContrast\n      : color,\n    readable: hasBadReadableContrast(color, surface) ? readableContrast : color,\n    aa: hasBadAaContrast(color, surface) ? readableContrast : color,\n    aaa: hasBadAaaContrast(color, surface) ? readableContrast : color,\n  };\n}\n\nexport default createReadablePalette;\n","import { createContext } from 'react';\nexport default createContext<unknown>(null);\n","import React from 'react';\nimport ThemeContext from './ThemeContext';\n\ninterface Props {\n  theme: unknown;\n  children: React.ReactNode;\n}\n\nfunction ThemeProvider({ theme, children }: Props) {\n  return (\n    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n","import { useContext, useMemo } from 'react';\nimport ColorContext from './ColorContext';\nimport createReadablePalette from './createReadablePalette';\n\ninterface Props {\n  color?: string;\n  surface?: string;\n}\n\nfunction useColorContext(props?: Props) {\n  const colorContext = useContext(ColorContext);\n\n  if (!colorContext) {\n    throw new Error(\n      'Could not find color context. Ensure this component is wrapped in a ColorContextProvider.',\n    );\n  }\n\n  const color = props?.color || colorContext.color;\n  const surface = props?.surface || colorContext.surface;\n\n  return useMemo(\n    () => ({\n      color: createReadablePalette(color, surface),\n      surface,\n    }),\n    [color, surface],\n  );\n}\n\nexport default useColorContext;\n","import { useContext } from 'react';\nimport ThemeContext from './ThemeContext';\n\nfunction useTheme<T>(): T {\n  const theme = useContext(ThemeContext) as T | null;\n\n  if (!theme) {\n    throw new Error(\n      'Could not find theme. Ensure this component is wrapped in a ThemeProvider',\n    );\n  }\n\n  return theme;\n}\n\nexport default useTheme;\n","function css(strings: TemplateStringsArray, ...values: Array<string | number>) {\n  let combined = '';\n\n  for (let i = 0; i < strings.length; i += 1) {\n    const currentString = strings[i];\n    const currentValue = values[i] || '';\n    combined += currentString + currentValue;\n  }\n\n  return combined;\n}\n\nexport default css;\n"],"names":["createContext","ColorContextProvider","color","surface","children","contextValue","useMemo","React","hasBadDecorativeContrast","a","b","getContrast","hasBadReadableContrast","hasBadAaContrast","hasBadAaaContrast","createReadablePalette","readableContrast","readableColor","original","decorative","readable","aa","aaa","ThemeProvider","theme","useColorContext","props","colorContext","useContext","ColorContext","Error","useTheme","ThemeContext","css","strings","combined","i","length","currentString","currentValue"],"mappings":"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"}

package.json

 {
   "name": "@react-style-system/core",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": {
@@ -25,5 +25,5 @@ "email": "[e-mail]",
   "dependencies": {
-    "@ricokahler/parse-to-rgba": "0.2.1",
+    "color2k": "1.0.0-rc.5",
     "@babel/runtime": "7.9.6"
   }
 }

src/index.d.ts

@@ -9,5 +9,3 @@ export { default as ColorContext } from './ColorContext';
 export { default as css } from './css';
-export { default as getContrast } from './getContrast';
-export { default as getLuminance } from './getLuminance';
-export { default as readableColor } from './readableColor';
+export * from 'color2k';
 export * from './types';

src/getContrast.d.ts

-/**
- * Returns the contrast ratio between two colors based on
- * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).
- *
- * @example
- * const contrastRatio = getContrast('#444', '#fff');
- */
-export default function getContrast(color1: string, color2: string): number;

src/getLuminance.d.ts

-/**
- * Returns a number (float) representing the luminance of a color.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff',
- *   background: getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
- *                             'rgba(58, 133, 255, 1)' :
- *                             'rgba(255, 57, 149, 1)',
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${getLuminance('#CCCD64') >= getLuminance('#0000ff') ? '#CCCD64' : '#0000ff'};
- *   background: ${getLuminance('rgba(58, 133, 255, 1)') >= getLuminance('rgba(255, 57, 149, 1)') ?
- *                             'rgba(58, 133, 255, 1)' :
- *                             'rgba(255, 57, 149, 1)'};
- *
- * // CSS in JS Output
- *
- * div {
- *   background: "#CCCD64";
- *   background: "rgba(58, 133, 255, 1)";
- * }
- */
-export default function getLuminance(color: string): number;

src/readableColor.d.ts

-/**
- * Returns black or white for best contrast depending on the luminosity of the given color.
- */
-export default function readableColor(color: string): string;

No alert changes

Worsened metrics

Total package byte prevSize

25157

-39.95%

Number of package files

15

-16.67%

Lines of code

274

-42.68%

Dependency changes

• + Added

  color2k@1.0.0-rc.5

• + Added

  @color2k/compat@1.0.0-rc.5
  (transitive)

• + Added

  @color2k/parse-to-rgba@1.0.0-rc.5
  (transitive)

• + Added

  color2k@1.0.0-rc.5
  (transitive)

• - Removed

  @ricokahler/parse-to-rgba@0.2.1

• - Removed

  @babel/runtime@7.29.7
  (transitive)

• - Removed

  @ricokahler/parse-to-rgba@0.2.1
  (transitive)

• - Removed

  polished@3.7.2
  (transitive)