Convert colors between different color spaces. #9

jgerigmeyer · 2022-04-22T16:24:52Z

netlify · 2022-04-22T16:24:58Z

✅ Deploy Preview for oddcontrast ready!

Name	Link
🔨 Latest commit	`67d55cd`
🔍 Latest deploy log	https://app.netlify.com/sites/oddcontrast/deploys/62cd0219366dad00082b5d44
😎 Deploy Preview	https://deploy-preview-9--oddcontrast.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

mirisuzanne

looks good! At this stage, I'm not sure which of my UX notes should get resolved in this branch, vs get a new card in trello. But it's very cool what we have!

README.md

src/routes/index.svelte

src/lib/components/space.svelte

jgerigmeyer · 2022-04-22T20:04:01Z

I want to take an input in any color format and understand it as the color

jgerigmeyer · 2022-04-22T20:04:11Z

I want to see warning messages when colors are outside the color space range

jgerigmeyer · 2022-04-22T20:04:19Z

I want to choose the color space of the sliders

jgerigmeyer · 2022-04-22T20:23:53Z

@mirisuzanne Okay, I think I've addressed all of the review comments. We now have:

Default starting color in oklch, with bg in view mode and fg in edit mode
Ability to toggle between modes, and paste a new color (with error message if pasted value cannot be parsed)
Ability to switch color spaces (currently only oklch and hsl), which switches sliders as well
List of current colors in other formats, with warning if it's out of gamut and/or not a supported format in the current browser
Swatch/header colors use fallback (P3, then sRGB) if the selected format isn't supported by the current browser
Swatch/header colors do gamut mapping if the current selection is out of gamut
If the current selection is out of gamut, right now the color is not auto-mapped for purposes of further editing or sliders. That means that, for example, if I create a high-chroma oklch color and then switch to HSL, then switch right back, my color is unchanged. But the sliders likely have a value that's out of their min/max, so as soon as I touch an out-of-gamut slider in HSL mode, the color will snap back into gamut. We can play with this.

@stacyk This needs some cleanup and tests/linting, but I think it's ready for styles.

* main: more ts fix ts Automated dependency upgrades

mirisuzanne

looking good so far, I think this is still waiting on styles?

…klch # Conflicts: # src/lib/components/colors/Header.svelte

stacyk · 2022-05-02T14:36:44Z

I want to see my color values in a variety of color formats/notations

* main: specify yarn version for netlify Automated dependency upgrades

* main: Automated dependency upgrades

* main: ignore layout file from test coverage Automated dependency upgrades

src/lib/components/Results.svelte

src/lib/components/colors/Output.svelte

src/lib/components/colors/index.svelte

src/sass/initial/_type.scss

stacyk · 2022-07-08T21:06:40Z

@mirisuzanne this is ready for your re-review

@SondraE I don't know if you want to look this over... There are additional stories in Trello that I've added to address some of the things I know we will want to edit in the near future.

SondraE

lgtm

mirisuzanne

looking good! One bug, and one question.

And now I'm heading out for a week. Feel free to merge after those changes - don't wait for me! :)

src/lib/components/colors/Header.svelte

src/sass/patterns/_forms.scss

* main: Adjust to breaking svelte-kit changes Automated dependency upgrades

jgerigmeyer

@stacyk Looks good! I think there are still two review comments from Mia for you to respond to, then this is good to merge?

…klch

Convert color hsl/oklch

189bdc8

jgerigmeyer requested review from mirisuzanne and stacyk April 22, 2022 16:24

mirisuzanne approved these changes Apr 22, 2022

View reviewed changes

README.md Outdated Show resolved Hide resolved

src/routes/index.svelte Outdated Show resolved Hide resolved

src/lib/components/space.svelte Outdated Show resolved Hide resolved

jgerigmeyer added 2 commits April 22, 2022 15:59

Allow pasting color; add warnings and address review.

f048cc9

file naming

496978f

Add lodash-es

180cb22

jgerigmeyer added 2 commits April 22, 2022 16:25

typo

7b21c0c

lodash is weird

b24cd6e

jgerigmeyer requested a review from mirisuzanne April 22, 2022 20:32

Merge branch 'main' into oklch

15e414a

* main: more ts fix ts Automated dependency upgrades

mirisuzanne reviewed Apr 26, 2022

View reviewed changes

jgerigmeyer and others added 9 commits April 26, 2022 16:51

Adjust slider steps; do not change color space on paste.

056a95b

clean up files and TS defs

cab91da

more cleanup

b3d150e

use description lists for color types and values

c0c3e1d

