Generate colors based on a desired contrast ratio

Overview

Leonardo logo

npm version license Pull requests welcome Web UI

Leonardo

Authoring adaptive color palettes for generating color based on a desired contrast ratio.

For a detailed walkthrough of Leonardo, check out this article.

Project Goals

To make it easier for designers and engineers to leverage color science to create custom interpolations for a value scale, and to make it easier for designers and engineers to conform to WCAG minimum contrast standards by using contrast ratio as the starting point, rather than a post-color-selection auditing process.

  1. Leonardo web application
  2. Show me a demo
  3. What is "adaptive color"?
  4. Using Leonardo
  5. Why are not all contrast ratios available?
  6. D3 Color
  7. Contributing
  8. Licensing

Leonardo web application

The Leonardo web application is a tool for designers and engineers to collaboratively build color scales for use in user interfaces. The tool exposes an interface to @adobe/leonardo-contrast-colors's generateContrastColors() function and displays visual aids for modifying the selection of a variable color and the target contrast ratios (swatches) to produce. The URL updates with your parameters for easily sharing links to team mates, and the app displays the specific config parameters when designers send you a version that they approve.

Leonardo web app with color inputs, interpolated gradient, contrast ratio input, and demo of colors applied to text and a button.

Show me a demo

Sometimes it's easier to express what you can do by showing you. Take a look at this demo app and play around with the brightness and contrast controls.

The controls are used to dynamically regenerate the entire UI color palette using generateContrastColors() functions as the end user (you) adjusts their settings. All of the changes to the UI colors are in conformity with the parameters set up by designers in the Leonardo web application ensuring that end users have the flexibility and control that they need while still upholding the design team's color choices.

What is adaptive color?

I've written about this concept in more detail at the following links. The goals of this project are to aid in fulfilling the tooling necessary to make adaptive color palettes available to designers and engineers.

Using Leonardo

See the @adobe/leonardo-contrast-colors README for details on how to use Leonardo in your app.

Why are not all contrast ratios available?

You may notice the tool takes an input (target ratio) but most often outputs a contrast ratio slightly higher. This has to do with the available colors in the RGB color space, and the math associated with calculating these ratios.

For example let's look at blue and white. Blue: rgb(0, 0, 255) White: rgb(255, 255, 255) Contrast ratio: 8.59:1

If we change any one value in the RGB channel for either color, the ratio changes: Blue: rgb(0, 1, 255) White: rgb(255, 255, 255) Contrast ratio: 8.57:1

If 8.58 is input as the target ratio with the starting color of blue, the output will not be exact. This is exaggerated by the various colorspace interpolations.

Since the WCAG requirement is defined as a minimum contrast requirement, it should be fine to generate colors that are a little more accessible than the minimum.

D3 Color

This project is currently built using D3 color. Although functionality is comparable to Chroma.js, the choice of D3 color is based on the additional modules available for state-of-the-art color appearance models, such as CIE CAM02.

The createScale() function is basically a wrapper function for creating a d3 linear scale for colors, with a few enhancements that aid in the generateContrastColors() function.

The Leonardo web app leverages d3 for additional features such as generating 2d and 3d charts.

Contributing

Contributions are welcomed! Read the Contributing Guide for more information.

Development

To get started developing Leonardo UI:

Note: Yarn must be installed on your machine

# Install dependencies
yarn install

# Change directory to Leonardo UI
cd packages/ui

# Run local server
yarn dev

To get started developing Leonardo contrast-colors package:

# From root, change directory to contrast-colors
cd packages/contrast-colors

# Run tests and watch for changes
yarn dev

Then, visit the live reloading web UIs here: http://localhost:1234/index.html http://localhost:1234/demo.html

Licensing

This project is licensed under the Apache V2 License. See LICENSE for more information.

