mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[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:
parent
706298d2bb
commit
0f9b715dff
4 changed files with 5 additions and 5 deletions
|
@ -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};
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue