-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Color) Regex and color code cleanup and new color format support #8916
Changes from 9 commits
c26f998
9792c44
8db4286
048eb28
453248f
a962ce1
b3bca21
3eb2bf7
b445f9c
f17c216
979bfb3
29a5598
5a5c134
4d15b1c
89ccb5f
f3eadd8
ed671f0
77d2dbb
d4e98a5
649ba3c
02f0c5a
2406fa3
e3bfa4c
b648cb4
c78c568
43a2d1c
210a24a
fd75870
4b3693f
ed121bc
d90d07a
713a425
362879f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is great! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. in my head there was the fun experiment that 150 colors can be represented by 2 digits in base64 encoding. And so that should be possible to reduce this map to have custom hashed keys to which color names resolve univocally. But i m not sure is easy or hard, but for sure would be fun. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. So desu, ne?! |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
/** | ||
* Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) | ||
* Regex matching color in RGB or RGBA formats (ex: `rgb(0, 0, 0)`, `rgba(255, 100, 10, 0.5)`, `rgba( 255 , 100 , 10 , 0.5 )`, `rgb(1,1,1)`, `rgba(100%, 60%, 10%, 0.5)`) | ||
* Also matching rgba(r g b / a) as per new specs | ||
* https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb | ||
* Formal syntax at the time of writing: | ||
|
@@ -49,7 +49,7 @@ | |
* The alpha channel can be in the format 0.4 .7 or 1 or 73% | ||
* | ||
* WARNING this regex doesn't fail on off spec colors. it matches everything that could be a color. | ||
* So the spec does not allow for rgba(30 , 45% 35, 49%) but this will work anyway for us | ||
* So the spec does not allow for `rgba(30 , 45% 35, 49%)` but this will work anyways for us | ||
*/ | ||
export const reRGBa = () => | ||
/^rgba?\(\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*[\s|,]\s*(\d{0,3}(?:\.\d+)?%?)\s*(?:\s*[,/]\s*(\d{0,3}(?:\.\d+)?%?)\s*)?\)$/i; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. does it over complicate reusing some string e.g. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the issue with that is that i loose the ability to use the literal regex and i have to go with newRegexp. |
||
|
@@ -95,11 +95,11 @@ export const reRGBa = () => | |
* \) // Matches the closing parenthesis | ||
* $/i // Matches the end of the string and sets the regular expression to case-insensitive mode | ||
* | ||
* WARNING this regex doesn't fail on off spec colors. it matches everything that could be a color. | ||
* So the spec does not allow for hsl(30 , 45% 35, 49%) but this will work anyway for us | ||
* WARNING this regex doesn't fail on off spec colors. It matches everything that could be a color. | ||
* So the spec does not allow `hsl(30 , 45% 35, 49%)` but this will work anyways for us. | ||
*/ | ||
export const reHSLa = () => | ||
/^hsla?\(\s*(\d{1,3})\s*[\s|,]\s*(\d{1,3}%)\s*[\s|,]\s*(\d{1,3}%)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i; | ||
/^hsla?\(\s*([+-]?\d{1,3})\s*[\s|,]\s*(\d{1,3}%)\s*[\s|,]\s*(\d{1,3}%)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i; | ||
|
||
/** | ||
* Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -74,7 +74,20 @@ export const fromAlphaToFloat = (value = '1') => | |
parseFloat(value) / (value.endsWith('%') ? 100 : 1); | ||
|
||
/** | ||
* Convert a value ∈ [0, 255] to hex | ||
* Convert a value in the inclusive range [0, 255] to hex | ||
*/ | ||
export const hexify = (value: number) => | ||
Math.min(value, 255).toString(16).toUpperCase().padStart(2, '0'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. padStart, who knew. 👍 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is exactly where we should verify rounding is not an issue. |
||
|
||
/** | ||
* Calculate the grey average value for rgb and pass through alpha | ||
*/ | ||
export const greyAverage = ( | ||
r: number, | ||
g: number, | ||
b: number, | ||
a = 1 | ||
): [average: number, alpha: number] => [ | ||
Math.round(r * 0.3 + g * 0.59 + b * 0.11), | ||
a, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. seems alpha doesn't belong here It is a bit weird like this, but not a big deal. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yes maybe we can return the source format, is an internal util, it can do whatever it needs to do to make the code efficient There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we can make it from source to source. |
||
]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not very related, but since I am reviewing
Do we want to return a new instance for the
toXXX
methods?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this would be a possible change, and we can do that outside the cleanup/refactor scope.
Something that also should be done maybe that is part of cleanup is consolidathing this average code in a function util