-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Components: Try color theming (#44668)
* Add Theme component * rename button color variable * add darker color variants, replace in button component * Move types to separate file * README * Refactor styles to separate file * Export component as experimental * Add unit tests * CHANGELOG * docs index * Improve README wording * Move theme variables to separate sass file * Polish storybook * Add initial chapted to CONTRIBUTING docs * Add color validation * Refine type description * Add eslint disable comment for console warn * Add JSDocs for the default-exported component Co-authored-by: chad1008 <13856531+chad1008@users.noreply.github.com> Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
- Loading branch information
3 people
authored
Oct 12, 2022
1 parent
10953a2
commit 5d773ab
Showing
13 changed files
with
350 additions
and
25 deletions.
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.