clean up type a bit

3f71aab

lint

47623e6

WIP clean up text sizing, inputs, select, header, and more

7e83e38

Merge branch 'oklch' of https://github.com/oddbird/oddcontrast into o…

064ab08

…klch # Conflicts: # src/lib/components/colors/Header.svelte

make sure errors are in grid

8d4689c

jgerigmeyer added 3 commits May 2, 2022 11:11

Merge branch 'main' into oklch

0442b92

* main: specify yarn version for netlify Automated dependency upgrades

Merge branch 'main' into oklch

a0cc976

* main: Automated dependency upgrades

Merge branch 'main' into oklch

32da5d7

* main: ignore layout file from test coverage Automated dependency upgrades

stacyk added 10 commits July 6, 2022 12:35

add the color space name that is unsupported to the warning

daf4a84

Warning message styles (different location-specific)

0f1befe

use lists for outputs, remove unused font weights, spacing updates

51c3abb

styled swatches for all screen sizes now that error is above

246eaa1

better between input text size

0883d20

remove unused, clean up css

dfe6045

moving form layout to scss layout

348ee22

fix small screen layout

5dde5fd

remove unused

e55a3f8

add space under label in form

8e598e4

stacyk requested a review from SondraE July 8, 2022 19:49

stacyk added 5 commits July 8, 2022 15:03

remove unused, clean up styles

d883920

reorder

7683429

Fix linting error, reorder

c8d5edc

use rem for sizing

ac3dcac

link colors

797195d

stacyk approved these changes Jul 8, 2022

View reviewed changes

src/lib/components/Results.svelte Show resolved Hide resolved

src/lib/components/colors/Output.svelte Show resolved Hide resolved

src/lib/components/colors/index.svelte Show resolved Hide resolved

src/sass/initial/_type.scss Show resolved Hide resolved

SondraE approved these changes Jul 8, 2022

View reviewed changes

mirisuzanne reviewed Jul 9, 2022

View reviewed changes

src/lib/components/colors/Header.svelte Outdated Show resolved Hide resolved

src/sass/patterns/_forms.scss Outdated Show resolved Hide resolved

jgerigmeyer added 2 commits July 11, 2022 17:07

Merge branch 'main' into oklch

30eeafd

* main: Adjust to breaking svelte-kit changes Automated dependency upgrades

review

913713f

jgerigmeyer commented Jul 11, 2022

View reviewed changes

jgerigmeyer and others added 4 commits July 11, 2022 17:34

Upgrade colorjs.io

9910368

fix warning color

575a8da

Merge branch 'oklch' of https://github.com/oddbird/oddcontrast into o…

9fcf80d

…klch

better spacing for errors on data-colors

67d55cd

stacyk merged commit 17738bf into main Jul 12, 2022

stacyk deleted the oklch branch July 12, 2022 15:32

stacyk mentioned this pull request Aug 11, 2023

Does the current tab order make sense? #104

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert colors between different color spaces. #9

Convert colors between different color spaces. #9

jgerigmeyer commented Apr 22, 2022

netlify bot commented Apr 22, 2022 •

edited

Loading

mirisuzanne left a comment

jgerigmeyer commented Apr 22, 2022

jgerigmeyer commented Apr 22, 2022

jgerigmeyer commented Apr 22, 2022

jgerigmeyer commented Apr 22, 2022 •

edited

Loading

mirisuzanne left a comment

stacyk commented May 2, 2022

stacyk commented Jul 8, 2022

SondraE left a comment

mirisuzanne left a comment

jgerigmeyer left a comment

Convert colors between different color spaces. #9

Convert colors between different color spaces. #9

Conversation

jgerigmeyer commented Apr 22, 2022

netlify bot commented Apr 22, 2022 • edited Loading

✅ Deploy Preview for oddcontrast ready!

mirisuzanne left a comment

Choose a reason for hiding this comment

jgerigmeyer commented Apr 22, 2022

jgerigmeyer commented Apr 22, 2022

jgerigmeyer commented Apr 22, 2022

jgerigmeyer commented Apr 22, 2022 • edited Loading

mirisuzanne left a comment

Choose a reason for hiding this comment

stacyk commented May 2, 2022

stacyk commented Jul 8, 2022

SondraE left a comment

Choose a reason for hiding this comment

mirisuzanne left a comment

Choose a reason for hiding this comment

jgerigmeyer left a comment

Choose a reason for hiding this comment

netlify bot commented Apr 22, 2022 •

edited

Loading

jgerigmeyer commented Apr 22, 2022 •

edited

Loading