Comments
  • Alternative contrast ratio calculation

    Alternative contrast ratio calculation

    The WCAG 2.x contrast ratio calculation is unfortunately not a very accurate metric for text accessibility, especially for non-grayscale backgrounds. It would be great if this tool could bake in some of the calculations proposed for the next version of the standard and let you know if you are hitting the mark in either/both the 2.1 and proposed 3.0 specs.

    See discussion here https://github.com/w3c/wcag/issues/695

    enhancement 
    opened by alexkrolick 27
  • Generate adaptive theme

    Generate adaptive theme

    Description

    Functions added to make adaptive theme generation simpler for end users. For greater detail on what's added, parameters, and usage, see the updated README file in this PR.

    New function added generateAdaptiveTheme This function accepts JSON objects with key-value pairs required for generating base scale and contrast-based color scales. User has the option to return static themes or return their theme as a function.

    Returning static theme values In certain scenarios, it may be worthwhile for outputting the theme values directly from the original function call:

    let myTheme = generateAdaptiveTheme({baseScale, colorScales, 95)}; // outputs light gray theme
    

    Returning as a function By leaving the brightness parameter undefined, this will output a function for the user:

    let myTheme = generateAdaptiveTheme({ options });
    
    myTheme(95); // outputs light gray theme
    myTheme(30); // outputs dark gray theme
    

    **Output format ** The generateAdaptiveTheme function returns key-value pairs for each color, based on the name parameter given to each colorScale. They are numerically increased from 100 (for positive contrast ratio values). Negative contrast ratio values are incremented as divisor of 100, such as 25, 50, and 75. These values are based on the number of negative contrast ratio values declared.

    Example:

    [
      {gray50: "#e9ecf1"},      // negative ratio value. 
      {gray100: "#dde1e9"},
      {gray200: "#d0d6e1"},
      {gray300: "#c3cbd9"},
      {gray400: "#b3bdce"},
      {gray500: "#a0adc2"},
      {gray600: "#8998b0"},
      {gray700: "#71829c"},
      {purple100: "#eadbfd"},
      {purple200: "#e1cefc"},
      {purple300: "#d6bcfa"},
      {blue100: "#a9ecfe"},
      {blue200: "#90e1fd"},
      {blue300: "#68d4fe"}
    ]
    

    Motivation

    The goal is to ensure Leonardo can be easily implemented into the generation and adaptation of entire color themes. Current example implementation in the demo is complicated and should be simplified for reuse.

    Screenshots

    To-do list

    • [ ] This pull request is ready to merge.
    enhancement npm packages 
    opened by NateBaldwinDesign 14
  • Slow color update

    Slow color update

    Description

    Using the macOS Color Picker, when using a slider it will change the color on each movement. The app tries to update the browser URL, which causes the app to slow down until the last change is applied.

    Steps to reproduce

    1. Go to http://leonardocolor.io/
    2. Click on a color to open the color picker
    3. Use the slider to change the color hue (or other sliders) rapidly.
    4. See the update being applied for each change and slow down the browser.

    Expected behavior

    When changing a color, it should update the preview in real-time but only update the URL after a certain time to avoid the app from slowing down/freezing upon changing colors.

    Screenshots

    2019-12-11 16 15 18

    Environment

    • Browser(s) and OS(s): Chrome 78.0.3904.108 on macOS Mojave (10.14.5)
    bug UI 
    opened by fnky 11
  • Binary search should return closest value larger than search value

    Binary search should return closest value larger than search value

    Description

    Binary search currently returns closest match for a search item. While in other applications this would be fine, in Leonardo we need it to return the next closest value that is larger than the search item.

    Example: Ratio input for 3:1 (search for 3) Generated colors have close matches of 2.9 and 3.03 Current binary search would return 2.9 Considering the search is typically for a contrast minimum, we need the search to return 3.03

    Steps to reproduce

    Expected behavior

    Screenshots

    Leonardo package and version

    Environment

    • Browser(s) and OS(s):

    Additional context

    bug 
    opened by NateBaldwinDesign 10
  • [WIP] Add function for creating base scale

    [WIP] Add function for creating base scale

    Description

    Closes issue #32

    • Added function generateBaseScale()
      • Generates color scale using colorKeys and colorspace parameters
      • Converts all new colors to HSLuv
      • Filters values to remove duplicates for each whole value of HSLuv lightness
      • Returns filtered array in Hex format
    • Added tests for generateBaseScale
    • Updated README with details on how to use the function
    • Updated Demo app to use generateBaseScale as method of integrating Leonardo for brightness controls.

    Motivation

    1. To make brightness controls easier within Leonardo
    2. Ensure colors used in brightness controls are uniform in display colorspace (HSLuv) brightness values
    3. Ensure output is easily consumable and easy to reason about (0-100 scale)

    Screenshots

    To-do list

    • [ ] This pull request is ready to merge.
    enhancement npm packages 
    opened by NateBaldwinDesign 8
  • Add Typescript support

    Add Typescript support

    Description

    This pull request adds index.d.ts file to provide typescript type information about contrast-colors module. This closes #74

    Motivation

    This simplify the use of the module in typescript projects.

    Screenshots

    To-do list

    • [x] This pull request is ready to merge.
    opened by fedeci 7
  • Oklab color space support

    Oklab color space support

    I recently discovered this article from Björn Ottosson regarding a better color space for perceptionally uniform colors. https://bottosson.github.io/posts/oklab/

    Here is an interactive review of Oklab: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html#update-2021-01-29

    Is it possible to include Oklab color space for leonardo? I'm currently in the creation of an accessible and perceptionally uniform coor system and Oklab would help a lot in this regard.

    Thanks for the efforts and helping us all with better color tools.

    enhancement UI 
    opened by helloatilla 6
  • Cannot paste HEX value into the color picker

    Cannot paste HEX value into the color picker

    Description

    I'm trying to paste a color into the color picker's HEX value, but it doesn't work. The context menu isn't there, keyboard shortcut doesn't do anything. This means I need to remember and retype the value myself, which is obviously not ideal.

    Steps to reproduce

    1. Copy a HEX code from somewhere, like here: #ffffff
    2. Go to http://leonardocolor.io/
    3. Click on the Key Color
    4. Click on the color mode switch 2 times to get to the HEX value
    5. Try to paste the value

    Expected behavior

    It should paste the HEX value. If I can type the value myself, it should accept input from the clipboard too.

    Screenshots

    image

    Environment

    • Chrome 84.0.4147.89 (Official Build) (64-bit)
    • Mac OS 10.14.4

    Additional context

    On other browsers it's showing a different/native color picker so I'm unable to produce the same results...

    Thanks!

    bug UI 
    opened by darkostanimirovic 4
  • fix: remove Babel, use ESM wrapper approach for Node 13.x ESM support + CJS support

    fix: remove Babel, use ESM wrapper approach for Node 13.x ESM support + CJS support

    Description

    Use approach 1 from https://nodejs.org/api/esm.html#esm_writing_dual_packages_while_avoiding_or_minimizing_hazards to support both ESM and CJS use cases while removing Babel completely from the mix.

    Motivation

    This enables native ESM usage in Node 13.x as documented in the README, as well as normal CJS usage in all other environments.

    Caveats

    The code currently uses the spread operator and arrow functions, which won't won't in old-as-dirt browsers. Babel previously made this possible, but this PR removes Babel, and therefore removes support for old-as-dirt browsers.

    To-do list

    • [x] Discuss whether a Babelified build is necessary
    • [x] This pull request is ready to merge.
    opened by lazd 4
  • Bulk contrast feature in conversion dialog

    Bulk contrast feature in conversion dialog

    Description

    • Adds options to do a bulk contrast evaluation of colors in the "Bulk convert" dialog
    • Provides options for WCAG2 (relative luminance) and WCAG3 (APCA) contrast
    • Includes color picker to define a background color to compare against for calculation

    Motivation

    When evaluating many colors in a palette, it's nice to be able to see the contrast ratios for every color against a variety of backgrounds. This bulk action saves a lot of time, and is typically performed when doing other conversions for color analysis.

    Screenshots

    image

    Example of output CSV file for both contrast evaluations: image

    To-do list

    • [x] This pull request is ready to merge.
    opened by NateBaldwinDesign 3
  • [RFC] Refactor Leonardo with class functions

    [RFC] Refactor Leonardo with class functions

    Description

    This is a request for comment. If you use @adobe/leonardo-contrast-colors, we want to hear your perspectives and concerns

    This would be a refactoring of the primary functions of the @adobe/leonardo-contrast-colors npm package. Existing functions would be replaced with javascript class functions. Naming of these class functions would be changed to fit a simpler mental model:

    1. Color class
    2. BackgroundColor class
    3. Theme class

    Color class

    Rather than defining color parameters as a constant, or directly passing the parameters to either the generateContrastColors or generateAdaptiveTheme functions, each color that you wish to create a scale for will be defined as a unique class

    const myColor = new Color()
    

    The Color class will house all parameters for the color (name, colorKeys, colorspace, ratios, smooth, output), provides setters and getters for those parameters, and it will generate a color scale.

    The Color function houses the data for a color object, but does not return individual swatches. In order to do return contrast-based swatches, a Color will have to be passed (along with a BackgroundColor) to the Theme class.

    BackgroundColor class

    The BackgroundColor class extends the Color class. The primary difference is that the color scale it generates will only contain 100 colors, each selected based on an even distribution of lightnesses in HSLuv colorspace. The purpose for that is that it can be integrated with a range slider in your application to alter the brightness of the background within that range of 100 values.

    const myBackground = new BackgroundColor()
    

    Note that you should not support all 100 values in a brightness slider since midtones will lose any identifiability and will have drastically reduced contrast gamuts. Depending on the specific needs of your design system or application, you may want a wider or narrower range of available brightness, which is why Leonardo is not opinionated about what should be the acceptable range.

    The BackgroundColor function should be used for only one color of your palette, and signifies to the Theme class which colors to base the contrast generation from.

    Theme class

    The Theme class will replace both the generateContrastColors and generateAdaptiveTheme functions. The former is a single-color instance of a "theme", whereas the latter includes more colors support. For that reason, they should be combined into a single function

    const myTheme = new Theme()
    

    This function accepts Colors and BackgroundColor, along with lightness, contrast, and output parameters. It provides setters and getters for those parameters (including colors), and returns color swatches based on the target ratio. These colors can be output as either a flat list of values (Theme.contrastColorValues) or in a hierarchical data format (Theme.contrastColors). The hierarchical data format does not change from the current output seen in generateAdaptiveTheme().

    Comparison

    To compare the way this would change, this is an example of the current method of creating a theme in Leonardo:

    let theme = generateAdaptiveTheme({
        baseScale: "gray",
        lightness: 90,
        colorScales: [
          {
            name: "gray",
            colorKeys: ['#cacaca', '#323232'],
            colorspace: 'HSL',
            ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21]
          },
          {
            name: "blue",
            colorKeys: ['#0000ff'],
            colorspace: 'LAB',
            ratios: [2, 3, 4.5, 8, 12]
          },
          {
            name: "red",
            colorKeys: ['#ff0000'],
            colorspace: 'RGB',
            ratios: [2, 3, 4.5, 8, 12]
          }
        ]});
    

    This method would be replaced by:

      let gray = new BackgroundColor({"name": 'gray', colorKeys: ['#cacaca', '#323232'], colorspace: 'HSL', ratios: [1, 1.2, 1.4, 2, 3, 4.5, 6, 8, 12, 21]});
      let blue = new Color({"name": 'blue', colorKeys: ['#0000ff'], colorspace: 'LAB', ratios: [2, 3, 4.5, 8, 12]});
      let red = new Color({"name": 'red', colorKeys: ['#ff0000'], colorspace: 'RGB', ratios: [2, 3, 4.5, 8, 12]});
      let theme = new Theme({colors: [gray, blue, red], backgroundColor: gray, lightness: 90}); 
      let themeColors = theme.contrastColors;
    

    Why do you need this feature?

    This update could help to enable applications with a more performant method of returning updated colors. More specifically, with stateful applications that desire to expose brightness and contrast controls for their end-users.

    These class functions would create a separation of concerns, allowing for changing and returning new sets of contrasting color values without re-generating all the color scales. This is particularly impactful when working with a theme that has many different color scales. Similarly, a single color can be manipulated without regeneration of all color swatches (only affecting those that have changed).

    Leonardo package and version

    This change would be implemented as 1.0.0-alpha.9

    Additional context

    We would like to hear from teams that use Leonardo to identify what level of impact or desirability this refactoring would have on you, your team, or your product(s).

    **A draft PR for this proposal can be seen here: #110 **

    Please comment below with any questions, concerns, or considerations you would like us to be aware of 🙌

    enhancement npm packages 
    opened by NateBaldwinDesign 3
  • build(deps): bump json5 from 2.2.0 to 2.2.3 in /packages/contrast-colors

    build(deps): bump json5 from 2.2.0 to 2.2.3 in /packages/contrast-colors

    Bumps json5 from 2.2.0 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump qs from 6.5.2 to 6.5.3 in /packages/ui

    build(deps): bump qs from 6.5.2 to 6.5.3 in /packages/ui

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump qs from 6.5.2 to 6.5.3 in /packages/contrast-colors

    build(deps): bump qs from 6.5.2 to 6.5.3 in /packages/contrast-colors

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Change `colorspace` to `colorSpace` to be consistent

    Change `colorspace` to `colorSpace` to be consistent

    BREAKING CHANGE: It could be considered a typo, but it will be a breaking change for anyone using Leonardo previously.

    Description

    fixes #190

    Motivation

    Make the properties more consistent with documentation and the other property names.

    To-do list

    • [x] This pull request is ready to merge.
    opened by GarthDB 0
  • "colorSpace" key does not work when written in camel-case

    Description

    Color space is not set when using camel-case colorSpace, but works when using all lowercase colorspace

    In the documentation code snippets, it shows as camel-case.

    Expected behavior

    I feel like it should be using camel-case, similar to colorKeys OR the code snippets should be changed to match. Not sure if this was already fixed in later versions. But leaving a note just in case.

    Screenshots

    Screen Shot 2022-12-10 at 12 53 11 PM

    Leonardo package and version

    @leonardo-contrast-colors version: 1.0.0-alpha.13

    Environment

    • Browser(s) and OS(s): Version 108.0.5359.98 (Official Build) (arm64)
    bug 
    opened by skylerknight 2
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /packages/ui

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /packages/ui

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(@adobe/[email protected])
  • @adobe/[email protected](Aug 20, 2021)

    ✨ Refactored core functions into Classes ✨ Class functions allow us to generate color scales only when necessary, such as when key colors or interpolation space change. Previously, these scales would regenerate when any parameter is changed. When using "smooth" interpolation, this dramatically slows down color output.

    This architecture makes modification to a theme more performant in that you can set parameters that only affect their dependent functionality, rather than re-running the entire generateAdaptiveTheme function any time a change is made. This particularly is useful when setting lightness or the contrast of your theme.

    This release includes:

    • Replaced generateContrastColors, generateBaseScale, and generateAdaptiveTheme functions with new classes
    • Added classes Color, BackgroundColor, and Theme
    • Renamed fixColorVaue to convertColorValue since the function name did not match what it does.
    • Renamed binarySearch to getMatchingRatioIndex since the function is more than just a binary search and specific to finding a matching ratio's index
    • Enhanced getMatchingRatioIndex to find next highest contrast value for positive contrasts and next smallest value for negative contrasts.

    For more detail see PR #110

    Source code(tar.gz)
    Source code(zip)
