prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

More faffing about with css vars

Browse source
This commit is contained in:
Jackson Harper 2023-08-24 17:25:46 +08:00
parent 913eba19a1
commit 8b83963117
4 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -116,7 +116,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
'> *': {
display: 'inline',
padding: '3px',
backgroundColor: `rgba(${highlightColor}, var(--colors-highlightBackgroundAlpha))`,
backgroundColor: `rgba(${highlightColor}, var(--colors-highlight_background_alpha))`,
boxDecorationBreak: 'clone',
borderRadius: '2px',
},

18
packages/web/components/tokens/stitches.config.ts
View file

@ -200,14 +200,14 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
thHighContrast: '#3D3D3D',
thHighlightBar: '#D9D9D9',
highlightBackgroundGreen: '85, 198, 137',
highlightBackgroundBlue: '106, 177, 255',
highlightBackgroundOrange: '254, 181, 109',
highlightBackgroundYellow: '255, 210, 52',
highlightBackgroundRed: '251, 154, 154',
highlight_background_green: '85, 198, 137',
highlight_background_blue: '106, 177, 255',
highlight_background_orange: '254, 181, 109',
highlight_background_yellow: '255, 210, 52',
highlight_background_red: '251, 154, 154',
highlightBackgroundAlpha: '0.2',
highlightUnderlineAlpha: '1.0',
highlight_background_alpha: '0.2',
highlight_underline_alpha: '1.0',
},
},
media: {
@ -310,8 +310,8 @@ const darkThemeSpec = {
thHighContrast: '#D9D9D9',
thHighlightBar: '#6A6968',
highlightUnderlineAlpha: '0.5',
highlightBackgroundAlpha: '0.35',
highlight_underline_alpha: '0.5',
highlight_background_alpha: '0.35',
},
shadows: {
cardBoxShadow:

10
packages/web/lib/themeUpdater.tsx
View file

@ -133,15 +133,15 @@ export const highlightColor = (name: string | undefined) => {
export const highlightColorVar = (name: string | undefined) => {
switch (name) {
case 'green':
return 'var(--colors-highlightBackgroundGreen)'
return 'var(--colors-highlight_background_green)'
case 'blue':
return 'var(--colors-highlightBackgroundBlue)'
return 'var(--colors-highlight_background_blue)'
case 'yellow':
return 'var(--colors-highlightBackgroundYellow)'
return 'var(--colors-highlight_background_yellow)'
case 'orange':
return 'var(--colors-highlightBackgroundOrange)'
return 'var(--colors-highlight_background_orange)'
case 'red':
return 'var(--colors-highlightBackgroundRed)'
return 'var(--colors-highlight_background_red)'
}
return 'var(--colors-highlightBackground)'
}

16
packages/web/styles/articleInnerStyling.css
View file

@ -21,23 +21,23 @@
.highlight__green {
background-color: rgba(var(--colors-highlightBackgroundGreen), var(--colors-highlightBackgroundAlpha));
border-bottom: 2px solid rgba(var(--colors-highlightBackgroundGreen), var(--colors-highlightUnderlineAlpha));
background-color: rgba(var(--colors-highlight_background_green), var(--colors-highlight_background_alpha));
border-bottom: 2px solid rgba(var(--colors-highlight_background_green), var(--colors-highlight_underline_alpha));
}
.highlight__red {
background-color: rgba(var(--colors-highlightBackgroundRed), var(--colors-highlightBackgroundAlpha));
border-bottom: 2px solid rgba(var(--colors-highlightBackgroundRed), var(--colors-highlightUnderlineAlpha));
background-color: rgba(var(--colors-highlight_background_red), var(--colors-highlight_background_alpha));
border-bottom: 2px solid rgba(var(--colors-highlight_background_red), var(--colors-highlight_underline_alpha));
}
.highlight__blue {
background-color: rgba(var(--colors-highlightBackgroundBlue), var(--colors-highlightBackgroundAlpha));
border-bottom: 2px solid rgba(var(--colors-highlightBackgroundBlue), var(--colors-highlightUnderlineAlpha));
background-color: rgba(var(--colors-highlight_background_blue), var(--colors-highlight_background_alpha));
border-bottom: 2px solid rgba(var(--colors-highlight_background_blue), var(--colors-highlight_underline_alpha));
}
.highlight__yellow {
background-color: rgba(var(--colors-highlightBackgroundYellow), var(--colors-highlightBackgroundAlpha));
border-bottom: 2px solid rgba(var(--colors-highlightBackgroundYellow), var(--colors-highlightUnderlineAlpha));
background-color: rgba(var(--colors-highlight_background_yellow), var(--colors-highlight_background_alpha));
border-bottom: 2px solid rgba(var(--colors-highlight_background_yellow), var(--colors-highlight_underline_alpha));
}
.article-inner-css {