guardian / guardian/dotcom-rendering

List Colour Changes

Open
#13,068 0 comments 0 reactions 0 assignees View on GitHub
maintenance Team Candidate: Articles and Publishing
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

## Clear

The list of formats that should have "clear" list design must be the following ArticleDesigns:

* `ArticleDesign.Standard`
* `ArticleDesign.Picture`
* `ArticleDesign.Gallery`
* `ArticleDesign.Audio`
* `ArticleDesign.Video`
* `ArticleDesign.Explainer`
* `ArticleDesign.Letter`
* `ArticleDesign.MatchReport`
* `ArticleDesign.Quiz`
* `ArticleDesign.Interactive`
* `ArticleDesign.PhotoEssay`
* `ArticleDesign.PrintShop`
* `ArticleDesign.Obituary`
* `ArticleDesign.Correction`
* `ArticleDesign.FullPageInteractive`
* `ArticleDesign.NewsletterSignup`
* `ArticleDesign.Timeline`
* `ArticleDesign.Profile`

### Ordered list

The number should have the following colour:

* lightmode colour: neutral 38
* darkmode colour: neutral 60

An example of the colour change would be:

```ts
const styles = css`
color: ${palette.neutral[38]};
`;
```

### Unordered list

The bullet should have the following colour:

* lightmode colour: neutral 46
* darkmode colour: neutral 60

An example of the colour change would be:

```ts
const styles = css`
color: ${palette.neutral[46]};
`;
```

## Stand-out

The list of formats that should have "stand-out" list design must be the following ArticleDesigns:

* `ArticleDesign.Comment`
* `ArticleDesign.Editorial`
* `ArticleDesign.LiveBlog`
* `ArticleDesign.DeadBlog`
* `ArticleDesign.Analysis`
* `ArticleDesign.Feature`
* `ArticleDesign.Interview`
* `ArticleDesign.Recipe`
* `ArticleDesign.Review`

The number or the bullet should have the following colour:

* lightmode colour: pillar colour 200
* darkmode colour: pillar colour 500

An example of the colour change would be:

```ts
const styles = css`
color: ${palette.news[200]};
`;
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.