Owner
Adobe, Inc.
Open source from Adobe
Adobe, Inc.
A tiny script for generating attractive colors

Random Color A tiny script for generating attractive random colors. See the demo for an explanation and some samples. randomColor has been ported to C

David Merfield 5.9k Dec 24, 2022
Smarter defaults for colors on the web.

colors.css 3.0.0 Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites. Stats 903 85 85 bytes

murmurs 9.2k Jan 9, 2023
JavaScript Library for creating random pleasing colors and color schemes

#PleaseJS www.checkman.io/please Please.js is a polite companion that wants to help you make your projects beautiful. It uses HSV color space to creat

Jordan Checkman 2.3k Dec 22, 2022
Extract prominent colors from an image. JS port of Android's Palette.

Vibrant.js Extract prominent colors from an image. Vibrant.js is a javascript port of the awesome Palette class in the Android support library. ⚠️ THI

Jari Zwarts 4.6k Dec 25, 2022
get colors in your node.js console

colors.js This is a fork of Marak Squires' original colors.js project Please check out the roadmap for upcoming features and releases. Please open Iss

Josh 5 Jan 11, 2022
Node Terminal Colors. Fast!

Tcol npm package to add colors to your terminal Installation # npm npm install tcol # pnpm pnpm install tcol Usage import { c } from "tcol"; console.

