Skip to content

Commit 99e5f4f

Browse files
abeddow91abeddow91
authored
Update trail text colour (#13408)
* Change card trail text from neutral.38 -> neutral.46 * Use neutral.46 everywhere for trail text unless overriden * remove unneeded palette import * Use exisiting palette for trail special palette overrides
1 parent 9970a96 commit 99e5f4f

File tree

7 files changed

+11
-56
lines changed

7 files changed

+11
-56
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,6 @@ export type Props = {
143143
showTopBarDesktop?: boolean;
144144
showTopBarMobile?: boolean;
145145
trailTextSize?: TrailTextSize;
146-
/** If specified, overrides trail text colour */
147-
trailTextColour?: string;
148146
/** The square podcast series image, if it exists for a card */
149147
podcastImage?: PodcastSeriesImage;
150148
/** A kicker image is seperate to the main media and renders as part of the kicker */
@@ -404,7 +402,6 @@ export const Card = ({
404402
showTopBarDesktop = true,
405403
showTopBarMobile = false,
406404
trailTextSize,
407-
trailTextColour,
408405
podcastImage,
409406
showKickerImage = false,
410407
galleryCount,
@@ -1111,7 +1108,6 @@ export const Card = ({
11111108
{!!trailText && media?.type !== 'podcast' && (
11121109
<TrailText
11131110
trailText={trailText}
1114-
trailTextColour={trailTextColour}
11151111
trailTextSize={trailTextSize}
11161112
padTop={headlinePosition === 'inner'}
11171113
hideUntil={hideTrailTextUntil()}

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,29 +72,29 @@ const cardTrailTextLight: ContainerFunction = (
7272
) => {
7373
switch (containerPalette) {
7474
case 'InvestigationPalette':
75-
return sourcePalette.neutral[93];
75+
return sourcePalette.neutral[100];
7676
case 'LongRunningPalette':
77-
return sourcePalette.neutral[10];
77+
return sourcePalette.neutral[7];
7878
case 'SombrePalette':
79-
return sourcePalette.neutral[93];
79+
return sourcePalette.neutral[100];
8080
case 'BreakingPalette':
81-
return sourcePalette.neutral[93];
81+
return sourcePalette.neutral[100];
8282
case 'EventPalette':
8383
return sourcePalette.brand[300];
8484
case 'EventAltPalette':
8585
return sourcePalette.brand[300];
8686
case 'LongRunningAltPalette':
87-
return sourcePalette.neutral[10];
87+
return sourcePalette.neutral[7];
8888
case 'SombreAltPalette':
89-
return sourcePalette.neutral[86];
89+
return sourcePalette.neutral[93];
9090
case 'SpecialReportAltPalette':
9191
return sourcePalette.specialReportAlt[100];
9292
case 'PodcastPalette':
93-
return sourcePalette.neutral[93];
93+
return sourcePalette.neutral[100];
9494
case 'Branded':
95-
return sourcePalette.neutral[38];
95+
return sourcePalette.neutral[20];
9696
case 'MediaPalette':
97-
return sourcePalette.neutral[93];
97+
return sourcePalette.neutral[100];
9898
}
9999
};
100100
const cardTrailTextDark: ContainerFunction = (

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

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { shouldPadWrappableRows } from '../lib/dynamicSlices';
2-
import { palette } from '../palette';
32
import type {
43
DCRContainerPalette,
54
DCRFrontCard,
@@ -18,7 +17,7 @@ type Props = {
1817
absoluteServerTimes: boolean;
1918
};
2019

21-
/*
20+
/*ø
2221
* Note:
2322
* dynamic/package does not use cardWrappers as
2423
* most of the card configurations are custom and not used
@@ -62,7 +61,6 @@ const Snap100 = ({
6261
trailText={snaps[0].trailText}
6362
supportingContentAlignment="horizontal"
6463
imageLoading={imageLoading}
65-
trailTextColour={palette('--card-headline')}
6664
/>
6765
</LI>
6866
</UL>
@@ -109,7 +107,6 @@ const Card100 = ({
109107
supportingContent={limitSupportingContent(cards[0])}
110108
supportingContentAlignment="horizontal"
111109
imageLoading={imageLoading}
112-
trailTextColour={palette('--card-headline')}
113110
/>
114111
</LI>
115112
</UL>
@@ -149,7 +146,6 @@ const Card75_Card25 = ({
149146
imageSize="medium"
150147
trailText={card.trailText}
151148
imageLoading={imageLoading}
152-
trailTextColour={palette('--card-headline')}
153149
/>
154150
</LI>
155151
))}
@@ -167,7 +163,6 @@ const Card75_Card25 = ({
167163
showAge={showAge}
168164
absoluteServerTimes={absoluteServerTimes}
169165
imageLoading={imageLoading}
170-
trailTextColour={palette('--card-headline')}
171166
/>
172167
</LI>
173168
))}
@@ -210,7 +205,6 @@ const Card25_Card25_Card25_Card25 = ({
210205
supportingContent={limitSupportingContent(card)}
211206
image={showImage ? card.image : undefined}
212207
imageLoading={imageLoading}
213-
trailTextColour={palette('--card-headline')}
214208
/>
215209
</LI>
216210
);
@@ -253,7 +247,6 @@ const Card25_Card25_Card25_ColumnOfTwo25 = ({
253247
absoluteServerTimes={absoluteServerTimes}
254248
supportingContent={limitSupportingContent(card)}
255249
imageLoading={imageLoading}
256-
trailTextColour={palette('--card-headline')}
257250
/>
258251
</LI>
259252
);
@@ -278,7 +271,6 @@ const Card25_Card25_Card25_ColumnOfTwo25 = ({
278271
)}
279272
image={undefined}
280273
imageLoading={imageLoading}
281-
trailTextColour={palette('--card-headline')}
282274
/>
283275
</LI>
284276
);
@@ -323,7 +315,6 @@ const Card25_Card25_ColumnOfTwo25_ColumnOfTwo25 = ({
323315
absoluteServerTimes={absoluteServerTimes}
324316
supportingContent={limitSupportingContent(card)}
325317
imageLoading={imageLoading}
326-
trailTextColour={palette('--card-headline')}
327318
/>
328319
</LI>
329320
);
@@ -354,7 +345,6 @@ const Card25_Card25_ColumnOfTwo25_ColumnOfTwo25 = ({
354345
)}
355346
image={undefined}
356347
imageLoading={imageLoading}
357-
trailTextColour={palette('--card-headline')}
358348
/>
359349
</LI>
360350
);
@@ -394,7 +384,6 @@ const Card25_ColumnOfTwo25_ColumnOfTwo25_ColumnOfTwo25 = ({
394384
absoluteServerTimes={absoluteServerTimes}
395385
supportingContent={limitSupportingContent(card)}
396386
imageLoading={imageLoading}
397-
trailTextColour={palette('--card-headline')}
398387
/>
399388
</LI>
400389
);
@@ -425,7 +414,6 @@ const Card25_ColumnOfTwo25_ColumnOfTwo25_ColumnOfTwo25 = ({
425414
)}
426415
image={undefined}
427416
imageLoading={imageLoading}
428-
trailTextColour={palette('--card-headline')}
429417
/>
430418
</LI>
431419
);
@@ -469,7 +457,6 @@ const Card75_ColumnOfCards25 = ({
469457
supportingContent={limitSupportingContent(card)}
470458
isDynamo={true}
471459
imageLoading={imageLoading}
472-
trailTextColour={palette('--card-headline')}
473460
/>
474461
</LI>
475462
))}
@@ -511,7 +498,6 @@ const Card75_ColumnOfCards25 = ({
511498
card,
512499
)}
513500
imageLoading={imageLoading}
514-
trailTextColour={palette('--card-headline')}
515501
/>
516502
</LI>
517503
);

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Card25Media25 } from '../lib/cardWrappers';
2-
import { palette } from '../palette';
32
import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
43
import { LI } from './Card/components/LI';
54
import { UL } from './Card/components/UL';
@@ -59,7 +58,6 @@ export const FixedSmallSlowVThird = ({
5958
imagePositionOnMobile="none"
6059
imageSize="small"
6160
imageLoading={imageLoading}
62-
trailTextColour={palette('--card-headline')}
6361
/>
6462
</LI>
6563
);

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { shouldPadWrappableRows } from '../lib/dynamicSlices';
1818
import type { EditionId } from '../lib/edition';
1919
import { useApi } from '../lib/useApi';
2020
import { enhanceCards } from '../model/enhanceCards';
21-
import { palette } from '../palette';
2221
import type { DCRContainerPalette, FEFrontCard } from '../types/front';
2322
import { LI } from './Card/components/LI';
2423
import { UL } from './Card/components/UL';
@@ -181,9 +180,6 @@ export const ShowMore = ({
181180
}}
182181
imageLoading="eager"
183182
absoluteServerTimes={false}
184-
trailTextColour={palette(
185-
'--card-headline',
186-
)}
187183
/>
188184
</LI>
189185
);

‎dotcom-rendering/src/lib/cardWrappers.tsx

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { isUndefined } from '@guardian/libs';
22
import type { Loading } from '../components/CardPicture';
33
import { FrontCard } from '../components/FrontCard';
4-
import { palette } from '../palette';
54
import type { DCRContainerPalette, DCRFrontCard } from '../types/front';
65

76
type TrailProps = {
@@ -79,7 +78,6 @@ export const Card100Media50 = ({
7978
? 'horizontal'
8079
: 'vertical'
8180
}
82-
trailTextColour={palette('--card-headline')}
8381
/>
8482
);
8583
};
@@ -132,7 +130,6 @@ export const Card100Media75 = ({
132130
? 'horizontal'
133131
: 'vertical'
134132
}
135-
trailTextColour={palette('--card-headline')}
136133
/>
137134
);
138135
};
@@ -174,7 +171,6 @@ export const Card100Media100 = ({
174171
isTagPage={isTagPage}
175172
supportingContent={trail.supportingContent?.slice(0, 4)}
176173
supportingContentAlignment="horizontal"
177-
trailTextColour={palette('--card-headline')}
178174
/>
179175
);
180176
};
@@ -218,7 +214,6 @@ export const Card100Media100Tall = ({
218214
supportingContent={trail.supportingContent?.slice(0, 2)}
219215
supportingContentAlignment="vertical"
220216
trailText={trail.trailText}
221-
trailTextColour={palette('--card-headline')}
222217
/>
223218
);
224219
};
@@ -263,7 +258,6 @@ export const Card75Media50Right = ({
263258
imagePositionOnMobile="top"
264259
imageLoading={imageLoading}
265260
isTagPage={isTagPage}
266-
trailTextColour={palette('--card-headline')}
267261
headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
268262
/>
269263
);
@@ -310,7 +304,6 @@ export const Card75Media50Left = ({
310304
imageLoading={imageLoading}
311305
isTagPage={isTagPage}
312306
headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
313-
trailTextColour={palette('--card-headline')}
314307
/>
315308
);
316309
};
@@ -352,7 +345,6 @@ export const Card25Media25 = ({
352345
isTagPage={isTagPage}
353346
headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
354347
canPlayInline={false}
355-
trailTextColour={palette('--card-headline')}
356348
/>
357349
);
358350
};
@@ -394,7 +386,6 @@ export const Card25Media25SmallHeadline = ({
394386
isTagPage={isTagPage}
395387
headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }}
396388
canPlayInline={false}
397-
trailTextColour={palette('--card-headline')}
398389
/>
399390
);
400391
};
@@ -443,7 +434,6 @@ export const Card25Media25Tall = ({
443434
}
444435
supportingContent={trail.supportingContent?.slice(0, 2)}
445436
canPlayInline={false}
446-
trailTextColour={palette('--card-headline')}
447437
/>
448438
);
449439
};
@@ -484,7 +474,6 @@ export const Card25Media25TallNoTrail = ({
484474
headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
485475
supportingContent={trail.supportingContent?.slice(0, 2)}
486476
canPlayInline={false}
487-
trailTextColour={palette('--card-headline')}
488477
/>
489478
);
490479
};
@@ -525,7 +514,6 @@ export const Card25Media25TallSmallHeadline = ({
525514
headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }}
526515
supportingContent={trail.supportingContent?.slice(0, 2)}
527516
canPlayInline={false}
528-
trailTextColour={palette('--card-headline')}
529517
/>
530518
);
531519
};
@@ -566,7 +554,6 @@ export const Card50Media50 = ({
566554
absoluteServerTimes={absoluteServerTimes}
567555
supportingContent={trail.supportingContent?.slice(0, 3)}
568556
supportingContentAlignment="horizontal"
569-
trailTextColour={palette('--card-headline')}
570557
/>
571558
);
572559
};
@@ -609,7 +596,6 @@ export const Card50Media50Tall = ({
609596
imageLoading={imageLoading}
610597
isTagPage={isTagPage}
611598
headlineSizes={{ desktop: 'small', tablet: 'xsmall' }}
612-
trailTextColour={palette('--card-headline')}
613599
/>
614600
);
615601
};
@@ -649,7 +635,6 @@ export const Card66Media66 = ({
649635
imageSize="large"
650636
imageLoading={imageLoading}
651637
isTagPage={isTagPage}
652-
trailTextColour={palette('--card-headline')}
653638
/>
654639
);
655640
};
@@ -688,7 +673,6 @@ export const Card33Media33 = ({
688673
imagePositionOnMobile="left"
689674
imageLoading={imageLoading}
690675
isTagPage={isTagPage}
691-
trailTextColour={palette('--card-headline')}
692676
headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
693677
/>
694678
);
@@ -729,7 +713,6 @@ export const Card33Media33Tall = ({
729713
headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }}
730714
supportingContent={trail.supportingContent?.slice(0, 2)}
731715
supportingContentAlignment="vertical"
732-
trailTextColour={palette('--card-headline')}
733716
/>
734717
);
735718
};
@@ -771,7 +754,6 @@ export const Card33Media33MobileTopTall = ({
771754
headlineSizes={{ desktop: 'xsmall', tablet: 'xsmall' }}
772755
supportingContent={trail.supportingContent?.slice(0, 2)}
773756
supportingContentAlignment="vertical"
774-
trailTextColour={palette('--card-headline')}
775757
/>
776758
);
777759
};
@@ -807,7 +789,6 @@ export const CardDefault = ({
807789
headlineSizes={{ desktop: 'xxsmall' }}
808790
canPlayInline={false}
809791
isTagPage={isTagPage}
810-
trailTextColour={palette('--card-headline')}
811792
/>
812793
);
813794
};
@@ -845,7 +826,6 @@ export const CardDefaultMedia = ({
845826
isTagPage={isTagPage}
846827
headlineSizes={{ desktop: 'xxsmall' }}
847828
canPlayInline={false}
848-
trailTextColour={palette('--card-headline')}
849829
/>
850830
);
851831
};
@@ -883,7 +863,6 @@ export const CardDefaultMediaMobile = ({
883863
isTagPage={isTagPage}
884864
headlineSizes={{ desktop: 'xxsmall' }}
885865
canPlayInline={false}
886-
trailTextColour={palette('--card-headline')}
887866
/>
888867
);
889868
};

‎dotcom-rendering/src/paletteDeclarations.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2513,7 +2513,7 @@ const cardHeadlineTextLight: PaletteFunction = () => sourcePalette.neutral[7];
25132513

25142514
const cardTextDark: PaletteFunction = () => sourcePalette.neutral[86];
25152515

2516-
const cardTrailTextLight: PaletteFunction = () => sourcePalette.neutral[38];
2516+
const cardTrailTextLight: PaletteFunction = () => sourcePalette.neutral[46];
25172517
const cardTrailTextDark: PaletteFunction = () => sourcePalette.neutral[73];
25182518

25192519
const liveKickerBackgroundLight: PaletteFunction = (format) => {

0 commit comments

Comments
 (0)