Skip to content

Commit d5c5036

Browse files
carwackcarwack
committed
docs: add filter and pseudo style props
1 parent 214b8bf commit d5c5036

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

‎content/2.styled-system/1.style-props.md

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,249 @@ each group.
413413
| `textShadow` | `text-shadow` | `shadows` |
414414
| `shadow`, `boxShadow` | `box-shadow` | `shadows` |
415415

416+
### Filter
417+
418+
```js
419+
<script setup>
420+
const basicBoxStyles = {
421+
display: "flex",
422+
alignItems: "center",
423+
justifyContent: "center",
424+
textAlign: "center",
425+
boxSize: "250px",
426+
color: "white",
427+
textShadow: "0 0 20px black",
428+
fontWeight: "bold",
429+
fontSize: "20px",
430+
px: 4,
431+
background:
432+
"url(https://picsum.photos/id/1080/200/300) center/cover no-repeat",
433+
};
434+
</script>
435+
436+
<template>
437+
<c-flex flex-wrap="wrap" gap="24px" justify-content="space-evenly">
438+
<!-- adding filter property to the element -->
439+
<c-box :sx="basicBoxStyles" filter="grayscale(80%)"> Box with Filter </c-box>
440+
441+
<!-- adding blur property to the element -->
442+
<c-box :sx="basicBoxStyles" filter="auto" blur="2px"> Box with Blur </c-box>
443+
444+
<!-- adding brightness property to the element -->
445+
<c-box :sx="basicBoxStyles" filter="auto" brightness="40%">
446+
Box with Brightness
447+
</c-box>
448+
</c-flex>
449+
</template>
450+
```
451+
452+
> Note: To apply `blur`, `brightness`, `contrast`, `hueRotate`, `invert`,
453+
> `saturate` props on the element, set `filter` prop value to "auto".
454+
455+
```js
456+
<script setup>
457+
const outerBoxStyles = {
458+
boxSize: "250px",
459+
p: "10",
460+
background:
461+
"url(https://picsum.photos/id/1068/200/300) center/cover no-repeat",
462+
};
463+
464+
const innerBoxStyles = {
465+
display: "flex",
466+
alignItems: "center",
467+
justifyContent: "center",
468+
textAlign: "center",
469+
boxSize: "full",
470+
color: "white",
471+
textShadow: "0 0 20px black",
472+
fontWeight: "bold",
473+
fontSize: "20px",
474+
};
475+
</script>
476+
477+
<template>
478+
<c-flex flex-wrap="wrap" gap="24px" justify-content="space-evenly">
479+
<!-- adding backdrop-filter property to the element -->
480+
<c-box :sx="outerBoxStyles">
481+
<c-box :sx="innerBoxStyles" backdrop-filter="invert(100%)">
482+
Box with Backdrop Filter
483+
</c-box>
484+
</c-box>
485+
486+
<!-- adding backdrop-blur property to the element -->
487+
<c-box :sx="outerBoxStyles">
488+
<c-box :sx="innerBoxStyles" backdrop-filter="auto" backdrop-blur="8px">
489+
Box with Backdrop Blur
490+
</c-box>
491+
</c-box>
492+
493+
<!-- adding backdrop-contrast property to the element -->
494+
<c-box :sx="outerBoxStyles">
495+
<c-box :sx="innerBoxStyles" backdrop-filter="auto" backdrop-contrast="30%">
496+
Box with Backdrop Contrast
497+
</c-box>
498+
</c-box>
499+
</c-flex>
500+
</template>
501+
```
502+
503+
> 🚨 `backdrop-filter` is not supported in Firefox. It can be enabled by the
504+
> user, but it is suggested to design a component that looks good with and
505+
> without this property.
506+
507+
> Note: To apply `backdropBlur`, `backdropBrightness`, `backdropContrast`,
508+
> `backdropHueRotate`, `backdropInvert`, `backdropSaturate` props on the
509+
> element, set `backdropFilter` prop value to "auto".
510+
511+
| Prop | CSS Property | Theme Field |
512+
| -------------------- | ----------------- | ----------- |
513+
| `filter` | `filter` | none |
514+
| `blur` | `filter` | `blur` |
515+
| `brightness` | `filter` | none |
516+
| `contrast` | `filter` | none |
517+
| `hueRotate` | `filter` | none |
518+
| `invert` | `filter` | none |
519+
| `saturate` | `filter` | none |
520+
| `dropShadow` | `filter` | `shadows` |
521+
| `backdropFilter` | `backdrop-filter` | none |
522+
| `backdropBlur` | `backdrop-filter` | `blur` |
523+
| `backdropBrightness` | `backdrop-filter` | none |
524+
| `backdropContrast` | `backdrop-filter` | none |
525+
| `backdropHueRotate` | `backdrop-filter` | none |
526+
| `backdropInvert` | `backdrop-filter` | none |
527+
| `backdropSaturate` | `backdrop-filter` | none |
528+
529+
### Pseudo
530+
531+
```html
532+
<template>
533+
<!-- :hover style -->
534+
<c-button
535+
color-scheme="teal"
536+
:_hover="{
537+
background: 'white',
538+
color: 'teal.500',
539+
}"
540+
>
541+
Hover me
542+
</c-button>
543+
544+
<!-- apply :hover over parent element -->
545+
<c-box role="group">
546+
<c-box
547+
:_hover="{ fontWeight: 'semibold' }"
548+
:_groupHover="{ color: 'tomato' }"
549+
>
550+
Hello
551+
</c-box>
552+
</c-box>
553+
554+
<!-- add ::before pseudo element -->
555+
<!-- Note: the content value needs an extra set of quotes! -->
556+
<c-box
557+
:_before="{
558+
content: `'🙂'`,
559+
display: 'inline-block',
560+
mr: '5px',
561+
}"
562+
>
563+
A pseudo element
564+
</c-box>
565+
</template>
566+
```
567+
568+
| Prop | CSS Property | Theme Field |
569+
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
570+
| `_hover` | `&:hover`<br />`&[data-hover]` | none |
571+
| `_active` | `&:active`<br />`&[data-active]` | none |
572+
| `_focus` | `&:focus`<br />`&[data-focus]` | none |
573+
| `_highlighted` | `&[data-highlighted]` | none |
574+
| `_focusWithin` | `&:focus-within` | none |
575+
| `_focusVisible` | `&:focus-visible` | none |
576+
| `_disabled` | `&[disabled]`<br />`&[aria-disabled=true]`<br />`&[data-disabled]` | none |
577+
| `_readOnly` | `&[aria-readonly=true]`<br />`&[readonly]`<br />`&[data-readonly]` | none |
578+
| `_before` | `&::before` | none |
579+
| `_after` | `&::after` | none |
580+
| `_empty` | `&:empty` | none |
581+
| `_expanded` | `&[aria-expanded=true]`<br />`&[data-expanded]` | none |
582+
| `_checked` | `&[aria-checked=true]`<br />`&[data-checked]` | none |
583+
| `_grabbed` | `&[aria-grabbed=true]`<br />`&[data-grabbed]` | none |
584+
| `_pressed` | `&[aria-pressed=true]`<br />`&[data-pressed]` | none |
585+
| `_invalid` | `&[aria-invalid=true]`<br />`&[data-invalid]` | none |
586+
| `_valid` | `&[data-valid]`<br />`&[data-state=valid]` | none |
587+
| `_loading` | `&[data-loading]`<br />`&[aria-busy=true]` | none |
588+
| `_selected` | `&[aria-selected=true]`<br />`&[data-selected]` | none |
589+
| `_hidden` | `&[hidden]`<br />`&[data-hidden]` | none |
590+
| `_autofill` | `&:-webkit-autofill` | none |
591+
| `_even` | `&:nth-of-type(even)` | none |
592+
| `_odd` | `&:nth-of-type(odd)` | none |
593+
| `_first` | `&:first-of-type` | none |
594+
| `_last` | `&:last-of-type` | none |
595+
| `_notFirst` | `&:not(:first-of-type)` | none |
596+
| `_notLast` | `&:not(:last-of-type)` | none |
597+
| `_visited` | `&:visited` | none |
598+
| `_activeLink` | `&[aria-current=page]` | none |
599+
| `_activeStep` | `&[aria-current=step]` | none |
600+
| `_indeterminate` | `&:indeterminate`<br />`&[aria-checked=mixed]`<br />`&[data-indeterminate]` | none |
601+
| `_groupHover` | `[role=group]:hover &`<br />`[role=group][data-hover] &`<br />`[data-group]:hover &`<br />`[data-group][data-hover] &`<br />`.group:hover &`<br />`.group[data-hover] &` | none |
602+
| `_peerHover` | `[data-peer]:hover ~ &`<br />`[data-peer][data-hover] ~ &`<br />`.peer:hover ~ &`<br />`.peer[data-hover] ~ &` | none |
603+
| `_groupFocus` | `[role=group]:focus &`<br />`[role=group][data-focus] &`<br />`[data-group]:focus &`<br />`[data-group][data-focus] &`<br />`.group:focus &`<br />`.group[data-focus] &` | none |
604+
| `_peerFocus` | `[data-peer]:focus ~ &`<br />`[data-peer][data-focus] ~ &`<br />`.peer:focus ~ &`<br />`.peer[data-focus] ~ &` | none |
605+
| `_groupFocusVisible` | `[role=group]:focus-visible &`<br />`[data-group]:focus-visible &`<br />`.group:focus-visible &` | none |
606+
| `_peerFocusVisible` | `[data-peer]:focus-visible ~ &`<br />`.peer:focus-visible ~ &` | none |
607+
| `_groupActive` | `[role=group]:active &`<br />`[role=group][data-active] &`<br />`[data-group]:active &`<br />`[data-group][data-active] &`<br />`.group:active &`<br />`.group[data-active] &` | none |
608+
| `_peerActive` | `[data-peer]:active ~ &`<br />`[data-peer][data-active] ~ &`<br />`.peer:active ~ &`<br />`.peer[data-active] ~ &` | none |
609+
| `_groupDisabled` | `[role=group]:disabled &`<br />`[role=group][data-disabled] &`<br />`[data-group]:disabled &`<br />`[data-group][data-disabled] &`<br />`.group:disabled &`<br />`.group[data-disabled] &` | none |
610+
| `_peerDisabled` | `[data-peer]:disabled ~ &`<br />`[data-peer][data-disabled] ~ &`<br />`.peer:disabled ~ &`<br />`.peer[data-disabled] ~ &` | none |
611+
| `_groupInvalid` | `[role=group]:invalid &`<br />`[role=group][data-invalid] &`<br />`[data-group]:invalid &`<br />`[data-group][data-invalid] &`<br />`.group:invalid &`<br />`.group[data-invalid] &` | none |
612+
| `_peerInvalid` | `[data-peer]:invalid ~ &`<br />`[data-peer][data-invalid] ~ &`<br />`.peer:invalid ~ &`<br />`.peer[data-invalid] ~ &` | none |
613+
| `_groupChecked` | `[role=group]:checked &`<br />`[role=group][data-checked] &`<br />`[data-group]:checked &`<br />`[data-group][data-checked] &`<br />`.group:checked &`<br />`.group[data-checked] &` | none |
614+
| `_peerChecked` | `[data-peer]:checked ~ &`<br />`[data-peer][data-checked] ~ &`<br />`.peer:checked ~ &`<br />`.peer[data-checked] ~ &` | none |
615+
| `_groupFocusWithin` | `[role=group]:focus-within &`<br />`[data-group]:focus-within &`<br />`.group:focus-within &` | none |
616+
| `_peerFocusWithin` | `[data-peer]:focus-within ~ &`<br />`.peer:focus-within ~ &` | none |
617+
| `_peerPlaceholderShown` | `[data-peer]:placeholder-shown ~ &`<br />`.peer:placeholder-shown ~ &` | none |
618+
| `_placeholder` | `&::placeholder` | none |
619+
| `_placeholderShown` | `&:placeholder-shown` | none |
620+
| `_fullScreen` | `&:fullscreen` | none |
621+
| `_selection` | `&::selection` | none |
622+
| `_rtl` | `[dir=rtl] &`<br />`&[dir=rtl]` | none |
623+
| `_ltr` | `[dir=ltr] &`<br />`&[dir=ltr]` | none |
624+
| `_mediaDark` | `@media (prefers-color-scheme: dark)` | none |
625+
| `_mediaReduceMotion` | `@media (prefers-reduced-motion: reduce)` | none |
626+
| `_dark` | `.chakra-ui-dark &`<br />`[data-theme=dark] &`<br />`&[data-theme=dark]` | none |
627+
| `_light` | `.chakra-ui-light &`<br />`[data-theme=light] &`<br />`&[data-theme=light]` | none |
628+
629+
### Other Props
630+
631+
Asides all the common style props listed above, all component will accept the
632+
following props:
633+
634+
| Prop | CSS Property | Theme Field |
635+
| ----------------- | ------------------ | ----------- |
636+
| `animation` | `animation` | none |
637+
| `appearance` | `appearance` | none |
638+
| `content` | `content` | none |
639+
| `transform` | `transform` | none |
640+
| `transformOrigin` | `transform-origin` | none |
641+
| `visibility` | `visibility` | none |
642+
| `whiteSpace` | `white-space` | none |
643+
| `userSelect` | `user-select` | none |
644+
| `pointerEvents` | `pointer-events` | none |
645+
| `wordBreak` | `word-break` | none |
646+
| `overflowWrap` | `overflow-wrap` | none |
647+
| `textOverflow` | `text-overflow` | none |
648+
| `boxSizing` | `box-sizing` | none |
649+
| `cursor` | `cursor` | none |
650+
| `resize` | `resize` | none |
651+
| `transition` | `transition` | none |
652+
| `objectFit` | `object-fit` | none |
653+
| `objectPosition` | `object-position` | none |
654+
| `float` | `float` | none |
655+
| `fill` | `fill` | `colors` |
656+
| `stroke` | `stroke` | `colors` |
657+
| `outline` | `outline` | none |
658+
416659
## The `as` prop
417660

418661
The `as` prop is a feature in all of our components that allows you to pass an

0 commit comments

Comments
 (0)