Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • D design
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 21
    • Issues 21
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 16
    • Merge requests 16
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Primer
  • design
  • Merge requests
  • !216

Add `open` and `closed` color roles

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge add-open-closed-roles into main 3 years ago
  • Overview 4
  • Commits 2
  • Pipelines 0
  • Changes 1

Created by: simurai

This is part of https://github.com/github/primer/issues/725 and adds 2 new roles (open + closed):

Screen Shot 2022-03-03 at 13 49 20

Source Figma

Screen Shot 2022-02-22 at 15 09 46

Docs preview. Note that the swatches don't work yet.

Tasks

  • Add new roles to docs
  • Update graphics

Reasoning

The new roles are needed to improve colorblind themes, see this color roles ADR.

Compare
  • main (base)

and
  • latest version
    ad27a380
    2 commits, 2 years ago

1 file
+ 21
- 15

    Preferences

    File browser
    Compare changes
content/foundations/color.mdx
+ 21
- 15
  • View file @ ad27a380

  • Edit in single-file editor

  • Open in Web IDE


@@ -13,7 +13,7 @@ import {Grid, Flex, Box, Button, ButtonOutline, Heading, Label, LabelGroup, Link
<img width="960" alt="Image showing the two different types of color modes: light mode and dark mode" src="https://user-images.githubusercontent.com/6951037/146927448-cb518377-114a-4ab8-a37e-1eeffc8732c7.png" />
GitHub's UI offers a variety of different color modes. When designing product interfaces, you should design in light mode by default. Every pattern in Primer is built to work across all color modes out of the box.
GitHub's UI offers a variety of different color modes. When designing product interfaces, you should design in light mode by default. Every pattern in Primer is built to work across all color modes out of the box.
<img
width="960"
@@ -35,18 +35,18 @@ The functional system is based on the meaning, or purpose, that colors have in t
- **Foundations:** Foregrounds, backgrounds, and borders that make up most of a product interface. Each variable is generated based on visual weight.
<img
width="960"
alt="Dark gray, midtone gray and light gray swatches as example of foundational colors"
<img
width="960"
alt="Dark gray, midtone gray and light gray swatches as example of foundational colors"
src="https://user-images.githubusercontent.com/6951037/146926823-b8489e82-978d-4aed-b186-2dcc70691fc7.png"
/>
- **Color roles:** Foregrounds, backgrounds, and borders that highlight affordance or the meaning of elements in the UI.
<img
width="960"
alt="Accent: blue, Success: green, Attention: yellow, Danger: red, Severe: orange, Done: purple"
src="https://user-images.githubusercontent.com/6951037/141302835-05ea2e26-fc89-49ed-8dc5-2af6a6ca9df8.png"
width="1200"
alt="Accent: blue, Success: green, Attention: yellow, Danger: red, Severe: orange, Open: green, Closed: red, Done: purple"
src="https://user-images.githubusercontent.com/378023/156498624-0e71a46b-9e1d-40c0-9f4a-18e37184b06e.png"
/>
You should always use Primer's functional color system in your designs to make sure that:
@@ -72,6 +72,8 @@ Foreground elements are **text and icons**. You can apply color to them using an
| ![](https://swatch-sid.vercel.app?mode=light&token=attention.fg) `fg.attention` | Use to highlight text or icons that require the user's attention. |
| ![](https://swatch-sid.vercel.app?mode=light&token=danger.fg) `fg.danger` | Use to emphasize an error or a blocking status. Action is required. |
| ![](https://swatch-sid.vercel.app?mode=light&token=severe.fg) `fg.severe` | Use to emphasize a level of severity between attention and danger. |
| ![](https://swatch-sid.vercel.app?mode=light&token=open.fg) `fg.open` | Use to style text that refers to open tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=closed.fg) `fg.closed` | Use to style text that refers to closed tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=done.fg) `fg.done` | Use to style text that refers to completed tasks or workflows. |
### Backgrounds
@@ -94,6 +96,8 @@ Background colors apply to surfaces of components or UI elements, such as pages,
| ![](https://swatch-sid.vercel.app?mode=light&token=attention.subtle) `bg.attention` | Use to highlight elements that require a user's attention or pending statuses. |
| ![](https://swatch-sid.vercel.app?mode=light&token=danger.subtle) `bg.danger` | Use to emphasize an error or a blocking status, where action is required. |
| ![](https://swatch-sid.vercel.app?mode=light&token=severe.subtle) `bg.severe` | Use to emphasize an extra level of severity between attention and danger. |
| ![](https://swatch-sid.vercel.app?mode=light&token=open.subtle) `bg.open` | Use to style text that refers to open tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=closed.subtle) `bg.closed` | Use to style text that refers to closed tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=done.subtle) `bg.done` | Use to style text that refers to completed tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=accent.emphasis) `bg.[ANY_OF_ABOVE].emphasis` | Use to highlight the most important item of a view or an interface. |
@@ -113,6 +117,8 @@ Borders can be used to group content or to create a visible separation between s
| ![](https://swatch-sid.vercel.app?mode=light&token=attention.muted) `border.attention` | Use to highlight elements that require a users attention or pending statuses. |
| ![](https://swatch-sid.vercel.app?mode=light&token=danger.muted) `border.danger` | Use to emphasize an error or a blocking status. Action is required. |
| ![](https://swatch-sid.vercel.app?mode=light&token=severe.muted) `border.severe` | Use to emphasize an extra level of severity between attention and danger. |
| ![](https://swatch-sid.vercel.app?mode=light&token=open.muted) `border.open` | Use to style text that refers to open tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=closed.muted) `border.closed` | Use to style text that refers to closed tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=done.muted) `border.done` | Use to style text that refers to completed tasks or workflows. |
| ![](https://swatch-sid.vercel.app?mode=light&token=accent.emphasis) `border.[ROLE].emphasis` | Use to highlight the most important item of a view or an interface. |
@@ -208,24 +214,24 @@ Not all colors pair well with each other. There are combinations of backgrounds
### Color roles recipes
<img
width="960"
width="1200"
alt="Combination of variables 1: bg.[COLOR-ROLE] + border.[COLOR-ROLE] + fg.[COLOR-ROLE]"
src="https://user-images.githubusercontent.com/6951037/141517378-1719360d-e924-46bc-b6e5-4fabcd75a050.png"
src="https://user-images.githubusercontent.com/378023/156498633-d6e47cb1-64b4-46fb-90d6-65a5c4c6a2bc.png"
/>
<img
width="960"
width="1200"
alt="Combination of variables 2: bg.[COLOR-ROLE] + border.[COLOR-ROLE].emphasis + fg.[COLOR-ROLE]"
src="https://user-images.githubusercontent.com/6951037/141517387-660b2fef-469b-453b-a112-c8d744103f73.png"
src="https://user-images.githubusercontent.com/378023/156498642-f86a24b7-53ea-4b1e-ab47-0529587b08ef.png"
/>
<img
width="960"
width="1200"
alt="Combination of variables 3: bg.default + border.[COLOR-ROLE].emphasis + fg.[COLOR-ROLE]"
src="https://user-images.githubusercontent.com/6951037/141517412-08590dc5-bd8d-48de-b130-c16eccf33872.png"
src="https://user-images.githubusercontent.com/378023/156498649-e81a19bf-c94e-436e-9efc-258a1fd3be57.png"
/>
<img
width="960"
width="1200"
alt="Combination of variables 4: bg.[COLOR-ROLE] + border.[COLOR-ROLE] + fg.default"
src="https://user-images.githubusercontent.com/6951037/141517656-e75941ac-6c63-418a-95ea-d687c4d501e7.png"
src="https://user-images.githubusercontent.com/378023/156498652-b1121c86-a670-4a92-9a8d-9db3c7e0ed9a.png"
/>
## Color outside the functional system
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: firstcontributions/first-contributions!52598
Source branch: add-open-closed-roles

Menu

Explore Projects Groups Snippets