UNPKG

@hakuna-matata-ui/styled-system

Version:

Style function for css-in-js building component libraries

210 lines 6.04 kB
export declare const pseudoSelectors: { /** * Styles for CSS selector `&:hover` */ _hover: string; /** * Styles for CSS Selector `&:active` */ _active: string; /** * Styles for CSS selector `&:focus` * */ _focus: string; /** * Styles for the highlighted state. */ _highlighted: string; /** * Styles to apply when a child of this element has received focus * - CSS Selector `&:focus-within` */ _focusWithin: string; _focusVisible: string; /** * Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors: * - `&[aria-disabled=true]` * - `&:disabled` * - `&[data-disabled]` */ _disabled: string; /** * Styles for CSS Selector `&:readonly` */ _readOnly: string; /** * Styles for CSS selector `&::before` * * NOTE:When using this, ensure the `content` is wrapped in a backtick. * @example * ```jsx * <Box _before={{content:`""` }}/> * ``` */ _before: string; /** * Styles for CSS selector `&::after` * * NOTE:When using this, ensure the `content` is wrapped in a backtick. * @example * ```jsx * <Box _after={{content:`""` }}/> * ``` */ _after: string; _empty: string; /** * Styles to apply when the ARIA attribute `aria-expanded` is `true` * - CSS selector `&[aria-expanded=true]` */ _expanded: string; /** * Styles to apply when the ARIA attribute `aria-checked` is `true` * - CSS selector `&[aria-checked=true]` */ _checked: string; /** * Styles to apply when the ARIA attribute `aria-grabbed` is `true` * - CSS selector `&[aria-grabbed=true]` */ _grabbed: string; /** * Styles for CSS Selector `&[aria-pressed=true]` * Typically used to style the current "pressed" state of toggle buttons */ _pressed: string; /** * Styles to apply when the ARIA attribute `aria-invalid` is `true` * - CSS selector `&[aria-invalid=true]` */ _invalid: string; /** * Styles for the valid state * - CSS selector `&[data-valid], &[data-state=valid]` */ _valid: string; /** * Styles for CSS Selector `&[aria-busy=true]` or `&[data-loading=true]`. * Useful for styling loading states */ _loading: string; /** * Styles to apply when the ARIA attribute `aria-selected` is `true` * * - CSS selector `&[aria-selected=true]` */ _selected: string; /** * Styles for CSS Selector `[hidden=true]` */ _hidden: string; /** * Styles for CSS Selector `&:-webkit-autofill` */ _autofill: string; /** * Styles for CSS Selector `&:nth-child(even)` */ _even: string; /** * Styles for CSS Selector `&:nth-child(odd)` */ _odd: string; /** * Styles for CSS Selector `&:first-of-type` */ _first: string; /** * Styles for CSS Selector `&:last-of-type` */ _last: string; /** * Styles for CSS Selector `&:not(:first-of-type)` */ _notFirst: string; /** * Styles for CSS Selector `&:not(:last-of-type)` */ _notLast: string; /** * Styles for CSS Selector `&:visited` */ _visited: string; /** * Used to style the active link in a navigation * Styles for CSS Selector `&[aria-current=page]` */ _activeLink: string; /** * Used to style the current step within a process * Styles for CSS Selector `&[aria-current=step]` */ _activeStep: string; /** * Styles to apply when the ARIA attribute `aria-checked` is `mixed` * - CSS selector `&[aria-checked=mixed]` */ _indeterminate: string; /** * Styles to apply when parent is hovered */ _groupHover: string; /** * Styles to apply when parent is focused */ _groupFocus: string; _groupFocusVisible: string; /** * Styles to apply when parent is active */ _groupActive: string; /** * Styles to apply when parent is disabled */ _groupDisabled: string; /** * Styles to apply when parent is invalid */ _groupInvalid: string; /** * Styles to apply when parent is checked */ _groupChecked: string; /** * Styles for CSS Selector `&::placeholder`. */ _placeholder: string; /** * Styles for CSS Selector `&:fullscreen`. */ _fullScreen: string; /** * Styles for CSS Selector `&::selection` */ _selection: string; /** * Styles for CSS Selector `[dir=rtl] &` * It is applied when any parent element has `dir="rtl"` */ _rtl: string; /** * Styles for CSS Selector `@media (prefers-color-scheme: dark)` * used when the user has requested the system * use a light or dark color theme. */ _mediaDark: string; /** * Styles for when `data-theme` is applied to any parent of * this component or element. */ _dark: string; /** * Styles for when `data-theme` is applied to any parent of * this component or element. */ _light: string; }; export declare type Pseudos = typeof pseudoSelectors; export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_activeStep" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupFocusVisible" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl" | "_mediaDark" | "_dark" | "_light")[]; //# sourceMappingURL=pseudos.d.ts.map