Skip to content

Commit 4c8d0dc

Browse files
marjisoundmarjisound
committed
Refactor colors and fix dark mode
1 parent 7ddfd88 commit 4c8d0dc

File tree

6 files changed

+21
-70
lines changed

6 files changed

+21
-70
lines changed

‎dotcom-rendering/src/components/Card/Card.tsx‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -477,11 +477,6 @@ export const Card = ({
477477
showClock={showClock}
478478
serverTime={serverTime}
479479
isTagPage={isTagPage}
480-
colour={
481-
isGallerySecondaryOnward
482-
? palette('--onward-card-footer-text')
483-
: undefined
484-
}
485480
/>
486481
);
487482
};
@@ -512,11 +507,6 @@ export const Card = ({
512507
<CardCommentCount
513508
discussionApiUrl={discussionApiUrl}
514509
discussionId={discussionId}
515-
colour={
516-
isGallerySecondaryOnward
517-
? palette('--onward-card-footer-text')
518-
: undefined
519-
}
520510
/>
521511
</Island>
522512
</Link>
@@ -631,7 +621,7 @@ export const Card = ({
631621

632622
const backgroundColour = () => {
633623
if (isGallerySecondaryOnward) {
634-
return palette('--onward-card-background');
624+
return palette('--onward-background');
635625
}
636626
if (isMediaCardOrNewsletter) {
637627
return palette('--card-media-background');
@@ -876,7 +866,7 @@ export const Card = ({
876866
containerPalette={containerPalette}
877867
topBarColour={
878868
isGallerySecondaryOnward
879-
? palette('--onward-content-border')
869+
? palette('--onward-content-top-border')
880870
: undefined
881871
}
882872
>
@@ -912,11 +902,6 @@ export const Card = ({
912902
showByline={showByline}
913903
isExternalLink={isExternalLink}
914904
showLabsRedesign={showLabsRedesign}
915-
headlineColour={
916-
isGallerySecondaryOnward
917-
? palette('--onward-caption-text')
918-
: undefined
919-
}
920905
/>
921906
{!isUndefined(starRating) ? (
922907
<StarRatingComponent
@@ -1244,11 +1229,6 @@ export const Card = ({
12441229
: undefined
12451230
}
12461231
showLabsRedesign={showLabsRedesign}
1247-
headlineColour={
1248-
isGallerySecondaryOnward
1249-
? palette('--onward-caption-text')
1250-
: undefined
1251-
}
12521232
/>
12531233
{!isUndefined(starRating) ? (
12541234
<StarRatingComponent

‎dotcom-rendering/src/components/FetchMoreGalleriesData.importable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export const FetchMoreGalleriesData = ({
140140
])
141141
}
142142
shouldShimmer={false}
143-
backgroundColor={palette('--onward-more-galleries-background')}
143+
backgroundColor={palette('--onward-background')}
144144
/>
145145
);
146146
}

‎dotcom-rendering/src/components/MoreGalleries.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const standardCardStyles = css`
3535
bottom: 0;
3636
left: -10px; /* shift into the gap */
3737
width: 1px;
38-
background: ${palette('--onward-more-galleries-content-border')};
38+
background: ${palette('--onward-content-border')};
3939
}
4040
}
4141
`;
@@ -60,9 +60,7 @@ const standardCardsListStyles = css`
6060
top: 8px;
6161
bottom: 0;
6262
width: 1px;
63-
background-color: ${palette(
64-
'--onward-more-galleries-content-border',
65-
)};
63+
background-color: ${palette('--onward-content-border')};
6664
}
6765
}
6866
`;
@@ -127,7 +125,7 @@ export const MoreGalleries = (props: Props) => {
127125
return (
128126
<div
129127
css={{
130-
backgroundColor: palette('--onward-more-galleries-background'),
128+
backgroundColor: palette('--onward-background'),
131129
minHeight: 300,
132130
}}
133131
>
@@ -136,17 +134,15 @@ export const MoreGalleries = (props: Props) => {
136134
data-link="more-galleries"
137135
css={css`
138136
${grid.paddedContainer}
139-
background-color: ${palette(
140-
'--onward-more-galleries-background',
141-
)};
137+
background-color: ${palette('--onward-background')};
142138
padding-top: ${space[1]}px;
143139
144140
${from.tablet} {
145141
padding-top: 0;
146142
border-left: 1px solid
147-
${palette('--onward-more-galleries-content-border')};
143+
${palette('--onward-content-border')};
148144
border-right: 1px solid
149-
${palette('--onward-more-galleries-content-border')};
145+
${palette('--onward-content-border')};
150146
}
151147
`}
152148
>
@@ -168,7 +164,7 @@ export const MoreGalleries = (props: Props) => {
168164
`,
169165
]}
170166
count={1}
171-
color={palette('--onward-more-galleries-content-border')}
167+
color={palette('--onward-content-border')}
172168
/>
173169
<ul css={[cardsContainerStyles, standardCardsListStyles]}>
174170
{standardCards.map((trail) => (
@@ -224,7 +220,7 @@ const MoreGalleriesSplashCard = ({
224220
bottom: 0;
225221
width: 1px;
226222
background-color: ${palette(
227-
'--onward-more-galleries-content-border',
223+
'--onward-content-border',
228224
)};
229225
}
230226
}

‎dotcom-rendering/src/components/ScrollableCarousel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ const leftBorderStyles = (colour: string) => css`
116116
`;
117117

118118
const singleRowLeftBorderStyles = (colour: string) => css`
119-
:not(:first-child)::before § {
119+
:not(:first-child)::before {
120120
${leftBorderStyles(colour)}
121121
}
122122
`;

‎dotcom-rendering/src/components/ScrollableSmallOnwards.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const ScrollableSmallOnwards = (props: Props) => {
8989
`,
9090
]}
9191
count={1}
92-
color={palette('--card-border-top')}
92+
color={palette('--onward-content-top-border')}
9393
/>
9494
<Title title={props.heading} headingUrl={props.headingUrl} />
9595
<div css={cardsContainerStyles}>
@@ -158,7 +158,7 @@ const Title = ({
158158

159159
const headerGridStyles = css`
160160
${grid.column.centre}
161-
color: ${palette('--onward-caption-text')};
161+
color: ${palette('--onward-text')};
162162
text-decoration: none;
163163
align-self: start;
164164
${between.tablet.and.leftCol} {
@@ -170,7 +170,7 @@ const headerGridStyles = css`
170170
`;
171171

172172
const headerStyles = css`
173-
color: ${palette('--onward-caption-text')};
173+
color: ${palette('--onward-text')};
174174
${textSansBold17};
175175
padding-bottom: ${space[3]}px;
176176
padding-top: ${space[1]}px;

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6214,15 +6214,6 @@ const crosswordCluesHeaderBorderBottom: PaletteFunction = () =>
62146214
const crosswordTextLight: PaletteFunction = () => sourcePalette.neutral[7];
62156215
const crosswordTextDark: PaletteFunction = () => sourcePalette.neutral[86];
62166216

6217-
const onwardContentBorderLight: PaletteFunction = (format) => {
6218-
switch (format.design) {
6219-
case ArticleDesign.Gallery:
6220-
return sourcePalette.neutral[86];
6221-
default:
6222-
return articleBorderLight(format);
6223-
}
6224-
};
6225-
62266217
// ----- Palette ----- //
62276218

62286219
/**
@@ -7447,36 +7438,20 @@ const paletteColours = {
74477438
},
74487439
'--onward-background': {
74497440
light: () => sourcePalette.neutral[100],
7450-
dark: () => sourcePalette.neutral[100],
7451-
},
7452-
'--onward-caption-text': {
7453-
light: () => sourcePalette.neutral[7],
7454-
dark: () => sourcePalette.neutral[7],
7455-
},
7456-
'--onward-card-background': {
7457-
light: () => sourcePalette.neutral[100],
7458-
dark: () => sourcePalette.neutral[100],
7459-
},
7460-
'--onward-card-footer-text': {
7461-
light: cardMetaTextLight,
7462-
dark: cardMetaTextLight,
7441+
dark: () => sourcePalette.neutral[10],
74637442
},
74647443
'--onward-content-border': {
7465-
light: onwardContentBorderLight,
7466-
dark: onwardContentBorderLight,
7444+
light: () => sourcePalette.neutral[86],
7445+
dark: () => sourcePalette.neutral[20],
74677446
},
7468-
'--onward-more-galleries-background': {
7469-
light: () => sourcePalette.neutral[100],
7470-
dark: () => sourcePalette.neutral[10],
7447+
'--onward-content-top-border': {
7448+
light: () => sourcePalette.neutral[73],
7449+
dark: () => sourcePalette.neutral[38],
74717450
},
74727451
'--onward-more-galleries-card-background': {
74737452
light: () => sourcePalette.neutral[97],
74747453
dark: () => sourcePalette.neutral[20],
74757454
},
7476-
'--onward-more-galleries-content-border': {
7477-
light: onwardContentBorderLight,
7478-
dark: () => sourcePalette.neutral[20],
7479-
},
74807455
'--onward-text': {
74817456
light: () => sourcePalette.neutral[7],
74827457
dark: () => sourcePalette.neutral[86],

0 commit comments

Comments
 (0)