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 work on themes

Browse source
This commit is contained in:
Jackson Harper 2024-06-11 17:49:14 +08:00
parent 5e7bd2fe0e
commit a84bb0259f
4 changed files with 64 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/web/components/elements/icons/home/AddToLibraryActionIcon.tsx
View file

@ -7,7 +7,6 @@ import React from 'react'
export class AddToLibraryActionIcon extends React.Component<IconProps> {
render() {
const strokeColor = (this.props.color || '#D9D9D9').toString()
const backgroundColor = (this.props.color || '#3D3D3D').toString()
return (
<svg

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

@ -151,7 +151,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
searchActiveOutline: 'rgb(255, 210, 52)',
// Reader Colors
readerBg: 'white',
readerBg: '#FAFAFA',
readerFont: '#3D3D3D',
readerFontHighContrast: 'black',
readerTableHeader: '#FFFFFF',
@ -180,7 +180,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
thBackground5: '#F5F5F5',
thBackgroundActive: '#FFEA9F',
thBackgroundContrast: '#FFFFFF',
thLeftMenuBackground: '#FCFCFC',
thLeftMenuBackground: '#F2F2F2',
thNavMenuFooter: '#DFDFDF',
thLibraryBackground: '#FFFFFF',
thLibrarySearchbox: '#FCFCFC',
@ -230,6 +230,14 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
thHighContrast: '#3D3D3D',
thHighlightBar: '#D9D9D9',
homeCardHover: '#FFFFFF',
homeTextTitle: '#2A2A2A',
homeTextSource: '#3D3D3D',
homeTextBody: '#3D3D3D',
homeTextSubtle: '#898989',
homeActionIcons: '#898989',
homeDivider: '#D9D9D9',
thLibraryAISummaryBorder: '#6A6968',
thLibraryAISummaryBackground: '#343434',
@ -331,7 +339,7 @@ const darkThemeSpec = {
thLibraryMenuPrimary: '#EBEBEB',
thLibraryMenuSecondary: '#EBEBEB',
thLibraryMenuUnselected: 'white',
thLibrarySelectionColor: '#6A6968',
thLibrarySelectionColor: '#DFDFDF',
thLibraryNavigationMenuFooter: '#3D3D3D',
thLibraryMenuFooterHover: '#6A6968',
thLibraryMultiselectHover: '#6A6968',
@ -376,6 +384,14 @@ const darkThemeSpec = {
thHighlightBar: '#6A6968',
homeCardHover: '#323232',
homeTextTitle: '#FFFFFF',
homeTextSource: '#D9D9D9',
homeTextBody: '#D9D9D9',
homeTextSubtle: '#898989',
homeActionIcons: '#898989',
homeDivider: '#3D3D3D',
thLibraryAISummaryBorder: '#6A6968',
thLibraryAISummaryBackground: '#343434',
@ -394,6 +410,29 @@ const blackThemeSpec = {
},
}
const apolloThemeSpec = {
colors: {
readerBg: '#6A6968',
readerFont: '#F3F3F3',
readerMargin: '#474747',
readerFontHighContrast: 'white',
readerTableHeader: '#FFFFFF',
thLeftMenuBackground: '#3D3D3D',
thNavMenuFooter: '#515151',
thLibrarySelectionColor: '#515151',
thBorderColor: '#6A6968',
homeCardHover: '#525252',
homeDivider: '#6A6968',
thBackground: '#474747',
thBackground2: '#515151',
thLibraryMultiselectHover: '#EEE8D5',
},
}
const sepiaThemeSpec = {
colorScheme: {
colorScheme: 'light',
@ -413,26 +452,9 @@ const sepiaThemeSpec = {
thBackground: '#FDF6E3',
thLibraryMultiselectHover: '#EEE8D5',
},
}
homeCardHover: '#EEE8D5',
homeDivider: '#DDD6C1',
const apolloThemeSpec = {
colors: {
readerBg: '#6A6968',
readerFont: '#F3F3F3',
readerMargin: '#474747',
readerFontHighContrast: 'white',
readerTableHeader: '#FFFFFF',
thLeftMenuBackground: '#3D3D3D',
thNavMenuFooter: '#515151',
thLibrarySelectionColor: '#515151',
thBorderColor: '#6A6968',
thBackground: '#474747',
thBackground2: '#515151',
thLibraryMultiselectHover: '#EEE8D5',
},
}

1
packages/web/pages/highlights/index.tsx
View file

@ -30,6 +30,7 @@ import {
import { highlightColor } from '../../lib/themeUpdater'
import { HighlightViewNote } from '../../components/patterns/HighlightNotes'
import { theme } from '../../components/tokens/stitches.config'
const PAGE_SIZE = 10

35
packages/web/pages/home/index.tsx
View file

@ -122,12 +122,11 @@ const JustAddedHomeSection = (props: HomeSectionProps): JSX.Element => {
fontFamily: '$inter',
fontSize: '16px',
fontWeight: '600',
color: '$readerText',
color: '$homeTextTitle',
}}
>
{props.homeSection.title}
</SpanBox>
{props.homeSection.items.map((homeItem) => {
return <JustAddedItemView key={homeItem.id} homeItem={homeItem} />
})}
@ -149,7 +148,7 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
fontFamily: '$inter',
fontSize: '16px',
fontWeight: '600',
color: '$readerText',
color: '$homeTextTitle',
}}
>
{props.homeSection.title}
@ -232,7 +231,7 @@ const HiddenHomeSection = (props: HomeSectionProps): JSX.Element => {
fontFamily: '$inter',
fontSize: '16px',
fontWeight: '600',
color: '$readerText',
color: '$homeTextTitle',
}}
>
{props.homeSection.title}
@ -299,7 +298,7 @@ const TimeAgo = (props: HomeItemViewProps): JSX.Element => {
fontSize: '12px',
fontWeight: 'medium',
fontFamily: '$inter',
color: '$readerTextSubtle',
color: '$homeTextSubtle',
}}
>
{timeAgo(props.homeItem.date)}
@ -317,7 +316,7 @@ const Title = (props: HomeItemViewProps): JSX.Element => {
lineHeight: '20px',
fontWeight: '600',
fontFamily: '$inter',
color: '$readerText',
color: '$homeTextTitle',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'break-word',
@ -366,7 +365,7 @@ const JustAddedItemView = (props: HomeItemViewProps): JSX.Element => {
padding: '5px',
borderRadius: '5px',
'&:hover': {
bg: '$thBackground',
bg: '$homeCardHover',
borderRadius: '0px',
},
}}
@ -403,7 +402,7 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
borderRadius: '5px',
'&:hover': {
bg: '#323232',
bg: '$homeCardHover',
borderRadius: '0px',
},
}}
@ -450,22 +449,26 @@ const TopicPickHomeItemView = (props: HomeItemViewProps): JSX.Element => {
</SpanBox>
<HStack css={{ gap: '10px', my: '15px', px: '20px' }}>
<Button style="homeAction">
<AddToLibraryActionIcon />
<AddToLibraryActionIcon
color={theme.colors.homeActionIcons.toString()}
/>
</Button>
<Button style="homeAction">
<CommentActionIcon />
<CommentActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
<Button style="homeAction">
<ShareActionIcon />
<ShareActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
<Button style="homeAction">
<ArchiveActionIcon />
<ArchiveActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
<Button style="homeAction">
<RemoveActionIcon />
<RemoveActionIcon color={theme.colors.homeActionIcons.toString()} />
</Button>
</HStack>
<Box css={{ mt: '15px', width: '100%', height: '1px', bg: '#3D3D3D' }} />
<Box
css={{ mt: '15px', width: '100%', height: '1px', bg: '$homeDivider' }}
/>
</VStack>
)
}
@ -537,7 +540,7 @@ const SourceInfo = (props: HomeItemViewProps) => (
fontFamily: '$inter',
fontWeight: '500',
fontSize: '13px',
color: '$readerFont',
color: '$homeTextSource',
textDecoration: 'underline',
}}
>
@ -625,7 +628,7 @@ const SubscriptionSourceHoverContent = (
css={{
fontFamily: '$inter',
fontSize: '13px',
color: '$thTextSubtle4',
color: '$homeTextBody',
}}
>
{subscription ? <>{subscription.description}</> : <></>}