Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Always treat highlightBackground as an array not a color now. This lets us apply alpha differently to backgrounds and underlines

Browse Source
This commit is contained in:
Jackson Harper
2022-10-07 14:13:49 +08:00
parent e53c907916
commit 791c9a9113
4 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/patterns/HighlightView.tsx
View File

@ -33,7 +33,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
}
}}>
{props.highlight.prefix}
<SpanBox css={{ bg: '$highlightBackground', p: '1px', borderRadius: '2px', }}>
<SpanBox css={{ bg: 'rgb($highlightBackground)', p: '1px', borderRadius: '2px', }}>
{lines.map((line: string, index: number) => (
<Fragment key={index}>
{line}

2
packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx
View File

@ -48,7 +48,7 @@ export function HighlightItemCard(props: HighlightItemCardProps): JSX.Element {
>
<StyledMark
css={{
background: '$highlightBackground',
background: 'rgb($highlightBackground)',
color: '$highlightText',
fontSize: '14px',
}}

2
packages/web/components/tokens/stitches.config.ts
View File

@ -263,7 +263,7 @@ export const globalStyles = globalCss({
// browser prefers this loaded here vs in the article styling css
'.article-inner-css': {
'::selection': {
background: '$highlightBackground',
background: 'rgb($highlightBackground)',
},
},
})

5
packages/web/styles/articleInnerStyling.css
View File

@ -13,13 +13,14 @@
.highlight {
color: var(--colors-highlightText);
background-color: var(--colors-highlightBackground);
background-color: rgb(var(--colors-highlightBackground));
cursor: pointer;
}
.highlight_with_note {
color: var(--colors-highlightText);
border-bottom: 2px var(--colors-highlightBackground) solid;
background-color: rgba(var(--colors-highlightBackground), 0.35);
border-bottom: 2px rgb(var(--colors-highlightBackground)) solid;
border-radius: 2px;
cursor: pointer;
}