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.

Sign up for GitHub

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

Jump to bottom

Add dark mode colours for NumberedList titles #9788

Merged
merged 4 commits into from
Dec 7, 2023
Merged

Add dark mode colours for NumberedList titles #9788

merged 4 commits into from
Dec 7, 2023

Conversation

ioannakok
Copy link
Contributor

@ioannakok ioannakok commented Dec 5, 2023 •
edited
Loading

Closes #9739

What does this change?

Adds dark mode for NumberedList titles.

Why?

We want to support dark mode in DCAR

Screenshots

Before After
image image

@ioannakok ioannakok changed the title Add dark mode colours for NumberList titles Add dark mode colours for NumberedList titles Dec 5, 2023
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 5, 2023 •
edited
Loading

Size Change: -5 kB (-1%)

Total Size: 732 kB

Filename Size Change
dotcom-rendering/dist/2323.web.********************.js 0 B -3.88 kB (removed) 🏆
dotcom-rendering/dist/6126.web.********************.js 0 B -2.23 kB (removed) 🏆
dotcom-rendering/dist/AppEmailSignUp-importable.web.********************.js 8.17 kB +892 B (+12%) ⚠️
dotcom-rendering/dist/CarouselForNewsletters-importable.web.********************.js 5.61 kB +225 B (+4%)
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/100.web.********************.js 990 B 0 B
dotcom-rendering/dist/1024.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/1076.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/1136.web.********************.js 884 B 0 B
dotcom-rendering/dist/1178.web.********************.js 504 B 0 B
dotcom-rendering/dist/1226.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/1406.web.********************.js 5.09 kB 0 B
dotcom-rendering/dist/1418.web.********************.js 9.98 kB 0 B
dotcom-rendering/dist/1465.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/1520.web.********************.js 492 B 0 B
dotcom-rendering/dist/1521.web.********************.js 5.48 kB 0 B
dotcom-rendering/dist/1659.web.********************.js 518 B 0 B
dotcom-rendering/dist/1714.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/1939.web.********************.js 3.59 kB 0 B
dotcom-rendering/dist/1987.web.********************.js 3.15 kB 0 B
dotcom-rendering/dist/2092.web.********************.js 849 B 0 B
dotcom-rendering/dist/2096.web.********************.js 13 kB 0 B
dotcom-rendering/dist/2186.web.********************.js 916 B 0 B
dotcom-rendering/dist/2394.web.********************.js 6.34 kB 0 B
dotcom-rendering/dist/2510.web.********************.js 663 B 0 B
dotcom-rendering/dist/2511.web.********************.js 819 B 0 B
dotcom-rendering/dist/254.web.********************.js 638 B 0 B
dotcom-rendering/dist/279.web.********************.js 2.48 kB 0 B
dotcom-rendering/dist/2848.web.********************.js 16.2 kB 0 B
dotcom-rendering/dist/2879.web.********************.js 910 B 0 B
dotcom-rendering/dist/2919.web.********************.js 900 B 0 B
dotcom-rendering/dist/2923.web.********************.js 720 B 0 B
dotcom-rendering/dist/3030.web.********************.js 957 B 0 B
dotcom-rendering/dist/3111.web.********************.js 590 B 0 B
dotcom-rendering/dist/3149.web.********************.js 636 B 0 B
dotcom-rendering/dist/3265.web.********************.js 916 B 0 B
dotcom-rendering/dist/3302.web.********************.js 820 B 0 B
dotcom-rendering/dist/3389.web.********************.js 884 B 0 B
dotcom-rendering/dist/3662.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/3767.web.********************.js 2.84 kB 0 B
dotcom-rendering/dist/3795.web.********************.js 797 B 0 B
dotcom-rendering/dist/3968.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/4012.web.********************.js 783 B 0 B
dotcom-rendering/dist/4251.web.********************.js 8.9 kB 0 B
dotcom-rendering/dist/4349.web.********************.js 775 B 0 B
dotcom-rendering/dist/4591.web.********************.js 404 B 0 B
dotcom-rendering/dist/4593.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/4610.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/4627.web.********************.js 783 B 0 B
dotcom-rendering/dist/4797.web.********************.js 744 B 0 B
dotcom-rendering/dist/480.web.********************.js 524 B 0 B
dotcom-rendering/dist/489.web.********************.js 5.22 kB 0 B
dotcom-rendering/dist/5332.web.********************.js 820 B 0 B
dotcom-rendering/dist/5495.web.********************.js 676 B 0 B
dotcom-rendering/dist/5515.web.********************.js 30 kB 0 B
dotcom-rendering/dist/5688.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/5744.web.********************.js 720 B 0 B
dotcom-rendering/dist/5843.web.********************.js 4.69 kB 0 B
dotcom-rendering/dist/6068.web.********************.js 775 B 0 B
dotcom-rendering/dist/6263.web.********************.js 3.98 kB 0 B
dotcom-rendering/dist/6295.web.********************.js 999 B 0 B
dotcom-rendering/dist/639.web.********************.js 951 B 0 B
dotcom-rendering/dist/6428.web.********************.js 741 B 0 B
dotcom-rendering/dist/657.web.********************.js 2.46 kB 0 B
dotcom-rendering/dist/6609.web.********************.js 872 B 0 B
dotcom-rendering/dist/6967.web.********************.js 850 B 0 B
dotcom-rendering/dist/721.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/7569.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/7650.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7701.web.********************.js 647 B 0 B
dotcom-rendering/dist/7842.web.********************.js 2.36 kB 0 B
dotcom-rendering/dist/8085.web.********************.js 2.59 kB 0 B
dotcom-rendering/dist/8112.web.********************.js 3.37 kB 0 B
dotcom-rendering/dist/8268.web.********************.js 4.28 kB 0 B
dotcom-rendering/dist/8329.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/8395.web.********************.js 580 B 0 B
dotcom-rendering/dist/8401.web.********************.js 922 B 0 B
dotcom-rendering/dist/8414.web.********************.js 4.92 kB 0 B
dotcom-rendering/dist/8620.web.********************.js 5.78 kB 0 B
dotcom-rendering/dist/9196.web.********************.js 784 B 0 B
dotcom-rendering/dist/9390.web.********************.js 743 B 0 B
dotcom-rendering/dist/9422.web.********************.js 614 B 0 B
dotcom-rendering/dist/9457.web.********************.js 6.63 kB 0 B
dotcom-rendering/dist/9581.web.********************.js 797 B 0 B
dotcom-rendering/dist/9582.web.********************.js 710 B 0 B
dotcom-rendering/dist/9585.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/9597.web.********************.js 3.25 kB 0 B
dotcom-rendering/dist/9617.web.********************.js 1 kB 0 B
dotcom-rendering/dist/9724.web.********************.js 5.01 kB 0 B
dotcom-rendering/dist/AdPortals-importable.web.********************.js 3.62 kB -5 B (0%)
dotcom-rendering/dist/AlreadyVisited-importable.web.********************.js 412 B 0 B
dotcom-rendering/dist/AppsEpic-importable.web.********************.js 4 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.web.********************.js 2.4 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/Branding-importable.web.********************.js 2.48 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.web.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.web.********************.js 5.28 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.web.********************.js 6.79 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.web.********************.js 6 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/Carousel-importable.web.********************.js 7.71 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.web.********************.js 500 B 0 B
dotcom-rendering/dist/CommentCount-importable.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/DiscussionContainer-importable.web.********************.js 24.3 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.web.********************.js 4.09 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.web.********************.js 607 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.web.********************.js 3.07 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.web.********************.js 336 B 0 B
dotcom-rendering/dist/frameworks.web.********************.js 20.8 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.web.********************.js 9.62 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.web.********************.js 1.52 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.web.********************.js 13.4 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.web.********************.js 9 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.web.********************.js 790 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.web.********************.js 10.8 kB 0 B
dotcom-rendering/dist/index.web.********************.js 45.3 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.web.********************.js 5.92 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.web.********************.js 2.71 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.web.********************.js 1.2 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.web.********************.js 430 B 0 B
dotcom-rendering/dist/LightboxJavascript-importable.web.********************.js 4.64 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/Liveness-importable.web.********************.js 3.18 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.web.********************.js 5.08 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.web.********************.js 5.58 kB 0 B
dotcom-rendering/dist/Metrics-importable.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.web.********************.js 8.35 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.web.********************.js 3.74 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.web.********************.js 547 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.web.********************.js 810 B 0 B
dotcom-rendering/dist/PulsingDot-importable.web.********************.js 744 B 0 B
dotcom-rendering/dist/QandaAtom-importable.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.web.********************.js 466 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.web.********************.js 6.18 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.web.********************.js 1.92 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.web.********************.js 6.41 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.web.********************.js 4.93 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.web.********************.js 2.08 kB 0 B
dotcom-rendering/dist/sentry.web.********************.js 772 B 0 B
dotcom-rendering/dist/SetABTests-importable.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.web.********************.js 481 B 0 B
dotcom-rendering/dist/shimport.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.web.********************.js 642 B 0 B
dotcom-rendering/dist/ShowMore-importable.web.********************.js 5.68 kB 0 B
dotcom-rendering/dist/SignInGateMain.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.web.********************.js 4.94 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.web.********************.js 5.55 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.web.********************.js 6.57 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.web.********************.js 5.43 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.web.********************.js 5.74 kB 0 B
dotcom-rendering/dist/SubNav-importable.web.********************.js 2.36 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.web.********************.js 6.3 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.web.********************.js 1.01 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.web.********************.js 5.6 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.web.********************.js 3.5 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.web.********************.js 3.99 kB 0 B