Posandu 4 May 13, 2022
Get colors in your node.js console

@colors/colors ("colors.js") Please check out the roadmap for upcoming features and releases. Please open Issues to provide feedback. get color and st

David Hyde 89 Dec 30, 2022
A simple Discord bot that will listen for HEX, RGB(a), and HSL(a) colors in a message, and provide a small image of that color.

Pigment For the teams of designers and developers out there - Pigment will listen for messages containing a HEX, RGB(a), or HSL(a) color, and provide

Conrad Crawford 17 Dec 8, 2022
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Utkarsh Verma 78 Dec 24, 2022
colors.js - get colors in your node.js console

colors.js Please check out the roadmap for upcoming features and releases. Please open Issues to provide feedback, and check the develop branch for th

cronlabspl 4 Feb 9, 2022
chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications

chakra-radix-colors chakra-radix-colors provides radix-ui color palettes, automatic dark mode, and acessible colors to chakra-ui applications. About C

null 11 Dec 30, 2022
Another logger in JS. This one offers a console.log-like API and formatting, colored lines and timestamps (or not if desired), all that with 0 dependencies.

hellog Your new logger ! hellog is a general-purpose logging library. It offers a console.log-like API and formatting, extensible type-safety colored

Maxence Lecanu 4 Jan 5, 2022
Enable full screen on for large aspect ratio screens on WhatsApp Web.

