Skip to content

Apply dark mode vision to each Pajamas component

Purpose

The dark mode vision (gitlab-org/foundations&9 (closed)) sets out a high-level direction for our new dark mode. We now need to work through the details for all of our components to apply these concepts.

Design direction

image

Proposal

  • Create updated Figma designs for each component listed below
  • Indicate what the new "dark mode" values are for each token used in the component
  • Call out any new tokens that need to be added to support the new design. Include the light mode value as well for any new tokens.

Process

  1. Duplicate the current 📙 Component library file to explore dark mode component versions. A file is used instead of a branch to avoid the need to keep a branch updated. (Figma working file →)
  2. Create a branch in GitLab UI that updates design tokens with design decisions. (#MR → link TBD)
  3. For any components that needs to change its structure, or have new contextual design tokens created to achieve a particular effect, create a new MR.
    • If the component has already been updated in the component library, we’ll need a new issue to do some more work to it.
    • If the component has not yet been updated in the component library, we are using GitLab UI as the source of truth so it should land when we get to it.
    • If the component is currently in-flight, we’ll need a ping to make sure we keep updates in sync.
  4. Repeat until all components have been addressed.

Note: Not all components in GitLab UI have updated design to begin with, so we may skip them initially.

Components

Track progress of each component. A ✓ signifies design direction complete, design tokens updated in GitLab UI, and component able to accurately respond to mode changes in the component library component library will be handled separately and requires that components are using design tokens and that dark mode is also available in the beta design token library within Figma.

When more discussion is needed for a component, open a thread below.

Checklist

Edited by Jeremy Elder