From bf0a7d2865c5b9a503e4480606243b615f435a0f Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Thu, 9 Mar 2023 13:18:44 +0800 Subject: [PATCH] Remove unused colors from theme --- packages/web/components/elements/Button.tsx | 2 +- .../components/elements/MobileInstallHelp.tsx | 2 +- .../web/components/elements/StyledText.tsx | 2 +- .../templates/article/ArticleContainer.tsx | 2 +- .../templates/article/ShareModal.tsx | 148 +++++++++++++----- .../article/SkeletonArticleContainer.tsx | 2 +- .../web/components/tokens/stitches.config.ts | 20 --- 7 files changed, 112 insertions(+), 66 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 43f7bc34c..a219854f7 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -130,7 +130,7 @@ export const Button = styled('button', { ctaModal: { height: '32px', verticalAlign: 'middle', - color: '$textDefault', + color: '$thTextContrast', backgroundColor: '$grayBase', fontWeight: '600', padding: '0px 12px', diff --git a/packages/web/components/elements/MobileInstallHelp.tsx b/packages/web/components/elements/MobileInstallHelp.tsx index 926e6c287..b26a9bc74 100644 --- a/packages/web/components/elements/MobileInstallHelp.tsx +++ b/packages/web/components/elements/MobileInstallHelp.tsx @@ -257,7 +257,7 @@ export default function MobileInstallHelp({ height: 35, width: 35, cursor: 'pointer', - backgroundColor: '$tooltipIcons', + backgroundColor: '$labelButtonsBg', ...(selectedTooltip !== item.label && { filter: 'grayscale(1)', }), diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index 69858fe21..be03ade2f 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -85,7 +85,7 @@ const textVariants = { fontWeight: '600', fontSize: '16px', lineHeight: '1', - color: '$textDefault', + color: '$thTextContrast', }, shareHighlightModalAnnotation: { fontSize: '18px', diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index 93f427d7e..35263c034 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -263,7 +263,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { ? theme.colors.readerFontHighContrast.toString() : theme.colors.readerFont.toString(), readerTableHeaderColor: theme.colors.readerTableHeader.toString(), - readerHeadersColor: theme.colors.readerHeader.toString(), + readerHeadersColor: theme.colors.readerFont.toString(), } const recommendationsWithNotes = useMemo(() => { diff --git a/packages/web/components/templates/article/ShareModal.tsx b/packages/web/components/templates/article/ShareModal.tsx index 4a1bfed14..4e3dea330 100644 --- a/packages/web/components/templates/article/ShareModal.tsx +++ b/packages/web/components/templates/article/ShareModal.tsx @@ -3,13 +3,18 @@ import { ModalContent, ModalOverlay, } from '../../elements/ModalPrimitives' -import { Box, HStack, StyledLink, VStack } from '../../elements/LayoutPrimitives' +import { + Box, + HStack, + StyledLink, + VStack, +} from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' import { StyledText } from '../../elements/StyledText' import { theme } from '../../tokens/stitches.config' import { useCopyLink } from '../../../lib/hooks/useCopyLink' import { CloseIcon } from '../../elements/images/CloseIcon' -import {OmnivoreLogoIcon} from '../../elements/images/OmnivoreNameLogo' +import { OmnivoreLogoIcon } from '../../elements/images/OmnivoreNameLogo' import { useState } from 'react' import { TooltipWrapped } from '../../elements/Tooltip' import { TwitterLogo, FacebookLogo } from 'phosphor-react' @@ -26,16 +31,14 @@ type ShareModalLayoutProps = { children: React.ReactNode } -export function ShareModalLayout( - props: ShareModalLayoutProps -): JSX.Element { +export function ShareModalLayout(props: ShareModalLayoutProps): JSX.Element { const { copyLink, isLinkCopied } = useCopyLink(props.url, props.type) - const [switchOn, setSwitchOn] = useState(false); + const [switchOn, setSwitchOn] = useState(false) const toggleSwitch = () => { - setSwitchOn(!switchOn); + setSwitchOn(!switchOn) } const iconColor = theme.colors.grayText.toString() - + return ( @@ -43,15 +46,29 @@ export function ShareModalLayout( onPointerDownOutside={(event) => { event.preventDefault() }} - css={{ overflow: 'auto', p: '0px', border: '1px solid $grayBorder', boxShadow: 'none'}} + css={{ + overflow: 'auto', + p: '0px', + border: '1px solid $grayBorder', + boxShadow: 'none', + }} > - {props.modalTitle} + + {props.modalTitle} + {props.children} Secret URL @@ -78,45 +106,83 @@ export function ShareModalLayout( tooltipContent="Link copied!" tooltipSide="top" active={isLinkCopied} - style={{background: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}} - arrowStyles={{fill: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}} + style={{ + background: + 'linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;', + }} + arrowStyles={{ + fill: 'linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;', + }} > - + - {switchOn && } + {switchOn && ( + + )} - + - + diff --git a/packages/web/components/templates/article/SkeletonArticleContainer.tsx b/packages/web/components/templates/article/SkeletonArticleContainer.tsx index 73ea03830..6873306e5 100644 --- a/packages/web/components/templates/article/SkeletonArticleContainer.tsx +++ b/packages/web/components/templates/article/SkeletonArticleContainer.tsx @@ -19,7 +19,7 @@ export function SkeletonArticleContainer( fontFamily: props.fontFamily ?? 'inter', readerFontColor: theme.colors.readerFont.toString(), readerTableHeaderColor: theme.colors.readerTableHeader.toString(), - readerHeadersColor: theme.colors.readerHeader.toString(), + readerHeadersColor: theme.colors.readerFont.toString(), } return ( diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 019904201..820a0400e 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -119,10 +119,8 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = grayBg: '#FFFFFF', grayBgActive: '#e6e6e6', grayBorder: '#F0F0F0', - lightBorder: '#F0F0F0', grayTextContrast: '#3A3939', graySolid: '#9C9B9A', - textDefault: 'rgba(255, 255, 255, 0.8)', utilityTextDefault: '#3B3938', utilityTextSubtle: 'rgba(255, 255, 255, 0.65)', textNonessential: 'rgba(10, 8, 6, 0.4)', @@ -132,8 +130,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = grayLine: 'hsl(0 0% 88.7%)', grayBorderHover: 'hsl(0 0% 78.0%)', grayText: '#6A6968', - graySeparator: '#DADADA', - grayProgressBackground: '#FFFFFF', // Semantic Colors highlightBackground: '250, 227, 146', @@ -145,8 +141,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = // Brand Colors omnivoreRed: '#FA5E4A;', omnivoreGray: '#3D3D3D', - omnivoreOrange: '#FF9B3E', - omnivorePeach: 'rgb(255, 212, 146)', omnivoreYellow: 'rgb(255, 234, 159)', omnivoreLightGray: 'rgb(125, 125, 125)', omnivoreCtaYellow: 'rgb(255, 210, 52)', @@ -155,8 +149,6 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = readerBg: 'white', readerFont: '#3D3D3D', readerFontHighContrast: 'black', - readerFontTransparent: 'rgba(61,61,61,0.65)', - readerHeader: '3D3D3D', readerTableHeader: '#FFFFFF', // Avatar Fallback color @@ -164,15 +156,11 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = avatarFont: '#9C7C0A', labelButtonsBg: '#F5F5F4', - tooltipIcons: '#FDFAEC', textSubtle: '#605F5D', - libraryBackground: '#FFFFFF', - libraryActiveMenuItem: '#F8F8F8', border: '#F0F0F0', //utility - textNonEssential: 'rgba(10, 8, 6, 0.4)', overlay: 'rgba(63, 62, 60, 0.2)', // New theme, special naming to keep things straigh @@ -223,7 +211,6 @@ const darkThemeSpec = { grayTextContrast: '#D8D7D7', grayBorder: '#323232', graySolid: '#9C9B9A', - textDefault: 'rgba(10, 8, 6, 0.8)', utilityTextDefault: '#CDCDCD', textNonessential: 'rgba(97, 97, 97, 1)', @@ -232,8 +219,6 @@ const darkThemeSpec = { grayLine: 'hsl(0 0% 19.9%)', grayBorderHover: 'hsl(0 0% 31.2%)', grayText: '#CDCDCD', - graySeparator: '#323232', - grayProgressBackground: '#616161', // Semantic Colors highlightBackground: '134, 119, 64', @@ -246,20 +231,15 @@ const darkThemeSpec = { readerBg: '#303030', readerFont: '#b9b9b9', readerFontHighContrast: 'white', - readerHeader: '#b9b9b9', readerTableHeader: '#FFFFFF', - tooltipIcons: '#5F5E58', avatarBg: '#7B5C3E', avatarFont: '#D9D9D9', textSubtle: '#AAAAAA', - libraryBackground: '#252525', - libraryActiveMenuItem: '#3B3938', border: '#323232', //utility utilityTextSubtle: 'rgba(255, 255, 255, 0.65)', - textNonEssential: 'rgba(10, 8, 6, 0.4)', overlay: 'rgba(10, 8, 6, 0.65)', labelButtonsBg: '#5F5E58',