Maximize WhatsApp [WIP] Enable full screen on large aspect ratio screens on WhatsApp Web. Enable Epiphany extension. Optional if not done. Download th

null 2 Mar 13, 2022
Easily add aspect ratio in your Solid app.

Creates a component with a proportional relationship between its width and height. ratio = width / height Table of Contents Demo Installation Setup Us

Prince Neil Cedrick Castro 5 Nov 4, 2022
A tiny utility library to generate mesh gradient based on 4 RGB colors, built with vanilla js.

MeshGradient.js mesh-gradient.js is tiny utility library to generate mesh gradient based on 4 RGB colors, built with vanilla js. Installation! npm ins

Anup Aglawe 7 Jan 4, 2023
A tiny script for generating attractive colors

Random Color A tiny script for generating attractive random colors. See the demo for an explanation and some samples. randomColor has been ported to C

David Merfield 5.9k Dec 24, 2022
Smarter defaults for colors on the web.

colors.css 3.0.0 Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites. Stats 903 85 85 bytes

murmurs 9.2k Jan 9, 2023
JavaScript Library for creating random pleasing colors and color schemes

#PleaseJS www.checkman.io/please Please.js is a polite companion that wants to help you make your projects beautiful. It uses HSV color space to creat

Jordan Checkman 2.3k Dec 22, 2022
Extract prominent colors from an image. JS port of Android's Palette.

Vibrant.js Extract prominent colors from an image. Vibrant.js is a javascript port of the awesome Palette class in the Android support library. ⚠️ THI

Jari Zwarts 4.6k Dec 25, 2022