From aad2078d525f2ab0739c70a6bbde5013742b42e4 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 3 Apr 2023 11:29:44 -0700 Subject: [PATCH 1/5] prototype color mix --- src/Token/IssueLabelToken.tsx | 13 +++++++++++++ src/Token/Token.features.stories.tsx | 16 ++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx index 5d81939ecc6..ecd0ad9b613 100644 --- a/src/Token/IssueLabelToken.tsx +++ b/src/Token/IssueLabelToken.tsx @@ -112,6 +112,19 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { }, } : {}), + ...(isTokenInteractive(props) + ? { + '&:hover': { + background: isLightScheme + ? 'color-mix(in srgb, rgb(var(--label-r),var(--label-g),var(--label-b)), black 10%);' + : 'color-mix(in srgb, rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)), white 10%);', + color: + !isLightScheme && + 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + calc(((0.7 - var(--perceived-lightness)) * 100) * var(--lightness-switch))) * 1%))', + boxShadow: 'shadow.medium', + }, + } + : {}), } }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected]) diff --git a/src/Token/Token.features.stories.tsx b/src/Token/Token.features.stories.tsx index 9ab0718019e..1ce8c024a84 100644 --- a/src/Token/Token.features.stories.tsx +++ b/src/Token/Token.features.stories.tsx @@ -114,3 +114,19 @@ IssueLabelTokenWithOnRemoveFn.storyName = 'IssueLabelToken with onRemove fn' export const SmallToken = () => export const LargeToken = () => export const XLargeToken = () => + +export const IssueLabelTokenCustomColors = () => { + return ( + + + + + + ) +} From e211059a7e4bc6bc9b4d9dcdc40e7cdbea69ded2 Mon Sep 17 00:00:00 2001 From: langermank <18661030+langermank@users.noreply.github.com> Date: Mon, 3 Apr 2023 11:57:48 -0700 Subject: [PATCH 2/5] add fallback --- src/Token/IssueLabelToken.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx index ecd0ad9b613..6f9268fbedf 100644 --- a/src/Token/IssueLabelToken.tsx +++ b/src/Token/IssueLabelToken.tsx @@ -118,9 +118,9 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { background: isLightScheme ? 'color-mix(in srgb, rgb(var(--label-r),var(--label-g),var(--label-b)), black 10%);' : 'color-mix(in srgb, rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)), white 10%);', - color: - !isLightScheme && - 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + calc(((0.7 - var(--perceived-lightness)) * 100) * var(--lightness-switch))) * 1%))', + backgroundImage: isLightScheme + ? 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)), rgb(var(--label-r),var(--label-g),var(--label-b)))' + : 'linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), linear-gradient(rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)), rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)))', boxShadow: 'shadow.medium', }, } From 7309cb2c4daaab5db1ee2f551a7206dfee3988d9 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 12 Apr 2023 13:10:51 +0200 Subject: [PATCH 3/5] added examples and hover without colorMix --- src/Token/IssueLabelToken.tsx | 17 +-- src/Token/Token.features.stories.tsx | 166 +++++++++++++++++++++++++-- 2 files changed, 169 insertions(+), 14 deletions(-) diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx index 6f9268fbedf..cc2d8209c15 100644 --- a/src/Token/IssueLabelToken.tsx +++ b/src/Token/IssueLabelToken.tsx @@ -115,18 +115,21 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => { ...(isTokenInteractive(props) ? { '&:hover': { - background: isLightScheme - ? 'color-mix(in srgb, rgb(var(--label-r),var(--label-g),var(--label-b)), black 10%);' - : 'color-mix(in srgb, rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)), white 10%);', - backgroundImage: isLightScheme - ? 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)), rgb(var(--label-r),var(--label-g),var(--label-b)))' - : 'linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), linear-gradient(rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)), rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha)))', + ...(isLightScheme + ? { + backgroundImage: + 'linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)), rgb(var(--label-r),var(--label-g),var(--label-b)))', + } + : { + background: + 'hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);', + }), boxShadow: 'shadow.medium', }, } : {}), } - }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected]) + }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected, props]) return ( { gap: get('space.2'), }} > - + @@ -54,7 +54,12 @@ export const TokenWithOnRemoveFn = () => { }} > - + @@ -77,7 +82,11 @@ export const InteractiveIssueLabelToken = () => { gap: get('space.2'), }} > - + @@ -96,7 +105,12 @@ export const IssueLabelTokenWithOnRemoveFn = () => { }} > - + { - - - + + + + + +

Color examples

+ + + + + + + + + + + + + + + + + + + + + ) } From 39ce8f564ae403ea785b2ebb3c911cce9025475e Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 12 Apr 2023 14:14:49 +0200 Subject: [PATCH 4/5] update snapshots --- .../__snapshots__/TextInputWithTokens.test.tsx.snap | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap index 326d560ea91..f2119138454 100644 --- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap @@ -17848,6 +17848,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha)); } +.c4:hover { + background-image: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)),linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)),rgb(var(--label-r),var(--label-g),var(--label-b))); + box-shadow: 0 3px 6px rgba(140,149,159,0.15); +} + .c6 { background-color: transparent; font-family: inherit; From 844f8daf5ea632f50a08803194f08579af8539a5 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Wed, 12 Apr 2023 15:52:57 +0200 Subject: [PATCH 5/5] add changeset --- .changeset/wild-llamas-appear.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wild-llamas-appear.md diff --git a/.changeset/wild-llamas-appear.md b/.changeset/wild-llamas-appear.md new file mode 100644 index 00000000000..b5903a974ce --- /dev/null +++ b/.changeset/wild-llamas-appear.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Adds shadow and color change to IssueLabelToken on hover