[APM] Invert tint fraction after polished upgrade (#103439)

Closes #103061. We use polished.tint() in several places to have a subdued highlight for an element. With the polished upgrade to 3.x from several weeks ago came a bug fix for tint() that applied the tint fraction in a different way. The fix for us to invert those fractions (eg 0.1 becomes 0.9).
This commit is contained in:
Dario Gieselaar 2021-06-28 20:02:44 +02:00 committed by GitHub
parent 706298d2bb
commit 0f9b715dff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 5 additions and 5 deletions

View file

@ -28,7 +28,7 @@ SyntaxHighlighter.registerLanguage('sql', sql);
const DatabaseStatement = euiStyled.div`
padding: ${px(units.half)} ${px(unit)};
background: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)};
background: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
border-radius: ${borderRadius};
border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
font-family: ${fontFamilyCode};

View file

@ -70,7 +70,7 @@ const ListItem = euiStyled.li`
const Icon = euiStyled.div`
flex: 0 0 ${px(units.double)};
background: ${({ type, theme }) => tint(0.1, getIconColor(type, theme))};
background: ${({ type, theme }) => tint(0.9, getIconColor(type, theme))};
color: ${({ type, theme }) => getIconColor(type, theme)};
width: 100%;
height: 100%;

View file

@ -18,7 +18,7 @@ const List = euiStyled.ul`
border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
border-radius: ${px(units.quarter)};
box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
${({ theme }) => tint(0.1, theme.eui.euiColorFullShade)};
${({ theme }) => tint(0.9, theme.eui.euiColorFullShade)};
position: absolute;
background: ${({ theme }) => theme.eui.euiColorEmptyShade};
z-index: 10;

View file

@ -33,7 +33,7 @@ const LineHighlight = euiStyled.div<{ lineNumber: number }>`
height: ${px(units.eighth * 9)};
top: ${(props) => px(props.lineNumber * LINE_HEIGHT)};
pointer-events: none;
background-color: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)};
background-color: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
`;
const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>`
@ -57,7 +57,7 @@ const LineNumber = euiStyled.div<{ highlight: boolean }>`
text-align: right;
border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
background-color: ${({ highlight, theme }) =>
highlight ? tint(0.1, theme.eui.euiColorWarning) : null};
highlight ? tint(0.9, theme.eui.euiColorWarning) : null};
&:last-of-type {
border-radius: 0 0 0 ${borderRadius};