adobe / leonardo

Generate colors based on a desired contrast ratio
http://www.leonardocolor.io
Apache License 2.0
1.94k stars 104 forks source link

Generate valid variable names from theme names and fix comma in output formatting #243

Open GarthDB opened 4 months ago

GarthDB commented 4 months ago

Description

Just cleaning up #223 on a new branch/pr.

Motivation

thierryc made a great pr but we've made some big structural changes since then.

To-do list

changeset-bot[bot] commented 4 months ago

⚠️ No Changeset found

Latest commit: 7b14f3a7e8f23dcc9bc6d6f8470239dfa1876104

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

GarthDB commented 4 months ago

Run report for 7b14f3a7

Total time: 19s Comparison time: 17.6s Estimated loss: 1.3s (7.1% slower) Action Time Status Info
🟩 SyncWorkspace 0ms Passed
⬛️ SetupNodeTool(~20.11) 1.2s Skipped
🟩 InstallNodeDeps(~20.11) 8.4s Passed
🟩 SyncNodeProject(contrast-colors) 0.1ms Passed
🟩 SyncNodeProject(ui) 0.3ms Passed
🟩 RunTask(ui:makeDistDir) 32.9ms Passed
🟩 RunTask(ui:copyCNAME) 11.6ms Passed
🟩 RunTask(ui:copyUIIcons) 58.3ms Passed
🟩 RunTask(ui:copyWorkflowIcons) 58.3ms Passed
🟩 RunTask(ui:buildSite) 9.3s Passed
Touched files
``` docs/ui/src/js/createOutputParameters.js ```
GarthDB commented 4 months ago

@thierryc I'm trying to test this locally, but I'm not sure it's working.

Running locally, I created a new theme and changed the name to something with spaces. Looking at the URL with the string of data, it converted it the spaces to + symbols:

http://localhost:1234/theme.html?name=title+for+new+theme&config=%7B%22baseScale%22%3A%22Gray%22%2C%22colorScales%22%3A%5B%7B%22name%22%3A%22Gray%22%2C%22colorKeys%22%3A%5B%22%23000000%22%5D%2C%22colorspace%22%3A%22RGB%22%2C%22ratios%22%3A%5B%221.45%22%2C%222.05%22%2C%223.02%22%2C%224.54%22%2C%227%22%2C%2210.86%22%5D%2C%22smooth%22%3Afalse%7D%5D%2C%22lightness%22%3A100%2C%22contrast%22%3A1%2C%22saturation%22%3A100%2C%22formula%22%3A%22wcag2%22%7D

Do you have an example of some data that should be escaped and what it should look like after going through your regex?