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

Fix headline byline yellow box dark mode text colour #10215

Merged
merged 3 commits into from
Jan 17, 2024

Conversation

georgeblahblah
Copy link
Contributor

@georgeblahblah georgeblahblah commented Jan 16, 2024

What does this change?

  • Fixes the text colour in Headline bylines displayed in the yellow box.

Closes #10191

Screenshots

Before After
Screen Shot 2024-01-16 at 08 18 40 Screen Shot 2024-01-16 at 08 18 14
Screen Shot 2024-01-16 at 08 19 03 Screen Shot 2024-01-16 at 08 19 24

@georgeblahblah georgeblahblah marked this pull request as ready for review January 16, 2024 08:19
@georgeblahblah georgeblahblah requested a review from a team as a code owner January 16, 2024 08:19
@georgeblahblah georgeblahblah added the run_chromatic Runs chromatic when label is applied label Jan 16, 2024
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

Click here to see the Chromatic project.

Copy link

github-actions bot commented Jan 16, 2024

Size Change: -11 kB (-1%)

Total Size: 744 kB

Filename Size Change
dotcom-rendering/dist/115.client.web.********************.js 0 B -3.74 kB (removed) 🏆
dotcom-rendering/dist/1348.client.web.********************.js 0 B -2.41 kB (removed) 🏆
dotcom-rendering/dist/1733.client.web.********************.js 0 B -2.51 kB (removed) 🏆
dotcom-rendering/dist/3032.client.web.********************.js 0 B -3.27 kB (removed) 🏆
dotcom-rendering/dist/9639.client.web.********************.js 0 B -3.81 kB (removed) 🏆
dotcom-rendering/dist/AppEmailSignUp-importable.client.web.********************.js 0 B -8.16 kB (removed) 🏆
dotcom-rendering/dist/index.client.web.********************.js 47.1 kB -103 B (0%)
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 6.33 kB +1.3 kB (+26%) 🚨
dotcom-rendering/dist/SecureSignupIframe-importable.client.web.********************.js 0 B -3.65 kB (removed) 🏆
dotcom-rendering/dist/5041.client.web.********************.js 3.77 kB +3.77 kB (new file) 🆕
dotcom-rendering/dist/9529.client.web.********************.js 3.23 kB +3.23 kB (new file) 🆕
dotcom-rendering/dist/9806.client.web.********************.js 4.59 kB +4.59 kB (new file) 🆕
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 3.57 kB +3.57 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/11.client.web.********************.js 5.19 kB 0 B
dotcom-rendering/dist/112.client.web.********************.js 823 B 0 B
dotcom-rendering/dist/1191.client.web.********************.js 679 B 0 B
dotcom-rendering/dist/1229.client.web.********************.js 8.67 kB 0 B
dotcom-rendering/dist/1407.client.web.********************.js 639 B 0 B
dotcom-rendering/dist/1459.client.web.********************.js 877 B 0 B
dotcom-rendering/dist/1573.client.web.********************.js 5.85 kB 0 B
dotcom-rendering/dist/1738.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/1749.client.web.********************.js 920 B 0 B
dotcom-rendering/dist/2293.client.web.********************.js 581 B 0 B
dotcom-rendering/dist/2336.client.web.********************.js 4.76 kB +6 B (0%)
dotcom-rendering/dist/307.client.web.********************.js 13.2 kB 0 B
dotcom-rendering/dist/3375.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/393.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/3958.client.web.********************.js 39.9 kB 0 B
dotcom-rendering/dist/3986.client.web.********************.js 496 B 0 B
dotcom-rendering/dist/4040.client.web.********************.js 651 B 0 B
dotcom-rendering/dist/4045.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/405.client.web.********************.js 915 B 0 B
dotcom-rendering/dist/4094.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/4140.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/4215.client.web.********************.js 409 B 0 B
dotcom-rendering/dist/4269.client.web.********************.js 667 B 0 B
dotcom-rendering/dist/4298.client.web.********************.js 8.4 kB +59 B (+1%)
dotcom-rendering/dist/4304.client.web.********************.js 5.46 kB 0 B
dotcom-rendering/dist/4390.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/4438.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/4442.client.web.********************.js 712 B 0 B
dotcom-rendering/dist/476.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/478.client.web.********************.js 594 B 0 B
dotcom-rendering/dist/4870.client.web.********************.js 747 B 0 B
dotcom-rendering/dist/4911.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/4982.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/5020.client.web.********************.js 994 B 0 B
dotcom-rendering/dist/5047.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/5242.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/5290.client.web.********************.js 3.24 kB 0 B
dotcom-rendering/dist/5499.client.web.********************.js 2.47 kB 0 B
dotcom-rendering/dist/5619.client.web.********************.js 926 B 0 B
dotcom-rendering/dist/5730.client.web.********************.js 954 B 0 B
dotcom-rendering/dist/5985.client.web.********************.js 748 B 0 B
dotcom-rendering/dist/6043.client.web.********************.js 852 B 0 B
dotcom-rendering/dist/6140.client.web.********************.js 852 B 0 B
dotcom-rendering/dist/6369.client.web.********************.js 5.08 kB 0 B
dotcom-rendering/dist/6407.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/6651.client.web.********************.js 905 B 0 B
dotcom-rendering/dist/6693.client.web.********************.js 823 B 0 B
dotcom-rendering/dist/6756.client.web.********************.js 525 B 0 B
dotcom-rendering/dist/6853.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/7018.client.web.********************.js 787 B 0 B
dotcom-rendering/dist/7167.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/7356.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/7536.client.web.********************.js 4.31 kB 0 B
dotcom-rendering/dist/7714.client.web.********************.js 5.74 kB 0 B
dotcom-rendering/dist/7855.client.web.********************.js 787 B 0 B
dotcom-rendering/dist/7880.client.web.********************.js 10 kB 0 B
dotcom-rendering/dist/8002.client.web.********************.js 801 B 0 B
dotcom-rendering/dist/8288.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/8344.client.web.********************.js 1.56 kB 0 B
dotcom-rendering/dist/8368.client.web.********************.js 2.98 kB 0 B
dotcom-rendering/dist/8388.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/841.client.web.********************.js 788 B 0 B
dotcom-rendering/dist/8784.client.web.********************.js 5.16 kB +8 B (0%)
dotcom-rendering/dist/8818.client.web.********************.js 746 B 0 B
dotcom-rendering/dist/8937.client.web.********************.js 888 B 0 B
dotcom-rendering/dist/9106.client.web.********************.js 2.93 kB 0 B
dotcom-rendering/dist/9173.client.web.********************.js 724 B 0 B
dotcom-rendering/dist/931.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/9314.client.web.********************.js 823 B 0 B
dotcom-rendering/dist/9398.client.web.********************.js 2.96 kB 0 B
dotcom-rendering/dist/9417.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/9458.client.web.********************.js 5.09 kB 0 B
dotcom-rendering/dist/9461.client.web.********************.js 2.38 kB 0 B
dotcom-rendering/dist/958.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/9591.client.web.********************.js 1.84 kB 0 B
dotcom-rendering/dist/9621.client.web.********************.js 719 B 0 B
dotcom-rendering/dist/9676.client.web.********************.js 888 B 0 B
dotcom-rendering/dist/9856.client.web.********************.js 5.75 kB 0 B
dotcom-rendering/dist/9879.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/9905.client.web.********************.js 8.24 kB 0 B
dotcom-rendering/dist/9970.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/9978.client.web.********************.js 960 B 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 421 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 4.09 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 36.9 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 5.25 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.76 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.76 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 4.42 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 7.79 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 5.65 kB +1 B (0%)
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 3.24 kB 0 B
dotcom-rendering/dist/DiscussionContainer-importable.client.web.********************.js 23.5 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 609 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 789 B 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 341 B 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.7 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 4.15 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.7 kB +4 B (0%)
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 1.63 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 14.7 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 9.29 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 781 B 0 B
dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js 10.9 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.1 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.66 kB 0 B
dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js 3.52 kB +36 B (+1%)
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.19 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.53 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 1.12 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxJavascript-importable.client.web.********************.js 4.57 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.65 kB +16 B (0%)
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.92 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.66 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.29 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.71 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 4.23 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 748 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.96 kB +25 B (+1%)
dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js 5.83 kB +33 B (+1%)
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 1.98 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.21 kB 0 B
dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js 4.39 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 771 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.37 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 482 B 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 643 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5.63 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 6.84 kB +1 B (0%)
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.49 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 5.55 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.24 kB 0 B
dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js 5.96 kB +33 B (+1%)
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.24 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.02 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.67 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.51 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 3.9 kB 0 B

