From 3469ed31400aeb1d018c4d257bb1d3178cf34a08 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Thu, 25 Feb 2021 12:52:09 -0800 Subject: [PATCH 1/5] Upgrade G2 --- package-lock.json | 67 ++++++++++++++++++-------------- packages/components/package.json | 8 ++-- 2 files changed, 41 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index d5b2a1bb89649e..ccf5e2de80e01a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1598,6 +1598,11 @@ } } }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz", @@ -12428,10 +12433,10 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", - "@wp-g2/components": "^0.0.156", - "@wp-g2/context": "^0.0.156", - "@wp-g2/styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156", + "@wp-g2/components": "^0.0.159", + "@wp-g2/context": "^0.0.159", + "@wp-g2/styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159", "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", @@ -12465,14 +12470,14 @@ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" }, "@wp-g2/components": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.156.tgz", - "integrity": "sha512-PLu1jgQ2LRV2gcnvWrC4QM0bpfxzC1N2f6e4dpvueawuXs2avq2GJKol9vDKT2AKsmuQt+GhreTkyGHR4HO0fA==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/components/-/components-0.0.159.tgz", + "integrity": "sha512-FUuQpZxiq7ROfOrPcCcru3znc82r9VtVRSAACQpadRswIYr9aTaedWOCnaI0QU32rs51nh4bc2LwalZVtE7nkg==", "requires": { "@popperjs/core": "^2.5.4", - "@wp-g2/context": "^0.0.156", - "@wp-g2/styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156", + "@wp-g2/context": "^0.0.159", + "@wp-g2/styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159", "csstype": "^3.0.3", "downshift": "^6.0.15", "framer-motion": "^2.1.0", @@ -12487,23 +12492,25 @@ } }, "@wp-g2/context": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.156.tgz", - "integrity": "sha512-T7Sy0Ti9W6I6+VpZJNlnseSuKXk0Q/UqJHsA3jO0wI3zWL/Vj3xl7ZEHFt1Hyae3gIqWKd84REkRK667274pXw==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/context/-/context-0.0.159.tgz", + "integrity": "sha512-FyWg2u2yjUfzoNv3W8L+JQKojYuYrauNU0SidqbGaPMrk5ftSkRHisCxiYQgfeBUSPVvEIVfIDacDfHZ6QjI8A==", "requires": { - "@wp-g2/styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156", + "@emotion/hash": "^0.8.0", + "@wp-g2/styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159", "lodash": "^4.17.19" } }, "@wp-g2/create-styles": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.156.tgz", - "integrity": "sha512-wbMIfgUSnQKOsK+z0HVQDEntzZeltuN1ZePYn7o/eNbhDaA3nKKVQ9GhHcjPbNQxZlmPRKy4wPeQntWSOVGipA==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/create-styles/-/create-styles-0.0.159.tgz", + "integrity": "sha512-cdoasY3TS2LoBHK/Erw57gcHAYex2csKULLoFcvlttMBMhsLT0tQWz6aJjJDFCW1QZAjjIuk+FXByOxyZwo2cg==", "requires": { "@emotion/core": "^10.1.1", + "@emotion/hash": "^0.8.0", "@emotion/is-prop-valid": "^0.8.8", - "@wp-g2/utils": "^0.0.156", + "@wp-g2/utils": "^0.0.159", "create-emotion": "^10.0.27", "emotion": "^10.0.27", "emotion-theming": "^10.0.27", @@ -12514,18 +12521,18 @@ } }, "@wp-g2/styles": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.156.tgz", - "integrity": "sha512-KZfBEfgFhKbAsNqcYyrdG5uyk7BZ7jVcZ0HPC9iUFi58c7/+v+1qN5EkGxVwTg3F2iDR8J0iTbhrwKtckgcaTA==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/styles/-/styles-0.0.159.tgz", + "integrity": "sha512-ZjhAKuLwNa+l5fJgwGzu7UzsUGJcW9D1EdfORKbGBv7Jw4+6P5xk+qf4CNYN6u3EE3J5r//CTF16f6Pbj2pjKg==", "requires": { - "@wp-g2/create-styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156" + "@wp-g2/create-styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159" } }, "@wp-g2/utils": { - "version": "0.0.156", - "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.156.tgz", - "integrity": "sha512-iBxzoecGlpPnX8pv6f4MfUulGf/cyYlsff8Vl4BHI6sU8kQc4lLDo2qyQ/723bqFPiVgAE5fDanyqKoVywxO3Q==", + "version": "0.0.159", + "resolved": "https://registry.npmjs.org/@wp-g2/utils/-/utils-0.0.159.tgz", + "integrity": "sha512-0bkbB1o+4J3qShVl5STiWVN9xl2+/LtiEi/sC4yx/yeFXN31Cr/HKtGVIjil2aRkL8Dk7imbaSJoMIyH5LfvsA==", "requires": { "copy-to-clipboard": "^3.3.1", "create-emotion": "^10.0.27", @@ -12543,9 +12550,9 @@ } }, "csstype": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", - "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==" }, "fast-deep-equal": { "version": "3.1.3", diff --git a/packages/components/package.json b/packages/components/package.json index dda78a970395ea..77430c48c1e811 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -45,10 +45,10 @@ "@wordpress/primitives": "file:../primitives", "@wordpress/rich-text": "file:../rich-text", "@wordpress/warning": "file:../warning", - "@wp-g2/components": "^0.0.156", - "@wp-g2/context": "^0.0.156", - "@wp-g2/styles": "^0.0.156", - "@wp-g2/utils": "^0.0.156", + "@wp-g2/components": "^0.0.159", + "@wp-g2/context": "^0.0.159", + "@wp-g2/styles": "^0.0.159", + "@wp-g2/utils": "^0.0.159", "classnames": "^2.2.5", "dom-scroll-into-view": "^1.2.1", "downshift": "^6.0.15", From c31a492cf2dd19c25e9d95f274dbdba9c2e00914 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Mon, 1 Mar 2021 03:37:11 -0800 Subject: [PATCH 2/5] Components: Add Popover --- .../components/src/ui/popover/component.js | 107 ++++++ packages/components/src/ui/popover/content.js | 63 ++++ packages/components/src/ui/popover/context.js | 10 + packages/components/src/ui/popover/index.js | 2 + .../src/ui/popover/stories/index.js | 26 ++ packages/components/src/ui/popover/styles.js | 34 ++ .../popover/test/__snapshots__/index.js.snap | 336 ++++++++++++++++++ .../components/src/ui/popover/test/index.js | 103 ++++++ packages/components/src/ui/popover/types.ts | 80 +++++ packages/components/src/ui/popover/utils.js | 20 ++ packages/components/src/ui/utils/index.js | 1 + packages/components/src/ui/utils/types.ts | 28 ++ .../ui/utils/use-isomorphic-layout-effect.js | 10 + 13 files changed, 820 insertions(+) create mode 100644 packages/components/src/ui/popover/component.js create mode 100644 packages/components/src/ui/popover/content.js create mode 100644 packages/components/src/ui/popover/context.js create mode 100644 packages/components/src/ui/popover/index.js create mode 100644 packages/components/src/ui/popover/stories/index.js create mode 100644 packages/components/src/ui/popover/styles.js create mode 100644 packages/components/src/ui/popover/test/__snapshots__/index.js.snap create mode 100644 packages/components/src/ui/popover/test/index.js create mode 100644 packages/components/src/ui/popover/types.ts create mode 100644 packages/components/src/ui/popover/utils.js create mode 100644 packages/components/src/ui/utils/use-isomorphic-layout-effect.js diff --git a/packages/components/src/ui/popover/component.js b/packages/components/src/ui/popover/component.js new file mode 100644 index 00000000000000..b57770949432be --- /dev/null +++ b/packages/components/src/ui/popover/component.js @@ -0,0 +1,107 @@ +/** + * External dependencies + */ +import { contextConnect, useContextSystem } from '@wp-g2/context'; +import { noop, useUpdateEffect } from '@wp-g2/utils'; +// eslint-disable-next-line no-restricted-imports +import { PopoverDisclosure, usePopoverState } from 'reakit'; + +/** + * WordPress dependencies + */ +import { useCallback, useMemo, cloneElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { Portal } from '../portal'; +import { PopoverContext } from './context'; +import { usePopoverResizeUpdater } from './utils'; +import PopoverContent from './content'; + +/** + * + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('react').Ref} forwardedRef + */ +function Popover( props, forwardedRef ) { + const { + animated = true, + animationDuration = 160, + baseId, + children, + elevation = 5, + id, + label, + maxWidth = 360, + onVisibleChange = noop, + placement, + state, + trigger, + visible, + ...otherProps + } = useContextSystem( props, 'Popover' ); + + const _popover = usePopoverState( { + animated: animated ? animationDuration : undefined, + baseId: baseId || id, + placement, + visible, + ...otherProps, + } ); + + const popover = state || _popover; + + const resizeListener = usePopoverResizeUpdater( { + onResize: popover.unstable_update, + } ); + + const uniqueId = `popover-${ popover.baseId }`; + const labelId = label || uniqueId; + + const contextProps = useMemo( + () => ( { + label: labelId, + popover, + } ), + [ labelId, popover ] + ); + + const triggerContent = useCallback( + ( triggerProps ) => { + return cloneElement( trigger, triggerProps ); + }, + [ trigger ] + ); + + useUpdateEffect( () => { + onVisibleChange( popover.visible ); + }, [ popover.visible ] ); + + return ( + + { trigger && ( + + { triggerContent } + + ) } + + + { resizeListener } + { children } + + + + ); +} + +export default contextConnect( Popover, 'Popover' ); diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/ui/popover/content.js new file mode 100644 index 00000000000000..f05f66d7ddafdd --- /dev/null +++ b/packages/components/src/ui/popover/content.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import { contextConnect, useContextSystem } from '@wp-g2/context'; +import { css, cx } from '@wp-g2/styles'; +// eslint-disable-next-line no-restricted-imports +import { Popover as ReakitPopover } from 'reakit'; + +/** + * Internal dependencies + */ +import { Card } from '../card'; +import { View } from '../view'; +import { usePopoverContext } from './context'; +import * as styles from './styles'; + +/** + * + * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('react').Ref} forwardedRef + */ +function PopoverContent( props, forwardedRef ) { + const { + children, + className, + elevation = 5, + maxWidth = 360, + ...otherProps + } = useContextSystem( props, 'PopoverContent' ); + + const { label, popover } = usePopoverContext(); + const classes = cx( styles.PopoverContent, css( { maxWidth } ), className ); + + if ( ! popover ) { + throw new Error( + '`PopoverContent` must only be used inside a `Popover`.' + ); + } + + const showContent = popover.visible || popover.animating; + + return ( + + { showContent && ( + + { children } + + ) } + + ); +} + +export default contextConnect( PopoverContent, 'PopoverContent' ); diff --git a/packages/components/src/ui/popover/context.js b/packages/components/src/ui/popover/context.js new file mode 100644 index 00000000000000..902903260a49ab --- /dev/null +++ b/packages/components/src/ui/popover/context.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { createContext, useContext } from '@wordpress/element'; + +/** + * @type {import('react').Context} + */ +export const PopoverContext = createContext( {} ); +export const usePopoverContext = () => useContext( PopoverContext ); diff --git a/packages/components/src/ui/popover/index.js b/packages/components/src/ui/popover/index.js new file mode 100644 index 00000000000000..fe984a96eb127e --- /dev/null +++ b/packages/components/src/ui/popover/index.js @@ -0,0 +1,2 @@ +export { default as Popover } from './component'; +export * from './context'; diff --git a/packages/components/src/ui/popover/stories/index.js b/packages/components/src/ui/popover/stories/index.js new file mode 100644 index 00000000000000..6151d21e3c0219 --- /dev/null +++ b/packages/components/src/ui/popover/stories/index.js @@ -0,0 +1,26 @@ +/** + * Internal dependencies + */ +/** + * External dependencies + */ +import { Button, CardBody, CardHeader } from '@wp-g2/components'; +import { Popover } from '..'; + +export default { + component: Popover, + title: 'G2 Components (Experimental)/Popover', +}; + +export const _default = () => { + return ( + Click } + visible + placement="bottom-start" + > + Go + Stuff + + ); +}; diff --git a/packages/components/src/ui/popover/styles.js b/packages/components/src/ui/popover/styles.js new file mode 100644 index 00000000000000..c87450c7e7c900 --- /dev/null +++ b/packages/components/src/ui/popover/styles.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { css, ui } from '@wp-g2/styles'; +/** + * Internal dependencies + */ +import { CardBody } from '../card'; + +export const PopoverContent = css` + ${ ui.zIndex( 'Popover', 10000 ) }; + box-sizing: border-box; + opacity: 0; + outline: none; + position: relative; + transform-origin: center center; + transition: opacity ${ ui.get( 'transitionDurationFastest' ) } linear; + width: 100%; + + &[data-enter] { + opacity: 1; + } + + &::before, + &::after { + display: none; + } +`; + +export const cardStyle = css` + ${ CardBody } { + max-height: 80vh; + } +`; diff --git a/packages/components/src/ui/popover/test/__snapshots__/index.js.snap b/packages/components/src/ui/popover/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..0cfe871f278e61 --- /dev/null +++ b/packages/components/src/ui/popover/test/__snapshots__/index.js.snap @@ -0,0 +1,336 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`props should render correctly 1`] = ` +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background-color: #ffffff; + background-color: var(--wp-g2-surface-color); + color: #1e1e1e; + color: var(--wp-g2-color-text); + position: relative; + --wp-g2-surface-background-size: 12px; + --wp-g2-surface-background-size-dotted: 11px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0 1px var(--wp-g2-surface-border-color); + outline: none; + border-radius: 2px; + border-radius: var(--wp-g2-card-border-radius); +} + +@media (prefers-reduced-motion) { + .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none !important; + transition: none !important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 { + -webkit-transition: none !important; + transition: none !important; +} + +.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4.emotion-4 .ic-1reds0m { + max-height: 80vh; +} + +.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + height: 100%; +} + +@media (prefers-reduced-motion) { + .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { + -webkit-transition: none !important; + transition: none !important; +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + height: auto; + max-height: 100%; + padding: calc(4px * 3) calc(4px * 3); + padding: var(--wp-g2-card-padding); +} + +@media (prefers-reduced-motion) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + -webkit-transition: none !important; + transition: none !important; +} + +@media only screen and ( min-device-width:40em ) { + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0::-webkit-scrollbar { + height: 12px; + width: 12px; + } + + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0::-webkit-scrollbar-track { + background-color: transparent; + } + + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.04); + background: var(--wp-g2-color-scrollbar-track); + border-radius: 8px; + } + + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0::-webkit-scrollbar-thumb { + background-clip: padding-box; + background-color: rgba(0, 0, 0, 0.2); + background-color: var(--wp-g2-color-scrollbar-thumb); + border: 2px solid rgba( 0,0,0,0 ); + border-radius: 7px; + } + + .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:hover::-webkit-scrollbar-thumb { + background-color: rgba(0, 0, 0, 0.5); + background-color: var(--wp-g2-color-scrollbar-thumb-hover); + } +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:first-of-type { + border-top-left-radius: 2px; + border-top-left-radius: var(--wp-g2-card-border-radius); + border-top-right-radius: 2px; + border-top-right-radius: var(--wp-g2-card-border-radius); +} + +.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:last-of-type { + border-bottom-left-radius: 2px; + border-bottom-left-radius: var(--wp-g2-card-border-radius); + border-bottom-right-radius: 2px; + border-bottom-right-radius: var(--wp-g2-card-border-radius); +} + +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: 0; + box-shadow: 0 1px 2px 0 rgba(0 ,0,0,0.05); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: 0; + right: 0; + top: 0; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + border-radius: 2px; + border-radius: var(--wp-g2-card-border-radius); +} + +@media (prefers-reduced-motion) { + .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + -webkit-transition: none !important; + transition: none !important; +} + +.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + box-sizing: border-box; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; + font-family: var(--wp-g2-font-family); + font-size: 13px; + font-size: var(--wp-g2-font-size); + font-weight: normal; + font-weight: var(--wp-g2-font-weight); + margin: 0; + background: transparent; + display: block; + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: 0; + box-shadow: 0 5px 10px 0 rgba(0 ,0,0,0.25); + opacity: 1; + opacity: var(--wp-g2-elevation-intensity); + left: 0; + right: 0; + top: 0; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + -webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); + border-radius: 2px; + border-radius: var(--wp-g2-card-border-radius); +} + +@media (prefers-reduced-motion) { + .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none !important; + transition: none !important; + } +} + +[data-system-ui-reduced-motion-mode="true"] .emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { + -webkit-transition: none !important; + transition: none !important; +} + +
+
+