compressed-size-action

@ioannakok ioannakok marked this pull request as ready for review December 5, 2023 17:07
@ioannakok ioannakok requested a review from a team as a code owner December 5, 2023 17:07
@ioannakok ioannakok requested a review from JamieB-gu December 6, 2023 15:31
ioannakok
ioannakok commented Dec 6, 2023
View reviewed changes
dotcom-rendering/src/lib/renderElement.tsx
@@ -474,7 +474,7 @@ export const renderElement = ({
<NumberedTitleBlockComponent
position={element.position}
html={element.html}
format={element.format}
format={format}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changing the type from FEFormat to ArticleFormat so that we can see the palette changes in the stories. Previously format was ignored.

@ioannakok ioannakok requested a review from a team December 6, 2023 15:35
@ioannakok @mxdvl
Make numbered list neutral[86] in dark mode
2dbc26b 
Also,`titleStyles` does not need to be a function in `NumberedTitleBlockComponent`.

Co-authored-by: Max Duval <[email protected]>
@abeddow91 abeddow91 merged commit cc08a2e into main Dec 7, 2023
30 checks passed
@abeddow91 abeddow91 deleted the numbered-list-titles-dark-mode branch December 7, 2023 10:42
@prout-bot
Copy link

Overdue on PROD (created by @ioannakok and merged by @abeddow91 58 minutes and 19 seconds ago) What's gone wrong?

@prout-bot
Copy link

Seen on PROD (created by @ioannakok and merged by @abeddow91 1 hour, 12 minutes and 40 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mxdvl mxdvl mxdvl left review comments

@JamieB-gu JamieB-gu Awaiting requested review from JamieB-gu

Assignees
No one assigned
Labels
dotcom-rendering Seen-on-PROD
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

DarkMode - NumberedList titles
5 participants
@ioannakok @prout-bot @mxdvl @JamieB-gu @abeddow91