compressed-size-action

@@ -36,7 +36,7 @@ const yellowBoxStyles = (format: ArticleFormat) => css`
box-decoration-break: clone;

a {
color: inherit;
color: ${schemedPalette('--byline-yellowbox-anchor-colour')};
Copy link
Contributor

Choose a reason for hiding this comment

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

not sure we should call it "yellow box" as the background is --byline-background and this may not always be yellow

Copy link
Contributor

Choose a reason for hiding this comment

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

maybe --byline-anchor-text?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm yes this is interesting. I took inspiration for this from the variable name holding these styles, yellowBoxStyles but agree that's not ideal. I'll refactor that as well.

I think --byline-anchor-text is still a bit broad as we only want these styles applied to bylines that appear "in the box", not to every byline anchor.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

hmm maybe --byline-anchor-text can work well actually! I'll see how it looks

Co-authored-by: Max Duval <max.duval@theguardian.com>
Co-authored-by: Charlotte Emms <43961396+cemms1@users.noreply.github.com>
Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
@georgeblahblah georgeblahblah merged commit 31869a3 into main Jan 17, 2024
26 checks passed
@georgeblahblah georgeblahblah deleted the gb/headline-byline branch January 17, 2024 12:42
@prout-bot
Copy link

Seen on PROD (merged by @georgeblahblah 8 minutes and 53 seconds ago) Please check your changes!

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 Seen-on-PROD
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Headline byline inheriting wrong text colour on dark mode
4 participants