005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
65 lines
2.4 KiB
Markdown
65 lines
2.4 KiB
Markdown
# Global variants
|
||
|
||
<p class="description">Joy UI provides a set of global variants to ensure consistency across your app.</p>
|
||
|
||
All Joy UI components accept four global variants: `solid`, `soft`, `outlined`, and `plain`. These variants are intended to cover the majority of use cases in modern web design.
|
||
|
||
The demo below shows how the variants look and feel across several Joy UI components:
|
||
|
||
{{"demo": "GlobalVariantComponents.js"}}
|
||
|
||
Global variants pull their styles from a single source, helping you to ensure a consistent look and feel across both pre-built Joy UI components and any custom components you build.
|
||
|
||
Under the hood, the variants are primarily differentiated by the values for their `color`, `background`, and `border` CSS properties.
|
||
|
||
## Hierarchy of importance
|
||
|
||
Each variant conveys a different level of importance in the user interface:
|
||
|
||
- `solid` is best suited for primary elements and the most important actions on the page
|
||
- `soft`, `outlined`, and `plain` are better for secondary and tertiary actions
|
||
|
||
Which variant you should choose largely depends on the context within the design, but it's important to keep this hierarchy in mind for a balanced UI.
|
||
|
||
The demo below illustrates a well-balanced design using multiple variants:
|
||
|
||
{{"demo": "LevelOfImportance.js"}}
|
||
|
||
## Customizing global variants
|
||
|
||
Global variants build off of the atomic tokens from the palettes, which live within your app's themes.
|
||
You can use standard CSS or CSS variables to customize these properties.
|
||
|
||
Here's an example of some of the default `solid` variant tokens:
|
||
|
||
```js
|
||
{
|
||
colorSchemes: {
|
||
light: {
|
||
palette: {
|
||
primary: {
|
||
solidBg: 'var(--joy-palette-primary-600)', // the initial background
|
||
solidColor: '#fff', // the initial color
|
||
solidHoverBg: 'var(--joy-palette-primary-700)', // the :hover background
|
||
solidActiveBg: 'var(--joy-palette-primary-800)', // the :active background
|
||
// ...other tokens
|
||
},
|
||
neutral: {
|
||
solidBg: 'var(--joy-palette-primary-700)',
|
||
solidColor: '#fff',
|
||
solidHoverBg: 'var(--joy-palette-primary-800)',
|
||
solidActiveBg: 'var(--joy-palette-primary-900)',
|
||
// ...other tokens
|
||
},
|
||
// ...other palettes
|
||
}
|
||
},
|
||
dark: {
|
||
palette: {
|
||
// similar structure but different values
|
||
}
|
||
},
|
||
}
|
||
}
|
||
```
|