Skip to content

Commit 2b9af5d

Browse files
marjisoundmarjisound
committed
Refactor colors and fix dark mode
1 parent 938b4a8 commit 2b9af5d

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
@@ -463,11 +463,6 @@ export const Card = ({
463463
showClock={showClock}
464464
serverTime={serverTime}
465465
isTagPage={isTagPage}
466-
colour={
467-
isGallerySecondaryOnward
468-
? palette('--onward-card-footer-text')
469-
: undefined
470-
}
471466
/>
472467
);
473468
};
@@ -498,11 +493,6 @@ export const Card = ({
498493
<CardCommentCount
499494
discussionApiUrl={discussionApiUrl}
500495
discussionId={discussionId}
501-
colour={
502-
isGallerySecondaryOnward
503-
? palette('--onward-card-footer-text')
504-
: undefined
505-
}
506496
/>
507497
</Island>
508498
</Link>
@@ -611,7 +601,7 @@ export const Card = ({
611601

612602
const backgroundColour = () => {
613603
if (isGallerySecondaryOnward) {
614-
return palette('--onward-card-background');
604+
return palette('--onward-background');
615605
}
616606
if (isMediaCardOrNewsletter) {
617607
return palette('--card-media-background');
@@ -857,7 +847,7 @@ export const Card = ({
857847
containerPalette={containerPalette}
858848
topBarColour={
859849
isGallerySecondaryOnward
860-
? palette('--onward-content-border')
850+
? palette('--onward-content-top-border')
861851
: undefined
862852
}
863853
>
@@ -893,11 +883,6 @@ export const Card = ({
893883
showByline={showByline}
894884
isExternalLink={isExternalLink}
895885
showLabsRedesign={showLabsRedesign}
896-
headlineColour={
897-
isGallerySecondaryOnward
898-
? palette('--onward-caption-text')
899-
: undefined
900-
}
901886
/>
902887
{!isUndefined(starRating) ? (
903888
<StarRatingComponent
@@ -1249,11 +1234,6 @@ export const Card = ({
12491234
: undefined
12501235
}
12511236
showLabsRedesign={showLabsRedesign}
1252-
headlineColour={
1253-
isGallerySecondaryOnward
1254-
? palette('--onward-caption-text')
1255-
: undefined
1256-
}
12571237
/>
12581238
{!isUndefined(starRating) ? (
12591239
<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
/**
@@ -7475,36 +7466,20 @@ const paletteColours = {
74757466
},
74767467
'--onward-background': {
74777468
light: () => sourcePalette.neutral[100],
7478-
dark: () => sourcePalette.neutral[100],
7479-
},
7480-
'--onward-caption-text': {
7481-
light: () => sourcePalette.neutral[7],
7482-
dark: () => sourcePalette.neutral[7],
7483-
},
7484-
'--onward-card-background': {
7485-
light: () => sourcePalette.neutral[100],
7486-
dark: () => sourcePalette.neutral[100],
7487-
},
7488-
'--onward-card-footer-text': {
7489-
light: cardMetaTextLight,
7490-
dark: cardMetaTextLight,
7469+
dark: () => sourcePalette.neutral[10],
74917470
},
74927471
'--onward-content-border': {
7493-
light: onwardContentBorderLight,
7494-
dark: onwardContentBorderLight,
7472+
light: () => sourcePalette.neutral[86],
7473+
dark: () => sourcePalette.neutral[20],
74957474
},
7496-
'--onward-more-galleries-background': {
7497-
light: () => sourcePalette.neutral[100],
7498-
dark: () => sourcePalette.neutral[10],
7475+
'--onward-content-top-border': {
7476+
light: () => sourcePalette.neutral[73],
7477+
dark: () => sourcePalette.neutral[38],
74997478
},
75007479
'--onward-more-galleries-card-background': {
75017480
light: () => sourcePalette.neutral[97],
75027481
dark: () => sourcePalette.neutral[20],
75037482
},
7504-
'--onward-more-galleries-content-border': {
7505-
light: onwardContentBorderLight,
7506-
dark: () => sourcePalette.neutral[20],
7507-
},
75087483
'--onward-text': {
75097484
light: () => sourcePalette.neutral[7],
75107485
dark: () => sourcePalette.neutral[86],

0 commit comments

Comments
 (0)