add Recipe suffix to all recipes (#2668)

panda.config.ts

@@ -310,30 +310,30 @@ export default defineConfig({
         },
       },
       recipes: {
-        icon: iconRecipe,
-        child: childRecipe,
-        anchorButton: anchorButtonRecipe,
-        button: buttonRecipe,
-        bullet: bulletRecipe,
-        link: linkRecipe,
-        extendTap: extendTapRecipe,
-        thought: thoughtRecipe,
-        editable: editableRecipe,
-        textNote: textNoteRecipe,
-        multiline: multilineRecipe,
-        modalActionLink: modalActionLinkRecipe,
-        toolbarPointerEvents: toolbarPointerEventsRecipe,
-        tutorialBullet: tutorialBulletRecipe,
-        upperRight: upperRightRecipe,
-        dropHover: dropHoverRecipe,
-        dropEnd: dropEndRecipe,
-        invalidOption: invalidOptionRecipe,
+        iconRecipe,
+        childRecipe,
+        anchorButtonRecipe,
+        buttonRecipe,
+        bulletRecipe,
+        linkRecipe,
+        extendTapRecipe,
+        thoughtRecipe,
+        editableRecipe,
+        textNoteRecipe,
+        multilineRecipe,
+        modalActionLinkRecipe,
+        toolbarPointerEventsRecipe,
+        tutorialBulletRecipe,
+        upperRightRecipe,
+        dropHoverRecipe,
+        dropEndRecipe,
+        invalidOptionRecipe,
       },
       slotRecipes: {
-        modal: modalRecipe,
-        modalText: modalTextRecipe,
-        fadeTransition: fadeTransitionRecipe,
-        slideTransition: slideTransitionRecipe,
+        modalRecipe,
+        modalTextRecipe,
+        fadeTransitionRecipe,
+        slideTransitionRecipe,
       },
       semanticTokens: {
         colors: {

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { css, cx } from '../../styled-system/css'
-import { AnchorButtonVariantProps, anchorButton } from '../../styled-system/recipes'
+import { AnchorButtonRecipeVariantProps, anchorButtonRecipe } from '../../styled-system/recipes'
 import fastClick from '../util/fastClick'
 import Loader from './Loader'
 
@@ -25,11 +25,11 @@ const ActionButton = ({
   isDisabled,
   onClick,
   ...restProps
-}: ActionButtonProps & AnchorButtonVariantProps & React.HTMLAttributes<HTMLAnchorElement>) => {
+}: ActionButtonProps & AnchorButtonRecipeVariantProps & React.HTMLAttributes<HTMLAnchorElement>) => {
   return (
     <a
       className={cx(
-        anchorButton({
+        anchorButtonRecipe({
           inActive,
           small,
           actionButton: true,

src/components/AddIcon.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { css, cx } from '../../styled-system/css'
-import { icon } from '../../styled-system/recipes'
+import { iconRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import { SystemStyleObject } from '../../styled-system/types'
 import Index from '../@types/IndexType'
@@ -21,7 +21,7 @@ const AddIcon: FC<SearchIconProps> = ({ cssRaw, fill, size = 20, style }) => {
       x='0px'
       y='0px'
       viewBox='1 2 97 96'
-      className={cx(icon(), css(cssRaw))}
+      className={cx(iconRecipe(), css(cssRaw))}
       width={size}
       height={size}
       fill={fill || token('colors.fg')}

src/components/Alert.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { TransitionGroup } from 'react-transition-group'
 import { css, cx } from '../../styled-system/css'
-import { anchorButton } from '../../styled-system/recipes'
+import { anchorButtonRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import { alertActionCreator } from '../actions/alert'
 import { redoActionCreator as redo } from '../actions/redo'
@@ -41,7 +41,7 @@ const Alert: FC = () => {
   const buttons = undoOrRedo ? (
     <div className={css({ marginTop: '0.5em' })}>
       <a
-        className={cx(anchorButton({ small: true, isDisabled: !undoEnabled }), css({ margin: '0.25em' }))}
+        className={cx(anchorButtonRecipe({ small: true, isDisabled: !undoEnabled }), css({ margin: '0.25em' }))}
         {...fastClick(() => {
           dispatch(undo())
         })}
@@ -54,7 +54,7 @@ const Alert: FC = () => {
         Undo
       </a>
       <a
-        className={cx(anchorButton({ small: true, isDisabled: !redoEnabled }), css({ margin: '0.25em' }))}
+        className={cx(anchorButtonRecipe({ small: true, isDisabled: !redoEnabled }), css({ margin: '0.25em' }))}
         {...fastClick(() => {
           dispatch(redo())
         })}

src/components/Bullet.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { css, cva, cx } from '../../styled-system/css'
-import { bullet } from '../../styled-system/recipes'
+import { bulletRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import Path from '../@types/Path'
 import SimplePath from '../@types/SimplePath'
@@ -575,7 +575,7 @@ const Bullet = ({
       aria-label='bullet'
       data-highlighted={isHighlighted}
       className={cx(
-        bullet({ invalid }),
+        bulletRecipe({ invalid }),
         css({
           _mobile: {
             marginRight: showContexts ? '-1.5px' : undefined,

src/components/CloseButton.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
-import { upperRight } from '../../styled-system/recipes'
+import { upperRightRecipe } from '../../styled-system/recipes'
 import fastClick from '../util/fastClick'
 
 /** A close button with an ✕. */
@@ -11,7 +11,7 @@ const CloseButton = ({ onClose, disableSwipeToDismiss }: { onClose: () => void;
     <a
       {...fastClick(onClose)}
       className={cx(
-        upperRight(),
+        upperRightRecipe(),
         css({
           fontSize: 'sm',
           color: 'inherit',

src/components/ContextBreadcrumbs.tsx

@@ -3,7 +3,7 @@ import React, { createRef, useMemo } from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import { TransitionGroup } from 'react-transition-group'
 import { css } from '../../styled-system/css'
-import { extendTap } from '../../styled-system/recipes'
+import { extendTapRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import { SystemStyleObject } from '../../styled-system/types'
 import Path from '../@types/Path'
@@ -126,7 +126,7 @@ const BreadCrumb = React.memo(
           ) : (
             <Link
               cssRaw={css.raw(linkCssRaw)}
-              className={extendTap({ size: 'small' })}
+              className={extendTapRecipe({ size: 'small' })}
               simplePath={simplePath}
               label={label}
             />

src/components/DropChild.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallowEqual, useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
-import { dropEnd, dropHover } from '../../styled-system/recipes'
+import { dropEndRecipe, dropHoverRecipe } from '../../styled-system/recipes'
 import DropThoughtZone from '../@types/DropThoughtZone'
 import Path from '../@types/Path'
 import SimplePath from '../@types/SimplePath'
@@ -42,7 +42,7 @@ const DropChild = ({ depth, path, simplePath, isLastVisible }: DropChildProps) =
     <li className={css({ position: 'relative' })}>
       <span
         className={cx(
-          dropEnd(),
+          dropEndRecipe(),
           css({
             zIndex: 'dropEmpty',
             backgroundColor: testFlags.simulateDrop ? 'dropChildTarget' : undefined,
@@ -74,7 +74,7 @@ const DropChild = ({ depth, path, simplePath, isLastVisible }: DropChildProps) =
         {(testFlags.simulateDrag || isHovering) && (
           <span
             className={cx(
-              dropHover({ insideDropEnd: true, insideDivider: isDivider(value) }),
+              dropHoverRecipe({ insideDropEnd: true, insideDivider: isDivider(value) }),
               css({
                 // offset drop-end (above) and add 0.25em to slightly  exaggerate the indentation for better drop perception.
                 marginLeft: isTouch ? 'calc(-33% - 8px)' : 'calc(-2em - 10px)',

src/components/DropEnd.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
-import { dropEnd, dropHover } from '../../styled-system/recipes'
+import { dropEndRecipe, dropHoverRecipe } from '../../styled-system/recipes'
 import DropThoughtZone from '../@types/DropThoughtZone'
 import Path from '../@types/Path'
 import { isTouch } from '../browser'
@@ -95,7 +95,7 @@ const DropEnd = ({
   return (
     <li
       className={cx(
-        dropEnd(),
+        dropEndRecipe(),
         css({
           display: 'list-item',
           marginLeft: isRootPath ? '-4em' : last ? '-2em' : undefined,
@@ -129,7 +129,7 @@ const DropEnd = ({
       )}
       {(showDropHover || testFlags.simulateDrag) && (
         <span
-          className={dropHover({ insideDropEnd: true })}
+          className={dropHoverRecipe({ insideDropEnd: true })}
           style={{
             backgroundColor: dropHoverColor,
             // shift the drop-hover back into the proper place visually, even though drop-end has been shifted right for touch

src/components/DropHover.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
-import { dropHover } from '../../styled-system/recipes'
+import { dropHoverRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import DropThoughtZone from '../@types/DropThoughtZone'
 import SimplePath from '../@types/SimplePath'
@@ -39,7 +39,7 @@ const DropHover = ({ simplePath }: { simplePath: SimplePath }) => {
   return (
     <span
       className={cx(
-        dropHover({ insideDivider }),
+        dropHoverRecipe({ insideDivider }),
         css({
           /* only add a margin on the Thought drop hover since Subthought drop hover does not need to offset the bullet */
           /* Equivalent to -1.2em @ Font Size 18, but scales across Font Sizes 13–24. */

src/components/DropUncle.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
-import { dropEnd, dropHover } from '../../styled-system/recipes'
+import { dropEndRecipe, dropHoverRecipe } from '../../styled-system/recipes'
 import DropThoughtZone from '../@types/DropThoughtZone'
 import Path from '../@types/Path'
 import SimplePath from '../@types/SimplePath'
@@ -42,7 +42,7 @@ const DropUncle = ({
   return (
     <span
       className={cx(
-        dropEnd(),
+        dropEndRecipe(),
         css({
           backgroundColor: testFlags.simulateDrop ? 'eggplant' : undefined,
           opacity: 0.9,
@@ -67,7 +67,7 @@ const DropUncle = ({
         </span>
       )}
       {(testFlags.simulateDrag || isHovering) && (
-        <span className={dropHover({ insideDropEnd: true })} style={{ backgroundColor: dropHoverColor }} />
+        <span className={dropHoverRecipe({ insideDropEnd: true })} style={{ backgroundColor: dropHoverColor }} />
       )}
     </span>
   )

src/components/Editable.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash'
 import React, { FocusEventHandler, useCallback, useEffect, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { cx } from '../../styled-system/css'
-import { editable, invalidOption, multiline as multilineRecipe } from '../../styled-system/recipes'
+import { editableRecipe, invalidOptionRecipe, multilineRecipe } from '../../styled-system/recipes'
 import Path from '../@types/Path'
 import SimplePath from '../@types/SimplePath'
 import TutorialChoice from '../@types/TutorialChoice'
@@ -166,7 +166,7 @@ const Editable = ({
 
   /** Toggle invalid-option class using contentRef. */
   const setContentInvalidState = (value: boolean) =>
-    contentRef.current && contentRef.current.classList[value ? 'add' : 'remove'](invalidOption())
+    contentRef.current && contentRef.current.classList[value ? 'add' : 'remove'](invalidOptionRecipe())
 
   // side effect to set old value ref to head value from updated simplePath. Also update editing value, if it is different from current value.
   useEffect(
@@ -590,7 +590,7 @@ const Editable = ({
       data-editable
       className={cx(
         multiline ? multilineRecipe() : null,
-        editable({
+        editableRecipe({
           preventAutoscroll: true,
         }),
         className,

src/components/EmptyThoughtspace.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { css } from '../../styled-system/css'
-import { textNote } from '../../styled-system/recipes'
+import { textNoteRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import GesturePath from '../@types/GesturePath'
 import { isTouch } from '../browser'
@@ -46,7 +46,7 @@ const EmptyThoughtspace = ({ isTutorial }: { isTutorial?: boolean }) => {
         isTutorial ? (
           tutorialStep !== TUTORIAL_STEP_FIRSTTHOUGHT || !isTouch ? (
             <div className={css({ textAlign: 'center', marginLeft: '-30px' })}>
-              <i className={textNote()}>Ahhh. Open space. Unlimited possibilities.</i>
+              <i className={textNoteRecipe()}>Ahhh. Open space. Unlimited possibilities.</i>
             </div>
           ) : // hide on mobile during TUTORIAL_STEP_FIRSTTHOUGHT since the gesture diagram is displayed
           null

src/components/ErrorBoundaryContainer.tsx

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { css, cx } from '../../styled-system/css'
-import { anchorButton, invalidOption } from '../../styled-system/recipes'
+import { anchorButtonRecipe, invalidOptionRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import fastClick from '../util/fastClick'
 
@@ -43,7 +43,7 @@ const ErrorFallback = ({ error, componentStack }: { error?: Error; componentStac
   <div className={css({ margin: 50 })}>
     <p>Oops, there was an error.</p>
     <div className={css({ fontSize: 14 })}>
-      {error && <pre className={invalidOption()}>{error.message || 'Error'}</pre>}
+      {error && <pre className={invalidOptionRecipe()}>{error.message || 'Error'}</pre>}
       {error && (
         <div>
           <Toggle title='Details:'>
@@ -52,7 +52,7 @@ const ErrorFallback = ({ error, componentStack }: { error?: Error; componentStac
         </div>
       )}
       <pre className={css({ whiteSpace: 'normal' })}>{componentStack}</pre>
-      <a {...fastClick(() => window.location.reload())} className={cx(anchorButton(), css({ minWidth: 0 }))}>
+      <a {...fastClick(() => window.location.reload())} className={cx(anchorButtonRecipe(), css({ minWidth: 0 }))}>
         Refresh
       </a>
     </div>

src/components/FadeTransition.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import { CSSTransition } from 'react-transition-group'
 import { TransitionProps } from 'react-transition-group/Transition'
-import { FadeTransitionVariant, fadeTransition } from '../../styled-system/recipes'
+import { FadeTransitionRecipeVariant, fadeTransitionRecipe } from '../../styled-system/recipes'
 import durations from '../util/durations'
 
 type RemoveFields<Type> = {
@@ -18,10 +18,10 @@ const FadeTransition = ({
   ...props
 }: {
   id?: string | number
-  duration: FadeTransitionVariant['duration']
+  duration: FadeTransitionRecipeVariant['duration']
   children: ReactNode
 } & RemoveFields<TransitionProps<HTMLElement>>) => {
-  const fadeClasses = fadeTransition({ duration })
+  const fadeClasses = fadeTransitionRecipe({ duration })
   return (
     <CSSTransition key={id} classNames={fadeClasses} timeout={durations.get(duration)} {...props}>
       {children}

src/components/Favorites.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash'
 import { useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { css, cx } from '../../styled-system/css'
-import { dropHover } from '../../styled-system/recipes'
+import { dropHoverRecipe } from '../../styled-system/recipes'
 import { token } from '../../styled-system/tokens'
 import DragThoughtZone from '../@types/DragThoughtZone'
 import SimplePath from '../@types/SimplePath'
@@ -48,7 +48,7 @@ const DragAndDropFavorite = ({
       {!disableDragAndDrop && isHovering && (
         <span
           className={cx(
-            dropHover(),
+            dropHoverRecipe(),
             css({
               backgroundColor: 'highlight',
               marginLeft: 0,
@@ -85,7 +85,7 @@ const DropEnd = ({ disableDragAndDrop }: { disableDragAndDrop?: boolean }) => {
     <div className={css({ height: '4em' })} ref={dropTarget}>
       <span
         className={cx(
-          dropHover(),
+          dropHoverRecipe(),
           css({
             marginLeft: 0,
             marginTop: 0,