Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement darkmode for article body links #9520

Merged
merged 1 commit into from
Nov 16, 2023
Merged

Conversation

sophie-macmillan
Copy link
Contributor

What does this change?

Updates the article links to use the palette. The current implementation of this in AR is a neutral link colour rather than the pillar colour

Why?

This is part of a larger body of work to support dark mode on apps.
Resolves #9497

Screenshots

Before After
2023-11-16 10 00 07 2023-11-16 10 02 55
2023-11-16 10 01 47 2023-11-16 10 03 17

Copy link

github-actions bot commented Nov 16, 2023

Size Change: 0 B

Total Size: 699 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1076.web.********************.js 3.08 kB
dotcom-rendering/dist/1149.web.********************.js 2.92 kB
dotcom-rendering/dist/1226.web.********************.js 3.66 kB
dotcom-rendering/dist/1244.web.********************.js 865 B
dotcom-rendering/dist/1294.web.********************.js 5.36 kB
dotcom-rendering/dist/1406.web.********************.js 5.09 kB
dotcom-rendering/dist/1418.web.********************.js 10.2 kB
dotcom-rendering/dist/1465.web.********************.js 3.32 kB
dotcom-rendering/dist/1486.web.********************.js 744 B
dotcom-rendering/dist/1521.web.********************.js 5.48 kB
dotcom-rendering/dist/1659.web.********************.js 518 B
dotcom-rendering/dist/1848.web.********************.js 644 B
dotcom-rendering/dist/1959.web.********************.js 29.5 kB
dotcom-rendering/dist/1987.web.********************.js 3.12 kB
dotcom-rendering/dist/1997.web.********************.js 744 B
dotcom-rendering/dist/2071.web.********************.js 745 B
dotcom-rendering/dist/2096.web.********************.js 12.9 kB
dotcom-rendering/dist/21.web.********************.js 758 B
dotcom-rendering/dist/2126.web.********************.js 884 B
dotcom-rendering/dist/2133.web.********************.js 4.46 kB
dotcom-rendering/dist/2201.web.********************.js 778 B
dotcom-rendering/dist/2228.web.********************.js 899 B
dotcom-rendering/dist/2339.web.********************.js 778 B
dotcom-rendering/dist/2351.web.********************.js 3.34 kB
dotcom-rendering/dist/2394.web.********************.js 2.66 kB
dotcom-rendering/dist/2467.web.********************.js 2.08 kB
dotcom-rendering/dist/2494.web.********************.js 774 B
dotcom-rendering/dist/2546.web.********************.js 3.72 kB
dotcom-rendering/dist/275.web.********************.js 697 B
dotcom-rendering/dist/3024.web.********************.js 621 B
dotcom-rendering/dist/3146.web.********************.js 6.53 kB
dotcom-rendering/dist/3358.web.********************.js 637 B
dotcom-rendering/dist/356.web.********************.js 826 B
dotcom-rendering/dist/3960.web.********************.js 619 B
dotcom-rendering/dist/3968.web.********************.js 3.79 kB
dotcom-rendering/dist/4113.web.********************.js 757 B
dotcom-rendering/dist/4265.web.********************.js 2.79 kB
dotcom-rendering/dist/4306.web.********************.js 6.46 kB
dotcom-rendering/dist/4591.web.********************.js 404 B
dotcom-rendering/dist/4593.web.********************.js 1.74 kB
dotcom-rendering/dist/4734.web.********************.js 759 B
dotcom-rendering/dist/480.web.********************.js 524 B
dotcom-rendering/dist/5021.web.********************.js 963 B
dotcom-rendering/dist/5071.web.********************.js 941 B
dotcom-rendering/dist/5211.web.********************.js 2.92 kB
dotcom-rendering/dist/5225.web.********************.js 6.67 kB
dotcom-rendering/dist/5474.web.********************.js 620 B
dotcom-rendering/dist/5688.web.********************.js 3.79 kB
dotcom-rendering/dist/5967.web.********************.js 2.37 kB
dotcom-rendering/dist/5974.web.********************.js 742 B
dotcom-rendering/dist/6118.web.********************.js 682 B
dotcom-rendering/dist/6126.web.********************.js 2.23 kB
dotcom-rendering/dist/640.web.********************.js 711 B
dotcom-rendering/dist/6437.web.********************.js 867 B
dotcom-rendering/dist/6534.web.********************.js 575 B
dotcom-rendering/dist/6541.web.********************.js 811 B
dotcom-rendering/dist/657.web.********************.js 2.46 kB
dotcom-rendering/dist/6623.web.********************.js 3.65 kB
dotcom-rendering/dist/7133.web.********************.js 699 B
dotcom-rendering/dist/7305.web.********************.js 886 B
dotcom-rendering/dist/7401.web.********************.js 689 B
dotcom-rendering/dist/7569.web.********************.js 4.94 kB
dotcom-rendering/dist/7650.web.********************.js 23 kB
dotcom-rendering/dist/7688.web.********************.js 814 B
dotcom-rendering/dist/786.web.********************.js 477 B
dotcom-rendering/dist/8085.web.********************.js 2.59 kB
dotcom-rendering/dist/8112.web.********************.js 3.37 kB
dotcom-rendering/dist/8165.web.********************.js 926 B
dotcom-rendering/dist/8170.web.********************.js 490 B
dotcom-rendering/dist/8172.web.********************.js 2.53 kB
dotcom-rendering/dist/818.web.********************.js 2.85 kB
dotcom-rendering/dist/8268.web.********************.js 5.42 kB
dotcom-rendering/dist/8439.web.********************.js 4.97 kB
dotcom-rendering/dist/8447.web.********************.js 963 B
dotcom-rendering/dist/8505.web.********************.js 556 B
dotcom-rendering/dist/8555.web.********************.js 690 B
dotcom-rendering/dist/8622.web.********************.js 858 B
dotcom-rendering/dist/8638.web.********************.js 831 B
dotcom-rendering/dist/9422.web.********************.js 614 B
dotcom-rendering/dist/9490.web.********************.js 825 B
dotcom-rendering/dist/9568.web.********************.js 5.37 kB
dotcom-rendering/dist/9597.web.********************.js 3.25 kB
dotcom-rendering/dist/9724.web.********************.js 5.02 kB
dotcom-rendering/dist/AdPortals-importable.web.********************.js 4.29 kB
dotcom-rendering/dist/AlreadyVisited-importable.web.********************.js 412 B
dotcom-rendering/dist/AppEmailSignUp-importable.web.********************.js 7.21 kB
dotcom-rendering/dist/AppsEpic-importable.web.********************.js 3.96 kB
dotcom-rendering/dist/AppsFooter-importable.web.********************.js 3.44 kB
dotcom-rendering/dist/AppsLightboxImage-importable.web.********************.js 2.82 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.web.********************.js 3.27 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.web.********************.js 4.86 kB
dotcom-rendering/dist/Branding-importable.web.********************.js 2.46 kB
dotcom-rendering/dist/braze-web-sdk-core.web.********************.js 36.9 kB
dotcom-rendering/dist/BrazeMessaging-importable.web.********************.js 5.55 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.web.********************.js 6.47 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.web.********************.js 5.82 kB
dotcom-rendering/dist/CardCommentCount-importable.web.********************.js 2.69 kB
dotcom-rendering/dist/Carousel-importable.web.********************.js 7.75 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.web.********************.js 5.6 kB
dotcom-rendering/dist/ChartAtom-importable.web.********************.js 500 B
dotcom-rendering/dist/CommentCount-importable.web.********************.js 2.85 kB
dotcom-rendering/dist/DiscussionContainer-importable.web.********************.js 23.9 kB
dotcom-rendering/dist/DiscussionMeta-importable.web.********************.js 3.75 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.web.********************.js 3.52 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.web.********************.js 4.05 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.web.********************.js 1.95 kB
dotcom-rendering/dist/FetchOnwardsData-importable.web.********************.js 2.5 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.web.********************.js 3.31 kB
dotcom-rendering/dist/FocusStyles-importable.web.********************.js 607 B
dotcom-rendering/dist/FollowWrapper-importable.web.********************.js 3.9 kB
dotcom-rendering/dist/FooterLabel-importable.web.********************.js 336 B
dotcom-rendering/dist/frameworks.web.********************.js 20.8 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.web.********************.js 3.26 kB
dotcom-rendering/dist/GetMatchNav-importable.web.********************.js 12.6 kB
dotcom-rendering/dist/GetMatchStats-importable.web.********************.js 355 B
dotcom-rendering/dist/GetMatchTabs-importable.web.********************.js 2.31 kB
dotcom-rendering/dist/guardian-braze-components-banner.web.********************.js 13.4 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.web.********************.js 9 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.web.********************.js 790 B
dotcom-rendering/dist/HeaderTopBar-importable.web.********************.js 11 kB
dotcom-rendering/dist/index.web.********************.js 37.8 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.web.********************.js 3.59 kB
dotcom-rendering/dist/InteractiveBlockComponent-importable.web.********************.js 5.81 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.web.********************.js 3.79 kB
dotcom-rendering/dist/InteractiveSupportButton-importable.web.********************.js 4.12 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.web.********************.js 2.96 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.web.********************.js 3.52 kB
dotcom-rendering/dist/LatestLinks-importable.web.********************.js 1.17 kB
dotcom-rendering/dist/LightboxHash-importable.web.********************.js 430 B
dotcom-rendering/dist/LightboxJavascript-importable.web.********************.js 4.43 kB
dotcom-rendering/dist/LiveBlogEpic-importable.web.********************.js 3.04 kB
dotcom-rendering/dist/Liveness-importable.web.********************.js 3.34 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.web.********************.js 4.98 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.web.********************.js 5.58 kB
dotcom-rendering/dist/Metrics-importable.web.********************.js 2.39 kB
dotcom-rendering/dist/MostViewedFooter-importable.web.********************.js 5.38 kB
dotcom-rendering/dist/MostViewedFooterData-importable.web.********************.js 7.7 kB
dotcom-rendering/dist/MostViewedRightWrapper-importable.web.********************.js 3.9 kB
dotcom-rendering/dist/OnwardsUpper-importable.web.********************.js 4.17 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.web.********************.js 3.66 kB
dotcom-rendering/dist/ProfileAtom-importable.web.********************.js 547 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.web.********************.js 810 B
dotcom-rendering/dist/PulsingDot-importable.web.********************.js 744 B
dotcom-rendering/dist/QandaAtom-importable.web.********************.js 542 B
dotcom-rendering/dist/ReaderRevenueDev-importable.web.********************.js 485 B
dotcom-rendering/dist/readerRevenueDevUtils.web.********************.js 2.98 kB
dotcom-rendering/dist/ReaderRevenueLinks-importable.web.********************.js 4.98 kB
dotcom-rendering/dist/RecipeMultiplier-importable.web.********************.js 3.16 kB
dotcom-rendering/dist/RelativeTime-importable.web.********************.js 1.92 kB
dotcom-rendering/dist/RichLinkComponent-importable.web.********************.js 6.34 kB
dotcom-rendering/dist/SecureSignupIframe-importable.web.********************.js 4.93 kB
dotcom-rendering/dist/SendAMessage-importable.web.********************.js 4.38 kB
dotcom-rendering/dist/SendTargetingParams-importable.web.********************.js 2.04 kB
dotcom-rendering/dist/sentry.web.********************.js 773 B
dotcom-rendering/dist/SetABTests-importable.web.********************.js 3.46 kB
dotcom-rendering/dist/SetAdTargeting-importable.web.********************.js 481 B
dotcom-rendering/dist/shimport.web.********************.js 2.78 kB
dotcom-rendering/dist/ShowHideContainers-importable.web.********************.js 642 B
dotcom-rendering/dist/ShowMore-importable.web.********************.js 5.59 kB
dotcom-rendering/dist/SignInGateMain.web.********************.js 3.86 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.web.********************.js 4.93 kB
dotcom-rendering/dist/SignInGateSelector-importable.web.********************.js 3.57 kB
dotcom-rendering/dist/SlotBodyEnd-importable.web.********************.js 8.78 kB
dotcom-rendering/dist/Snow-importable.web.********************.js 3.02 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.web.********************.js 5.42 kB
dotcom-rendering/dist/StickyBottomBanner-importable.web.********************.js 5.92 kB
dotcom-rendering/dist/SubNav-importable.web.********************.js 2.36 kB
dotcom-rendering/dist/SupportTheG-importable.web.********************.js 5.09 kB
dotcom-rendering/dist/TableOfContents-importable.web.********************.js 3.05 kB
dotcom-rendering/dist/TimelineAtom-importable.web.********************.js 1.22 kB
dotcom-rendering/dist/TweetBlockComponent-importable.web.********************.js 1.01 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.web.********************.js 3.6 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.web.********************.js 5.59 kB
dotcom-rendering/dist/VineBlockComponent-importable.web.********************.js 3.46 kB
dotcom-rendering/dist/WeatherWrapper-importable.web.********************.js 5.42 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.web.********************.js 3.88 kB

compressed-size-action

@sophie-macmillan sophie-macmillan added the run_chromatic Runs chromatic when label is applied label Nov 16, 2023
import { decideLanguage, decideLanguageDirection } from '../lib/lang';
import { revealStyles } from '../lib/revealStyles';
import type { ImageForAppsLightbox } from '../model/appsLightboxImages';
import { palette as themePalette } from '../palette';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could keep this as palette

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah we definitely could. I might leave it as is for now so its consistent with the other uses and then we can refactor once we've got rid of the decidePalette

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’ve used schemedPalette as well 😆

@sophie-macmillan sophie-macmillan merged commit 8bdfc10 into main Nov 16, 2023
35 checks passed
@sophie-macmillan sophie-macmillan deleted the sm-darkmode-links branch November 16, 2023 11:14
Comment on lines +102 to +103
border-bottom: 1px solid
${themePalette('--article-link-border-hover')};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, I’m proposing we move to text-decoration-color in Byline: #9494

I also wonder if we should simply use currentColor on hover? Is it ever a different colour to the anchor’s color?

sophie-macmillan added a commit that referenced this pull request Nov 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dotcom-rendering run_chromatic Runs chromatic when label is applied
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support darkmode - Links
3 participants