-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Components: Try color theming #44668
Merged
Merged
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
35a75b4
Add Theme component
mirka b05dd83
rename button color variable
chad1008 331b17b
add darker color variants, replace in button component
chad1008 78a3e6e
Move types to separate file
ciampo 7748a6f
README
ciampo a0a8903
Refactor styles to separate file
ciampo 0a07e4d
Export component as experimental
ciampo 68dd3f4
Add unit tests
ciampo 2960d0a
CHANGELOG
ciampo 1e85ede
docs index
ciampo e480819
Improve README wording
ciampo d396398
Move theme variables to separate sass file
ciampo ce15b70
Polish storybook
ciampo 6ea5f68
Add initial chapted to CONTRIBUTING docs
ciampo 0ac7a24
Add color validation
ciampo 18f2c85
Refine type description
ciampo 33294f4
Add eslint disable comment for console warn
ciampo ba1668c
Add JSDocs for the default-exported component
ciampo File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| # Theme | ||
|
|
||
| <div class="callout callout-alert"> | ||
| This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. | ||
| </div> | ||
|
|
||
| `Theme` allows defining theme variables for components in the `@wordpress/components` package. | ||
|
|
||
| Multiple `Theme` components can be nested in order to override specific theme variables. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| import { __experimentalTheme as Theme } from '@wordpress/components'; | ||
|
|
||
| const Example = () => { | ||
| return ( | ||
| <Theme accent="red"> | ||
| <Button variant="primary">I'm red</Button> | ||
| <Theme accent="blue"> | ||
| <Button variant="primary">I'm blue</Button> | ||
| </Theme> | ||
| </Theme> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ### `accent`: `string` | ||
|
|
||
| Used to set the accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color. No all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property. | ||
|
|
||
| - Required: No |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { colord, extend } from 'colord'; | ||
| import a11yPlugin from 'colord/plugins/a11y'; | ||
| import namesPlugin from 'colord/plugins/names'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { ThemeProps } from './types'; | ||
| import type { WordPressComponentProps } from '../ui/context'; | ||
| import { Wrapper } from './styles'; | ||
|
|
||
| extend( [ namesPlugin, a11yPlugin ] ); | ||
|
|
||
| /** | ||
| * `Theme` allows defining theme variables for components in the `@wordpress/components` package. | ||
| * | ||
| * Multiple `Theme` components can be nested in order to override specific theme variables. | ||
| * | ||
| * | ||
| * @example | ||
| * ```jsx | ||
| * import { __experimentalTheme as Theme } from '@wordpress/components'; | ||
| * | ||
| * const Example = () => { | ||
| * return ( | ||
| * <Theme accent="red"> | ||
| * <Button variant="primary">I'm red</Button> | ||
| * <Theme accent="blue"> | ||
| * <Button variant="primary">I'm blue</Button> | ||
| * </Theme> | ||
| * </Theme> | ||
| * ); | ||
| * }; | ||
| * ``` | ||
| */ | ||
| function Theme( props: WordPressComponentProps< ThemeProps, 'div', true > ) { | ||
| const { accent } = props; | ||
| if ( accent && ! colord( accent ).isValid() ) { | ||
| // eslint-disable-next-line no-console | ||
| console.warn( | ||
| `wp.components.Theme: "${ accent }" is not a valid color value for the 'accent' prop.` | ||
| ); | ||
| } | ||
|
|
||
| return <Wrapper { ...props } />; | ||
| } | ||
|
|
||
| export default Theme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import type { ComponentMeta, ComponentStory } from '@storybook/react'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Theme from '../index'; | ||
| import Button from '../../button'; | ||
|
|
||
| const meta: ComponentMeta< typeof Theme > = { | ||
| component: Theme, | ||
| title: 'Components (Experimental)/Theme', | ||
| argTypes: { | ||
| accent: { control: { type: 'color' } }, | ||
| }, | ||
| parameters: { | ||
| controls: { expanded: true }, | ||
| docs: { source: { state: 'open' } }, | ||
| }, | ||
| }; | ||
| export default meta; | ||
|
|
||
| const Template: ComponentStory< typeof Theme > = ( args ) => ( | ||
| <Theme { ...args }> | ||
| <Button variant="primary">Hello</Button> | ||
| </Theme> | ||
| ); | ||
|
|
||
| export const Default = Template.bind( {} ); | ||
| Default.args = {}; | ||
|
|
||
| export const Nested: ComponentStory< typeof Theme > = ( args ) => ( | ||
| <Theme accent="tomato"> | ||
| <Button variant="primary">Outer theme (hardcoded)</Button> | ||
|
|
||
| <Theme { ...args }> | ||
| <Button variant="primary"> | ||
| Inner theme (set via Storybook controls) | ||
| </Button> | ||
| </Theme> | ||
| </Theme> | ||
| ); | ||
| Nested.args = { | ||
| accent: 'blue', | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { colord } from 'colord'; | ||
| import styled from '@emotion/styled'; | ||
| import { css } from '@emotion/react'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import type { ThemeProps } from './types'; | ||
|
|
||
| const accentColor = ( { accent }: ThemeProps ) => | ||
| accent | ||
| ? css` | ||
| --wp-components-color-accent: ${ accent }; | ||
| --wp-components-color-accent-darker-10: ${ colord( accent ) | ||
| .darken( 0.1 ) | ||
| .toHex() }; | ||
| --wp-components-color-accent-darker-20: ${ colord( accent ) | ||
| .darken( 0.2 ) | ||
| .toHex() }; | ||
| ` | ||
| : undefined; | ||
|
|
||
| export const Wrapper = styled.div< ThemeProps >` | ||
| ${ accentColor } | ||
| `; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good clarification!