Skip to content
This repository has been archived by the owner on Nov 26, 2024. It is now read-only.

Adding brand colors to CSSinJS exports #582

Merged
merged 4 commits into from
Jan 18, 2024

Conversation

georgewrmarshall
Copy link
Collaborator

@georgewrmarshall georgewrmarshall commented Jan 16, 2024

Description

This PR adds the brandColors object to the exports of the design tokens package. It also includes unit tests to ensure the brandColors object matches the Figma design token values.

  1. Added brandColors object to the design tokens exports.
  2. Created unit tests for brandColors to ensure it matches the Figma design tokens values.

Fixes: #581

Usage

import { brandColors } from '@metamask/design-tokens';

<Icon name={IconName.Star} color={brandColors.yellow.yellow500} />

Manual testing steps

  1. Pull this branch
  2. Run the unit tests and ensure all tests pass.
  3. Ensure brandColors is exported from project index

@georgewrmarshall georgewrmarshall added the team-design-system All issues relating to design system label Jan 16, 2024
@georgewrmarshall georgewrmarshall self-assigned this Jan 16, 2024
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner January 16, 2024 21:02
src/js/brandColors/brandColors.test.ts Outdated Show resolved Hide resolved

describe('Brand Color', () => {
describe('White', () => {
it('js tokens for white000 matches figma tokens white000', () => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These tests check the export color values match the hex values of the colors in Figma json

@metamaskbot
Copy link
Collaborator

Builds ready [5fab2d5]

@brianacnguyen brianacnguyen merged commit 9bf66c7 into main Jan 18, 2024
7 checks passed
@brianacnguyen brianacnguyen deleted the fix/581/brand-colors-css-in-js branch January 18, 2024 16:46
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
team-design-system All issues relating to design system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create CSSinJS brand colors
3 participants