Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook: Add stub doc on existing colors. #65982

Merged
merged 5 commits into from
Oct 10, 2024
Merged

Storybook: Add stub doc on existing colors. #65982

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a119f8
Storybook: Add stub doc on existing colors.
jasmussen Oct 9, 2024
582885c
Update 4.6 to 4.5 for contrast.
jasmussen Oct 9, 2024
ebcfa1e
Update based on feedback.
jasmussen Oct 9, 2024
e5fb170
Use SCSS also for the alerts.
jasmussen Oct 9, 2024
084c8e8
Separate white and black.
jasmussen Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions storybook/stories/tokens/color.mdx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

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

While this document (and following ones) are a WIP, should we make less discoverable? Maybe we could change the file path to something like storybook/stories/_system/tokens/color.mdx

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good question. I would prefer not to, because even if the document, and followups of the same type, are meant to be stubs and starting points, they should nevertheless be immediately useful, and document what's already shipping. In this case, these colors are just extracted from base styles, but are more easily digestible here.

However I'm happy to defer to opinions otherwise, and move it.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't have a strong opinion either. Maybe @mattrwalker can help, as he recently worked on the Storybook's site map?

In any case, not a blocking comment. Any changes that we discuss can be applied in follow-up PRs.

Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';

<Meta title="Tokens/Color" name="page" />

# Color

This document outlines the default color set of the WordPress component system as it ships. The page is a work in progress.

## Colors

<ColorPalette>
<ColorItem
title="Black & White"
subtitle=""
colors={{
'$black': '#000',
'$white': '#fff',
}}
/>
</ColorPalette>

<ColorPalette>
<ColorItem
title="Gray Tones"
subtitle=""
colors={{
'$gray-900': '#1e1e1e',
'$gray-800': '#2f2f2f',
'$gray-700': '#757575',
'$gray-600': '#949494',
'$gray-400': '#ccc',
'$gray-300': '#ddd',
'$gray-200': '#e0e0e0',
'$gray-100': '#f0f0f0',
}}
/>
</ColorPalette>

<ColorPalette>
<ColorItem
title="Alert colors"
subtitle=""
colors={{
'$alert-yellow': '#f0b849',
'$alert-red': '#cc1818',
'$alert-green': '#4ab866',
}}
/>
</ColorPalette>

## Contrast

Ensure proper contrast is met between text, icons, UI, and backgrounds. Text needs to meet a 4.5:1 ratio to meet AA standards, while large text (16px+) and UI elements (borders, etc.) need to meet a 3:1 ratio. In this section is a list of tokens you can use to meet these criteria.

Against a white background:

* **Gray 700**\
Lightest gray you can use and meet 4.5:1 text contrast.

* **Gray 600**\
Lightest gray you can use and meet 3:1 UI contrast.
Loading