This feature lets you fully style and theme built-in components even if there is no design token available. For example, previously you could not add a box shadow or gradient background to the built-in Button component unless you wrote plain CSS. Now you can style every CSS property for all the built-in components with type-safety!
This also lets you define your own components and style them in the same type-safe way with zero runtime computation.
defineComponentTheme()
import { defineComponentTheme } from '@aws-amplify/ui-react/server';
export const buttonTheme = defineComponentTheme({
// because 'button' is a built-in component, we get type-safety and hints
// based on the theme shape of our button
name: 'button',
theme: (tokens) => {
return {
textAlign: 'center',
padding: tokens.space.xl,
_modifiers: {
primary: {
backgroundColor: tokens.colors.primary[20],
},
},
};
},
});
createTheme()
The theme object passed to createTheme now has an optional components array which is an array of component themes.
This feature lets you fully style and theme built-in components even if there is no design token available. For example, previously you could not add a box shadow or gradient background to the built-in Button component unless you wrote plain CSS. Now you can style every CSS property for all the built-in components with type-safety!
This also lets you define your own components and style them in the same type-safe way with zero runtime computation.
defineComponentTheme()
import { defineComponentTheme } from '@aws-amplify/ui-react/server';
export const buttonTheme = defineComponentTheme({
// because 'button' is a built-in component, we get type-safety and hints
// based on the theme shape of our button
name: 'button',
theme: (tokens) => {
return {
textAlign: 'center',
padding: tokens.space.xl,
_modifiers: {
primary: {
backgroundColor: tokens.colors.primary[20],
},
},
};
},
});
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot show ignore conditions` will show all of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Bumps @aws-amplify/ui-react from 5.2.0 to 6.2.2.
Release notes
Sourced from
@aws-amplify/ui-react
's releases.... (truncated)
Changelog
Sourced from
@aws-amplify/ui-react
's changelog.... (truncated)
Commits
535682d
Version Packages (#5748)12fd66c
Version Packages (#5646)834b4d3
fix(rsc): add server to files in package.json (#5718)927870b
Version Packages (#5522)d73bd9c
feat(ui): component theming (#5170)e52db7b
fix(ui-react): Whitespace in Tab IDs (#5378)29f11a5
fix(aria-describedby): associated inline error messages with a specific field...b484617
Version Packages (#5419)98135df
fix(authenticator): Check first radio button from unverified user attributes ...a024885
fix(authenticator): fixing visual inconsistencies (#5389)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show