From 5cbe097a06e18c1ef4658334bb1eba22f5ceee34 Mon Sep 17 00:00:00 2001 From: Yash Joshi Date: Fri, 10 Apr 2020 00:31:54 +0530 Subject: [PATCH] fix: skeleton with color having opacity (#3873) --- .../src/app/pages/Sandbox/Editor/Skeleton/elements.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts index 04e29c1115a..84d47fc6eff 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Skeleton/elements.ts @@ -7,7 +7,7 @@ const pulse = keyframes` `; export const SkeletonTextBlock = styled.div(props => { - const color = props.theme.colors?.sideBar.border || '#242424'; + let color = props.theme.colors?.sideBar.border || '#242424'; const themeType = props.theme.vscodeTheme.type; /** @@ -23,7 +23,16 @@ export const SkeletonTextBlock = styled.div(props => { const backgroundLuminosity = themeType === 'light' ? 86 : 14; const highlightLuminosity = themeType === 'light' ? 88 : 16; + // Color('#ff000033') throws error. + const colorWithOpacity = color.length === 9; + + if (colorWithOpacity) { + // remove the opacity + color = color.slice(0, -2); + } + const hsl = Color(color).hsl(); + const background = Color({ ...hsl, l: backgroundLuminosity }).hslString(); const highlight = Color({ ...hsl, l: highlightLuminosity }).hslString();