- Updated all component headers and documentation
- Changed navbar and footer branding
- Updated homepage hero badge
- Modified page title in index.html
- Simplified footer text to 'Built with ❤️'
- Consistent V2 capitalization across all references
342 lines
11 KiB
JavaScript
342 lines
11 KiB
JavaScript
const state = {
|
|
open: (str, post) => `${str}[data-open], ${str}[open], ${str}[data-state=open] ${post}`,
|
|
closed: (str, post) => `${str}[data-closed], ${str}[data-state=closed] ${post}`,
|
|
hover: (str, post) => `${str}:hover ${post}, ${str}[data-hover] ${post}`,
|
|
focus: (str, post) => `${str}:focus ${post}, ${str}[data-focus] ${post}`,
|
|
focusVisible: (str, post) => `${str}:focus-visible ${post}`,
|
|
focusWithin: (str, post) => `${str}:focus-within ${post}`,
|
|
active: (str, post) => `${str}:active ${post}, ${str}[data-active] ${post}`,
|
|
disabled: (str, post) => `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,
|
|
invalid: (str, post) => `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,
|
|
checked: (str, post) => `${str}:checked ${post}, ${str}[data-checked] ${post}`,
|
|
indeterminate: (str, post) => `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,
|
|
readOnly: (str, post) => `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,
|
|
expanded: (str, post) => `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,
|
|
placeholderShown: (str, post) => `${str}:placeholder-shown ${post}`
|
|
};
|
|
const toGroup = (fn) => merge((v) => fn(v, "&"), "[role=group]", "[data-group]", ".group");
|
|
const toPeer = (fn) => merge((v) => fn(v, "~ &"), "[data-peer]", ".peer");
|
|
const merge = (fn, ...selectors) => selectors.map(fn).join(", ");
|
|
const pseudoSelectors = {
|
|
/**
|
|
* Styles for CSS selector `&:hover`
|
|
*/
|
|
_hover: "&:hover, &[data-hover]",
|
|
/**
|
|
* Styles for CSS Selector `&:active`
|
|
*/
|
|
_active: "&:active, &[data-active]",
|
|
/**
|
|
* Styles for CSS selector `&:focus`
|
|
*
|
|
*/
|
|
_focus: "&:focus, &[data-focus]",
|
|
/**
|
|
* Styles for the highlighted state.
|
|
*/
|
|
_highlighted: "&[data-highlighted]",
|
|
/**
|
|
* Styles to apply when a child of this element has received focus
|
|
* - CSS Selector `&:focus-within`
|
|
*/
|
|
_focusWithin: "&:focus-within, &[data-focus-within]",
|
|
/**
|
|
* Styles to apply when this element has received focus via tabbing
|
|
* - CSS Selector `&:focus-visible`
|
|
*/
|
|
_focusVisible: "&:focus-visible, &[data-focus-visible]",
|
|
/**
|
|
* Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:
|
|
* - `&[aria-disabled=true]`
|
|
* - `&:disabled`
|
|
* - `&[data-disabled]`
|
|
* - `&[disabled]`
|
|
*/
|
|
_disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
|
|
/**
|
|
* Styles for CSS Selector `&:readonly`
|
|
*/
|
|
_readOnly: "&[aria-readonly=true], &[readonly], &[data-readonly]",
|
|
/**
|
|
* Styles for CSS selector `&::before`
|
|
*
|
|
* NOTE:When using this, ensure the `content` is wrapped in a backtick.
|
|
* @example
|
|
* ```jsx
|
|
* <Box _before={{content:`""` }}/>
|
|
* ```
|
|
*/
|
|
_before: "&::before",
|
|
/**
|
|
* Styles for CSS selector `&::after`
|
|
*
|
|
* NOTE:When using this, ensure the `content` is wrapped in a backtick.
|
|
* @example
|
|
* ```jsx
|
|
* <Box _after={{content:`""` }}/>
|
|
* ```
|
|
*/
|
|
_after: "&::after",
|
|
/**
|
|
* Styles for CSS selector `&:empty`
|
|
*/
|
|
_empty: "&:empty, &[data-empty]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-expanded` is `true`
|
|
* - CSS selector `&[aria-expanded=true]`
|
|
*/
|
|
_expanded: "&[aria-expanded=true], &[data-expanded], &[data-state=expanded]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-checked` is `true`
|
|
* - CSS selector `&[aria-checked=true]`
|
|
*/
|
|
_checked: "&[aria-checked=true], &[data-checked], &[data-state=checked]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-grabbed` is `true`
|
|
* - CSS selector `&[aria-grabbed=true]`
|
|
*/
|
|
_grabbed: "&[aria-grabbed=true], &[data-grabbed]",
|
|
/**
|
|
* Styles for CSS Selector `&[aria-pressed=true]`
|
|
* Typically used to style the current "pressed" state of toggle buttons
|
|
*/
|
|
_pressed: "&[aria-pressed=true], &[data-pressed]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-invalid` is `true`
|
|
* - CSS selector `&[aria-invalid=true]`
|
|
*/
|
|
_invalid: "&[aria-invalid=true], &[data-invalid]",
|
|
/**
|
|
* Styles for the valid state
|
|
* - CSS selector `&[data-valid], &[data-state=valid]`
|
|
*/
|
|
_valid: "&[data-valid], &[data-state=valid]",
|
|
/**
|
|
* Styles for CSS Selector `&[aria-busy=true]` or `&[data-loading=true]`.
|
|
* Useful for styling loading states
|
|
*/
|
|
_loading: "&[data-loading], &[aria-busy=true]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-selected` is `true`
|
|
*
|
|
* - CSS selector `&[aria-selected=true]`
|
|
*/
|
|
_selected: "&[aria-selected=true], &[data-selected]",
|
|
/**
|
|
* Styles for CSS Selector `[hidden=true]`
|
|
*/
|
|
_hidden: "&[hidden], &[data-hidden]",
|
|
/**
|
|
* Styles for CSS Selector `&:-webkit-autofill`
|
|
*/
|
|
_autofill: "&:-webkit-autofill",
|
|
/**
|
|
* Styles for CSS Selector `&:nth-child(even)`
|
|
*/
|
|
_even: "&:nth-of-type(even)",
|
|
/**
|
|
* Styles for CSS Selector `&:nth-child(odd)`
|
|
*/
|
|
_odd: "&:nth-of-type(odd)",
|
|
/**
|
|
* Styles for CSS Selector `&:first-of-type`
|
|
*/
|
|
_first: "&:first-of-type",
|
|
/**
|
|
* Styles for CSS selector `&::first-letter`
|
|
*
|
|
* NOTE: This selector is only applied for block-level elements and not preceded by an image or table.
|
|
* @example
|
|
* ```jsx
|
|
* <Text _firstLetter={{ textDecoration: 'underline' }}>Once upon a time</Text>
|
|
* ```
|
|
*/
|
|
_firstLetter: "&::first-letter",
|
|
/**
|
|
* Styles for CSS Selector `&:last-of-type`
|
|
*/
|
|
_last: "&:last-of-type",
|
|
/**
|
|
* Styles for CSS Selector `&:not(:first-of-type)`
|
|
*/
|
|
_notFirst: "&:not(:first-of-type)",
|
|
/**
|
|
* Styles for CSS Selector `&:not(:last-of-type)`
|
|
*/
|
|
_notLast: "&:not(:last-of-type)",
|
|
/**
|
|
* Styles for CSS Selector `&:visited`
|
|
*/
|
|
_visited: "&:visited",
|
|
/**
|
|
* Used to style the active link in a navigation
|
|
* Styles for CSS Selector `&[aria-current=page]`
|
|
*/
|
|
_activeLink: "&[aria-current=page]",
|
|
/**
|
|
* Used to style the current step within a process
|
|
* Styles for CSS Selector `&[aria-current=step]`
|
|
*/
|
|
_activeStep: "&[aria-current=step]",
|
|
/**
|
|
* Styles to apply when the ARIA attribute `aria-checked` is `mixed`
|
|
* - CSS selector `&[aria-checked=mixed]`
|
|
*/
|
|
_indeterminate: "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate], &[data-state=indeterminate]",
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is open
|
|
*/
|
|
_groupOpen: toGroup(state.open),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is closed
|
|
*/
|
|
_groupClosed: toGroup(state.closed),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered
|
|
*/
|
|
_groupHover: toGroup(state.hover),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is hovered
|
|
*/
|
|
_peerHover: toPeer(state.hover),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused
|
|
*/
|
|
_groupFocus: toGroup(state.focus),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is focused
|
|
*/
|
|
_peerFocus: toPeer(state.focus),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus
|
|
*/
|
|
_groupFocusVisible: toGroup(state.focusVisible),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus
|
|
*/
|
|
_peerFocusVisible: toPeer(state.focusVisible),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active
|
|
*/
|
|
_groupActive: toGroup(state.active),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is active
|
|
*/
|
|
_peerActive: toPeer(state.active),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled
|
|
*/
|
|
_groupDisabled: toGroup(state.disabled),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is disabled
|
|
*/
|
|
_peerDisabled: toPeer(state.disabled),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid
|
|
*/
|
|
_groupInvalid: toGroup(state.invalid),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is invalid
|
|
*/
|
|
_peerInvalid: toPeer(state.invalid),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked
|
|
*/
|
|
_groupChecked: toGroup(state.checked),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` is checked
|
|
*/
|
|
_peerChecked: toPeer(state.checked),
|
|
/**
|
|
* Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within
|
|
*/
|
|
_groupFocusWithin: toGroup(state.focusWithin),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` has focus within
|
|
*/
|
|
_peerFocusWithin: toPeer(state.focusWithin),
|
|
/**
|
|
* Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown
|
|
*/
|
|
_peerPlaceholderShown: toPeer(state.placeholderShown),
|
|
/**
|
|
* Styles for CSS Selector `&::placeholder`.
|
|
*/
|
|
_placeholder: "&::placeholder, &[data-placeholder]",
|
|
/**
|
|
* Styles for CSS Selector `&:placeholder-shown`.
|
|
*/
|
|
_placeholderShown: "&:placeholder-shown, &[data-placeholder-shown]",
|
|
/**
|
|
* Styles for CSS Selector `&:fullscreen`.
|
|
*/
|
|
_fullScreen: "&:fullscreen, &[data-fullscreen]",
|
|
/**
|
|
* Styles for CSS Selector `&::selection`
|
|
*/
|
|
_selection: "&::selection",
|
|
/**
|
|
* Styles for CSS Selector `[dir=rtl] &`
|
|
* It is applied when a parent element or this element has `dir="rtl"`
|
|
*/
|
|
_rtl: "[dir=rtl] &, &[dir=rtl]",
|
|
/**
|
|
* Styles for CSS Selector `[dir=ltr] &`
|
|
* It is applied when a parent element or this element has `dir="ltr"`
|
|
*/
|
|
_ltr: "[dir=ltr] &, &[dir=ltr]",
|
|
/**
|
|
* Styles for CSS Selector `@media (prefers-color-scheme: dark)`
|
|
* It is used when the user has requested the system use a light or dark color theme.
|
|
*/
|
|
_mediaDark: "@media (prefers-color-scheme: dark)",
|
|
/**
|
|
* Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`
|
|
* It is used when the user has requested the system to reduce the amount of animations.
|
|
*/
|
|
_mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
|
|
/**
|
|
* Styles for when `data-theme` is applied to any parent of
|
|
* this component or element.
|
|
*/
|
|
_dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
|
|
/**
|
|
* Styles for when `data-theme` is applied to any parent of
|
|
* this component or element.
|
|
*/
|
|
_light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-orientation=horizontal]`
|
|
*/
|
|
_horizontal: "&[data-orientation=horizontal]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-orientation=vertical]`
|
|
*/
|
|
_vertical: "&[data-orientation=vertical]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-open], &[open], &[data-state=open]`
|
|
*/
|
|
_open: "&[data-open], &[open], &[data-state=open]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-closed], &[data-state=closed]`
|
|
*/
|
|
_closed: "&[data-closed], &[data-state=closed]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-complete]`
|
|
*/
|
|
_complete: "&[data-complete]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-incomplete]`
|
|
*/
|
|
_incomplete: "&[data-incomplete]",
|
|
/**
|
|
* Styles for the CSS Selector `&[data-current]`
|
|
*/
|
|
_current: "&[data-current]"
|
|
};
|
|
const pseudoPropNames = Object.keys(
|
|
pseudoSelectors
|
|
);
|
|
|
|
export { pseudoPropNames, pseudoSelectors };
|