diff --git a/README.md b/README.md index dc79cf3..cfa4798 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ - Breakpoints as objects - User defined theme support - Shorthands (`m` for `margin`, `paddingX` for `paddingLeft` and `paddingRight`...) +- State handling (hover, focused, pressed) with child support - Atomic CSS generation - Automatic vendor prefixing - SSR support @@ -37,9 +38,17 @@ const ColoredDiv = ({ color }: { color: string }) => { height: { xs: "13%", lg: "25%" }, paddingX: (theme) => theme.spaccing, m: 1, + focus: { + self: { + bg: "green", + }, + text: { + color: "black", + }, + } })} > -

Text inside the colored div.

+

Text inside the colored div.

); }; @@ -62,9 +71,17 @@ const ColoredBox = ({ color }: { color: string }) => { height: { xs: "13%", lg: "25%" }, paddingX: (theme) => theme.spaccing, m: 1, + focus: { + self: { + bg: "green", + }, + text: { + color: "black", + }, + } })} > - Text inside the colored box. + Text inside the colored div. ); }; @@ -336,8 +353,10 @@ The first parameter is a css object, in react web that means a dictionary of css a `ViewStyle`, a `TextStyle` or an `ImageStyle`. Yoshiki will unsure type safety by returning the style object needed for your arguments. -The css object can also take the keys `hover`, `focus` and `press`, and it will apply the style object given as a value -to the object only when it should. +The css object can also take the keys `hover`, `focus` and `press`. Thoses keys should be filled with a dictionary of +keys and style properties. You can then use thoses keys on a child component by putting it as a string in the `css` +call. Yoshiki will apply the style object to the object only when it should. You can also use the special value `self` +to directly theme the component that defines the state. The leftover parameter is here to allow your component to be customized by yoshiki. See [Customize your own components](#customize-your-own-components) for more details.