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

Merge pull request #257 from omnivore-app/OMN-134

Browse source 
[OMN-134] Update library cards based on new design
This commit is contained in:
Satindar Dhillon 2022-04-06 14:51:26 -07:00 committed by GitHub
commit f923eb204c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 499 additions and 306 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/web/components/elements/ProgressBar.tsx Normal file
View file

@ -0,0 +1,30 @@
import { Box } from './../elements/LayoutPrimitives'
type ProgressBarProps = {
fillPercentage: number
fillColor: string
backgroundColor: string
borderRadius: string
}
export function ProgressBar(props: ProgressBarProps): JSX.Element {
return (
<Box
css={{
height: '4px',
width: '100%',
borderRadius: '$1',
overflow: 'hidden',
}}
>
<Box
css={{
height: '100%',
width: `${props.fillPercentage}%`,
backgroundColor: props.fillColor,
borderRadius: props.borderRadius,
}}
/>
</Box>
)
}

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

@ -51,7 +51,7 @@ function articleSubtitle(url: string, author?: string): string {
}
export function authoredByText(author: string): string {
return `By ${removeHTMLTags(author)}`
return `by ${removeHTMLTags(author)}`
}
function removeHTMLTags(str: string | null | undefined): string {

22
packages/web/components/patterns/LibraryCards/CardTypes.tsx Normal file
View file

@ -0,0 +1,22 @@
import { LayoutType } from '../../templates/homeFeed/HomeFeedContainer'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import type { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
export type LinkedItemCardAction =
| 'showDetail'
| 'showOriginal'
| 'archive'
| 'unarchive'
| 'delete'
| 'mark-read'
| 'mark-unread'
| 'share'
| 'snooze'
export type LinkedItemCardProps = {
item: LibraryItemNode
layout: LayoutType
viewer: UserBasicData
originText?: string
handleAction: (action: LinkedItemCardAction) => void
}

188
packages/web/components/patterns/LibraryCards/GridLinkedItemCard.tsx Normal file
View file

@ -0,0 +1,188 @@
import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
import { CoverImage } from '../../elements/CoverImage'
import { StyledText } from '../../elements/StyledText'
import { authoredByText } from '../ArticleSubtitle'
import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
import { theme } from '../../tokens/stitches.config'
import { CardMenu } from '../CardMenu'
import { LabelChip } from '../../elements/LabelChip'
import { ProgressBar } from '../../elements/ProgressBar'
import type { LinkedItemCardProps } from './CardTypes'
export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
return (
<VStack
css={{
p: '$2',
pr: '8px',
height: '100%',
width: '100%',
maxWidth: '100%',
borderRadius: '6px',
cursor: 'pointer',
wordBreak: 'break-word',
overflow: 'clip',
border: '1px solid $grayBorder',
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
position: 'relative',
}}
alignment="start"
distribution="start"
onClick={() => {
props.handleAction('showDetail')
}}
>
<Box
css={{
position: 'absolute',
top: '1px',
left: '1px',
width: 'calc(100% - 2px)',
'& > div': {
borderRadius: '100vmax 100vmax 0 0',
},
}}
>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.grayTextContrast.toString()}
borderRadius={
props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
}
/>
</Box>
<VStack
distribution="start"
alignment="start"
css={{
px: '0px',
width: '100%',
pl: '$1',
}}
>
<HStack
alignment="start"
distribution="between"
css={{
width: '100%',
p: '0px',
mr: '-12px',
mt: '15px',
display: 'grid',
gridTemplateColumns: '1fr 24px',
gridTemplateRows: '1fr',
}}
>
<CardTitle title={props.item.title} />
<Box
css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
onClick={(e) => {
// This is here to prevent menu click events from bubbling
// up and causing us to "click" on the link item.
e.stopPropagation()
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
triggerElement={
<MoreOptionsIcon
size={24}
strokeColor={theme.colors.grayTextContrast.toString()}
orientation="horizontal"
/>
}
actionHandler={props.handleAction}
/>
</Box>
</HStack>
<HStack alignment="start" distribution="between">
<StyledText style="caption" css={{ my: '0', mt: '-$2' }}>
{props.item.author && (
<SpanBox css={{ mr: '8px' }}>
{authoredByText(props.item.author)}
</SpanBox>
)}
<SpanBox css={{ textDecorationLine: 'underline' }}>
{props.originText}
</SpanBox>
</StyledText>
</HStack>
</VStack>
<HStack
alignment="start"
distribution="between"
css={{
width: '100%',
pt: '$2',
px: '$1',
pr: '12px',
mt: '7px',
flexGrow: '1',
}}
>
<StyledText
css={{
m: 0,
py: '0px',
mr: '$2',
fontStyle: 'normal',
fontWeight: '400',
fontSize: '14px',
lineHeight: '125%',
color: '$grayTextContrast',
flexGrow: '4',
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 5,
WebkitBoxOrient: 'vertical',
}}
>
{props.item.description}
</StyledText>
{props.item.image && (
<CoverImage
src={props.item.image}
alt="Link Preview Image"
width={135}
height={90}
css={{ ml: '10px', mb: '8px', borderRadius: '3px' }}
onError={(e) => {
;(e.target as HTMLElement).style.display = 'none'
}}
/>
)}
</HStack>
<HStack css={{ mt: '8px' }}>
{props.item.labels?.map(({ description, color }, index) => (
<LabelChip key={index} text={description || ''} color={color} />
))}
</HStack>
</VStack>
)
}
type CardTitleProps = {
title: string
}
function CardTitle(props: CardTitleProps): JSX.Element {
return (
<StyledText
style="listTitle"
css={{
mt: '0',
mb: '0',
fontWeight: '700',
textAlign: 'left',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
width: '100%',
overflow: 'hidden',
}}
>
{props.title}
</StyledText>
)
}

23
packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx Normal file
View file

@ -0,0 +1,23 @@
import { GridLinkedItemCard } from './GridLinkedItemCard'
import { ListLinkedItemCard } from './ListLinkedItemCard'
import type { LinkedItemCardProps } from './CardTypes'
const siteName = (originalArticleUrl: string, itemUrl: string): string => {
try {
return new URL(originalArticleUrl).hostname
} catch {}
try {
return new URL(itemUrl).hostname
} catch {}
return ''
}
export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
const originText = siteName(props.item.originalArticleUrl, props.item.url)
if (props.layout == 'LIST_LAYOUT') {
return <ListLinkedItemCard {...props} originText={originText} />
} else {
return <GridLinkedItemCard {...props} originText={originText} />
}
}

213
packages/web/components/patterns/LibraryCards/ListLinkedItemCard.tsx Normal file
View file

@ -0,0 +1,213 @@
import {
Box,
HStack,
VStack,
MediumBreakpointBox,
} from '../../elements/LayoutPrimitives'
import { StyledText } from '../../elements/StyledText'
import { authoredByText } from '../ArticleSubtitle'
import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
import { theme } from '../../tokens/stitches.config'
import { CardMenu } from '../CardMenu'
import type { LinkedItemCardProps } from './CardTypes'
import { ProgressBar } from '../../elements/ProgressBar'
export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
return (
<MediumBreakpointBox
smallerLayoutNode={<ListLinkedItemCardNarrow {...props} />}
largerLayoutNode={<ListLinkedItemCardWide {...props} />}
/>
)
}
export function ListLinkedItemCardNarrow(
props: LinkedItemCardProps
): JSX.Element {
return (
<Box
css={{
p: '$3',
height: '100%',
width: '100%',
maxWidth: '100%',
borderRadius: 0,
cursor: 'pointer',
wordBreak: 'break-word',
border: '1px solid $grayBorder',
borderBottom: 'none',
alignItems: 'center',
display: 'grid',
gridTemplateColumns: '1fr 24px',
gridTemplateRows: '1fr',
}}
onClick={() => {
props.handleAction('showDetail')
}}
>
<HStack
distribution="start"
alignment="end"
css={{
px: '$2',
pl: '0px',
}}
>
<VStack>
<StyledText
style="listTitle"
css={{
mt: '0px',
mb: '$1',
textAlign: 'left',
lineHeight: 'normal',
}}
>
{props.item.title}
</StyledText>
<HStack>
{props.item.author && (
<StyledText style="caption" css={{ my: '$1' }}>
{authoredByText(props.item.author)}
</StyledText>
)}
<StyledText
style="caption"
css={{
my: '$1',
ml: props.item.author ? '8px' : 0,
textDecorationLine: 'underline',
}}
>
{props.originText}
</StyledText>
</HStack>
</VStack>
</HStack>
<Box
css={{
alignSelf: 'end',
alignItems: 'center',
display: 'grid',
placeItems: 'center',
}}
onClick={(e) => {
// This is here to prevent menu click events from bubbling
// up and causing us to "click" on the link item.
e.stopPropagation()
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
triggerElement={
<MoreOptionsIcon
size={24}
strokeColor={theme.colors.grayTextContrast.toString()}
orientation="horizontal"
/>
}
actionHandler={props.handleAction}
/>
</Box>
</Box>
)
}
export function ListLinkedItemCardWide(
props: LinkedItemCardProps
): JSX.Element {
return (
<HStack
css={{
p: '$3',
height: '100%',
width: '100%',
maxWidth: '100%',
borderRadius: 0,
cursor: 'pointer',
wordBreak: 'break-word',
border: '1px solid $grayBorder',
borderBottom: 'none',
alignItems: 'center',
}}
onClick={() => {
props.handleAction('showDetail')
}}
>
<HStack
distribution="start"
alignment="end"
css={{
px: '$2',
flexGrow: 1,
pl: '0px',
}}
>
<StyledText
style="listTitle"
css={{ mt: '0px', mb: '$1', textAlign: 'left', lineHeight: 'normal' }}
>
{props.item.title}
</StyledText>
{props.item.author && (
<StyledText style="caption" css={{ my: '$1', ml: '8px' }}>
{authoredByText(props.item.author)}
</StyledText>
)}
<StyledText
style="caption"
css={{ my: '$1', ml: '8px', textDecorationLine: 'underline' }}
>
{props.originText}
</StyledText>
</HStack>
<Box
css={{
width: '40px',
height: '8px',
mr: '$2',
backgroundColor: '$grayBase',
display: 'grid',
placeItems: 'center',
borderRadius: '6px',
border: '1px solid $grayBorder',
px: '1px',
}}
>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.grayTextContrast.toString()}
borderRadius={'8px'}
/>
</Box>
<Box
css={{
alignSelf: 'end',
alignItems: 'center',
display: 'grid',
placeItems: 'center',
}}
onClick={(e) => {
// This is here to prevent menu click events from bubbling
// up and causing us to "click" on the link item.
e.stopPropagation()
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
triggerElement={
<MoreOptionsIcon
size={24}
strokeColor={theme.colors.grayTextContrast.toString()}
orientation="horizontal"
/>
}
actionHandler={props.handleAction}
/>
</Box>
</HStack>
)
}

270
packages/web/components/patterns/LinkedItemCard.tsx
View file

@ -1,270 +0,0 @@
import { Box, VStack, HStack, SpanBox } from './../elements/LayoutPrimitives'
import type { LibraryItemNode } from '../../lib/networking/queries/useGetLibraryItemsQuery'
import { CoverImage } from './../elements/CoverImage'
import { StyledText } from './../elements/StyledText'
import { authoredByText } from './../patterns/ArticleSubtitle'
import { MoreOptionsIcon } from './../elements/images/MoreOptionsIcon'
import { theme } from './../tokens/stitches.config'
import { CardMenu } from './../patterns/CardMenu'
import { LayoutType } from '../templates/homeFeed/HomeFeedContainer'
import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
export type LinkedItemCardAction =
| 'showDetail'
| 'showOriginal'
| 'archive'
| 'unarchive'
| 'delete'
| 'mark-read'
| 'mark-unread'
| 'share'
| 'snooze'
type LinkedItemCardProps = {
item: LibraryItemNode
layout: LayoutType
viewer: UserBasicData
handleAction: (action: LinkedItemCardAction) => void
}
const siteName = (originalArticleUrl: string, itemUrl: string): string => {
try {
return new URL(originalArticleUrl).hostname
} catch { }
try {
return new URL(itemUrl).hostname
} catch { }
return ''
}
export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
if (props.layout == 'LIST_LAYOUT') {
return <ListLinkedItemCard {...props} />
} else {
return <GridLinkedItemCard {...props} />
}
}
export function GridLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
const originText = siteName(props.item.originalArticleUrl, props.item.url)
return (
// <Link href={`/${username}/${props.item.slug}`} passHref={true}>
<VStack
css={{
p: '$2',
pr: '8px',
height: '100%',
width: '100%',
maxWidth: '100%',
borderRadius: '6px',
cursor: 'pointer',
wordBreak: 'break-word',
overflow: 'clip',
border: '1px solid $grayBorder',
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
}}
alignment='start'
distribution='start'
onClick={() => {
props.handleAction('showDetail')
}}
>
<VStack
distribution="start"
alignment="start"
css={{
px: '0px',
width: '100%',
pl: '$1',
}}
>
<HStack alignment='start' distribution='between' css={{ width: '100%', p: '0px', mr: '-12px' }}>
<StyledText style="caption" css={{ my: '$1' }}>
{originText}
</StyledText>
<Box
css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
onClick={(e) => {
// This is here to prevent menu click events from bubbling
// up and causing us to "click" on the link item.
e.stopPropagation()
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
triggerElement={
<MoreOptionsIcon
size={24}
strokeColor={theme.colors.grayTextContrast.toString()}
orientation="vertical"
/>
}
actionHandler={props.handleAction}
/>
</Box>
</HStack>
<StyledText
style="listTitle"
css={{ mt: '0px', mb: '$1', textAlign: 'left', pr: '24px' }}
>
{props.item.title}
</StyledText>
</VStack>
<HStack alignment='start' distribution='between' css={{
width: '100%',
pt: '$2',
px: '$1',
pr: '12px',
flexGrow: '1',
}}>
<StyledText
style="caption"
css={{
m: 0,
py: '0px',
flexGrow: '4',
}}
>
{props.item.author && (
<SpanBox css={{ my: '$1' }}>
{authoredByText(props.item.author)}
{props.item.description ? ' \u2013 ' : ''}
</SpanBox>
)}
{props.item.description?.substring(0, 300)}
</StyledText>
{props.item.image && (
<CoverImage
src={props.item.image}
alt="Link Preview Image"
width={88}
height={88}
css={{ ml: '8px', mb: '8px', mt: '8px' }}
onError={(e) => {
;(e.target as HTMLElement).style.display = 'none'
}}
/>
)}
</HStack>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.grayTextContrast.toString()}
/>
</VStack>
// </Link>
)
}
export function ListLinkedItemCard(props: LinkedItemCardProps): JSX.Element {
const originText = siteName(props.item.originalArticleUrl, props.item.url)
return (
// <Link href={`/${username}/${props.item.slug}`} passHref={true}>
<VStack
css={{
p: '$2',
height: '100%',
width: '100%',
maxWidth: '100%',
borderRadius: 0,
cursor: 'pointer',
wordBreak: 'break-word',
borderTop: '1px solid $grayBorder',
boxShadow: '0px 3px 11px rgba(32, 31, 29, 0.04)',
}}
onClick={() => {
props.handleAction('showDetail')
}}
>
<HStack
distribution="start"
alignment="start"
css={{ width: '100%', justifySelf: 'start' }}
>
<VStack
distribution="start"
alignment="start"
css={{
px: '$2',
flexGrow: 1,
pl: '0px',
}}
>
<StyledText
style="listTitle"
css={{ mt: '0px', mb: '$1', textAlign: 'left' }}
>
{props.item.title}
</StyledText>
{props.item.author && (
<StyledText style="caption" css={{ my: '$1' }}>
{authoredByText(props.item.author)}
</StyledText>
)}
<StyledText style="caption" css={{ my: '$1' }}>
{originText}
</StyledText>
</VStack>
<Box
css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
onClick={(e) => {
// This is here to prevent menu click events from bubbling
// up and causing us to "click" on the link item.
e.stopPropagation()
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
triggerElement={
<MoreOptionsIcon
size={24}
strokeColor={theme.colors.grayTextContrast.toString()}
orientation="vertical"
/>
}
actionHandler={props.handleAction}
/>
</Box>
</HStack>
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor={theme.colors.highlight.toString()}
backgroundColor={theme.colors.grayTextContrast.toString()}
/>
</VStack>
// </Link>
)
}
type ProgressBarProps = {
fillPercentage: number
fillColor: string
backgroundColor: string
}
function ProgressBar(props: ProgressBarProps): JSX.Element {
return (
<Box
css={{
height: '4px',
width: '100%',
borderRadius: '$1',
backgroundColor: props.backgroundColor,
overflow: 'hidden',
mt: '$1',
}}
>
<Box
css={{
height: '100%',
width: `${props.fillPercentage}%`,
backgroundColor: props.fillColor,
}}
/>
</Box>
)
}

47
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -1,14 +1,12 @@
import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
import type {
LibraryItem,
LibraryItemsQueryInput,
} from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
import {
LinkedItemCard,
LinkedItemCardAction,
} from '../../patterns/LinkedItemCard'
import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes'
import { LinkedItemCard } from '../../patterns/LibraryCards/LinkedItemCard'
import { useRouter } from 'next/router'
import { Button } from '../../elements/Button'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@ -115,6 +113,13 @@ export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element {
setSize(size + 1)
}, [size, isValidating])
useEffect(() => {
if (isValidating || !hasMore || size !== 1) {
return
}
setSize(size + 1)
}, [size, isValidating])
const focusFirstItem = useCallback(() => {
if (libraryItems.length < 1) {
return
@ -433,6 +438,7 @@ type HomeFeedContentProps = {
function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
const { viewerData } = useGetViewerQuery()
const { preferencesData, isValidating: isValidatingPreferences } =
useGetUserPreferences()
const [layout, setLayout] = useState<LayoutType>(
@ -553,19 +559,15 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
gridAutoRows: 'auto',
borderRadius: '8px',
gridGap: layout == 'LIST_LAYOUT' ? '0' : '$3',
border:
props.hasData && layout == 'LIST_LAYOUT'
? '1px solid $grayBorder'
: 'none',
marginTop: layout == 'LIST_LAYOUT' ? '21px' : '0',
marginBottom: '0px',
paddingTop: layout == 'LIST_LAYOUT' ? '2px' : '21px',
paddingTop: layout == 'LIST_LAYOUT' ? '0' : '21px',
paddingBottom: layout == 'LIST_LAYOUT' ? '0px' : '21px',
overflow: 'visible',
overflow: 'hidden',
'@smDown': {
border: 'unset',
width: layout == 'LIST_LAYOUT' ? '100vw' : undefined,
margin: layout == 'LIST_LAYOUT' ? '0 -16px' : undefined,
margin: layout == 'LIST_LAYOUT' ? '16px -16px' : undefined,
borderRadius: layout == 'LIST_LAYOUT' ? 0 : undefined,
},
'@md': {
@ -577,24 +579,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
},
}}
>
{props.hasData && layout === 'LIST_LAYOUT' && (
// list view gets a title
<Box
css={{
height: '42px',
paddingLeft: '9px',
paddingBottom: '8px',
'@smDown': { height: '20px' },
}}
>
<StyledText
style="caption"
css={{ '@smDown': { visibility: 'collapse' } }}
>
{props.totalItems} links
</StyledText>
</Box>
)}
{props.items.map((linkedItem) => (
<Box
className="linkedItemCard"
@ -602,6 +586,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
tabIndex={0}
key={linkedItem.node.id}
css={{
width: '100%',
'&> div': {
bg: '$grayBg',
},

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

@ -102,7 +102,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
borderStyles: {},
shadows: {
panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
cardBoxShadow: '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)'
cardBoxShadow:
'0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
},
zIndices: {},
transitions: {},
@ -148,7 +149,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
avatarFont: '#0A0806',
labelButtonsBg: '#F5F5F4',
tooltipIcons: '#FDFAEC'
tooltipIcons: '#FDFAEC',
},
},
media: {
@ -197,8 +198,9 @@ const darkThemeSpec = {
labelButtonsBg: '#5F5E58',
},
shadows: {
cardBoxShadow: '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)'
}
cardBoxShadow:
'0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
},
}
// Avatar Fallback color