Skip to content
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

chore: use radix to improve modal component #854

Open
wants to merge 9 commits into
base: next
Choose a base branch
from
Prev Previous commit
Next Next commit
fix: fix modal overlay background color animation
RyukTheCoder committed Sep 28, 2024
commit 30203abb921a4fc7333ea1cfe93e1999726d158f
9 changes: 8 additions & 1 deletion widget/embedded/src/utils/colors.ts
Original file line number Diff line number Diff line change
@@ -171,13 +171,20 @@ export function expandToGenerateThemeColors(
*/
const isSingleColor = ['background', 'foreground'].includes(colorKey);

const expandedHexColor = expandShortHexColor(expandColor);
if (!isSingleColor && !isOverridingColor(colorKey)) {
const expandedHexColor = expandShortHexColor(expandColor);
Object.assign(
output,
createTintsAndShades(expandedHexColor, colorKey, isNeutralReversed)
);
}

if (colorKey === 'neutral') {
// add alpha to have 70 percent opacity
Object.assign(output, {
overlay: expandedHexColor + 'b3',
});
}
}

return { ...output, ...expandColors };
6 changes: 3 additions & 3 deletions widget/ui/src/components/Modal/Modal.styles.ts
Original file line number Diff line number Diff line change
@@ -8,13 +8,13 @@ const DialogOverlayAnimateIn = keyframes({
backgroundColor: 'transparent',
},
'100%': {
backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
backgroundColor: '$overlay',
},
});

const DialogOverlayAnimateOut = keyframes({
'0%': {
backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
backgroundColor: '$overlay',
},
'100%': {
backgroundColor: 'transparent',
@@ -35,7 +35,7 @@ export const DialogOverlay = styled(Dialog.Overlay, {
backgroundColor: 'transparent',

"&[data-state='open']": {
backgroundColor: 'color-mix(in srgb, $neutral500 70%, transparent)',
backgroundColor: '$overlay',
animation: `${DialogOverlayAnimateIn} .45s ease-in-out`,
},
"&[data-state='closed']": {
6 changes: 6 additions & 0 deletions widget/ui/src/theme.ts
Original file line number Diff line number Diff line change
@@ -60,6 +60,8 @@ export const theme = {

background: '#FDFDFD',
foreground: '#010101',

overlay: '#E6E6E6b3',
},
space: {
0: '0rem',
@@ -205,6 +207,8 @@ export const darkColors = {

background: '#010101',
foreground: '#FDFDFD',

overlay: '#222222b3',
};

/* ----------------------- End of Values ----------------------- */
@@ -237,4 +241,6 @@ export const rangoDarkColors = {
neutral900: '#E9E9E9',
background: '#070917',
foreground: '#FDFDFD',

overlay: '#161C38b3',
};