Merge pull request #2612 from yangchristina/theme-tests

panda.config.ts

@@ -118,16 +118,10 @@ const keyframes = defineKeyframes({
       width: '1.25em',
     },
   },
-  toblack: {
+  tofg: {
     to: {
-      color: 'black',
-      fill: 'black',
-    },
-  },
-  towhite: {
-    to: {
-      color: 'white',
-      fill: 'white',
+      color: 'fg',
+      fill: 'fg',
     },
   },
   bobble: {

src/colors.config.ts

@@ -31,6 +31,7 @@ const colors = {
     yellow: 'rgba(255, 208, 20, 1)', // #ffd014
     inputBorder: 'rgba(153, 153, 153, 1)', // #999, also used in navBar
     breadcrumbs: 'rgba(153, 153, 153, 1)',
+    activeBreadCrumb: 'rgba(144, 144, 144, 1)', // #909090
     link: 'rgba(135, 206, 235, 1)', // #87ceeb
     dim: 'rgba(255, 255, 255, 0.5)',
     dimInverse: 'rgba(7, 7, 7, 0.5)',
@@ -54,13 +55,12 @@ const colors = {
     quickDropBg: 'rgba(30,30,30,0.8)',
     bulletGray: 'rgba(102, 102, 102, 1)', // #666
     midPink: 'rgba(255, 123, 195, 1)', // #ff7bc3
-    purpleEggplant: '#32305f',
+    dropChildTarget: '#32305f', // purple-eggplant
     commandSelected: 'rgba(33, 33, 33, 1)', // #212121
     eggplant: 'rgba(82, 48, 95, 1)',
     checkboxForm: 'rgba(62, 62, 62, 1)', // #3e3e3e
     error: 'rgba(204, 34, 51, 1)',
-    activeBreadCrumb: 'rgba(144, 144, 144, 1)', // #909090
-    pinkRed: 'rgba(233, 12, 89, 1)',
+    pinkAgainstFg: 'rgba(233, 12, 89, 1)',
     brightBlue: 'rgba(70, 223, 240, 1)', // #46dff0
     exportTextareaColor: 'rgba(170, 170, 170, 1)', // #aaa, also used in anchorButton
   },
@@ -91,11 +91,12 @@ const colors = {
     pink: 'rgba(238, 130, 238, 1)', // #ee82ee
     purple: 'rgba(170, 128, 255, 1)', // #aa80ff
     red: 'rgba(255, 87, 61, 1)', // #ff573d
-    white: 'rgba(255, 255, 255, 1)',
     vividHighlight: '#63c9ea',
+    white: 'rgba(255, 255, 255, 1)',
     yellow: 'rgba(255, 208, 20, 1)', // #ffd014
     inputBorder: 'rgba(238, 238, 238, 1)', // #eeeeee
     breadcrumbs: 'rgba(102, 102, 102, 1)',
+    activeBreadCrumb: 'rgba(111, 111, 111, 1)', // #909090
     link: 'rgba(27, 111, 154, 1)', // #1b6f9a
     dim: 'rgba(7, 7, 7, 0.5)',
     dimInverse: 'rgba(255, 255, 255, 0.5)',
@@ -119,13 +120,12 @@ const colors = {
     quickDropBg: 'rgba(225, 225, 225, 0.8)',
     bulletGray: 'rgba(153, 153, 153, 1)', // #999999
     midPink: 'rgba(255, 123, 195, 1)',
-    purpleEggplant: '#32305f',
+    dropChildTarget: '#a4a2cd',
     commandSelected: 'rgba(222, 222, 222, 1)',
     eggplant: 'rgb(85, 51, 98)',
     checkboxForm: 'rgba(193, 193, 193, 1)',
     error: 'rgba(204, 34, 51, 1)',
-    activeBreadCrumb: 'rgba(144, 144, 144, 1)', // #909090
-    pinkRed: 'rgba(233, 12, 89, 1)',
+    pinkAgainstFg: 'rgba(227, 179, 196, 1)',
     brightBlue: 'rgba(70, 223, 240, 1)', // #46dff0
     exportTextareaColor: 'rgba(85, 85, 85, 1)',
   },

src/components/AppComponent.tsx

@@ -221,7 +221,7 @@ const AppComponent: FC = () => {
                   backgroundClip: 'padding-box',
                   userSelect: 'none',
                   '&:hover': {
-                    transition: 'all 0.2s ease-out',
+                    transition: 'all {durations.fast} ease-out',
                   },
                   '&.horizontal': {
                     height: '11px',

src/components/Bullet.tsx

@@ -205,7 +205,7 @@ const glyph = cva({
 
 const glyphFg = cva({
   base: {
-    transition: `transform {durations.veryFastDuration} ease-out, fill-opacity {durations.mediumDuration} ease-out`,
+    transition: `transform {durations.veryFast} ease-out, fill-opacity {durations.medium} ease-out`,
   },
   variants: {
     gray: {
@@ -218,10 +218,7 @@ const glyphFg = cva({
       true: {
         color: 'bulletGray',
         fill: 'bulletGray',
-        '-webkit-animation': {
-          base: 'toblack 400ms infinite alternate ease-in-out',
-          _dark: 'towhite 400ms infinite alternate ease-in-out',
-        },
+        '-webkit-animation': 'tofg 400ms infinite alternate ease-in-out',
       },
     },
     triangle: {
@@ -585,7 +582,7 @@ const Bullet = ({
           },
           '@media (min-width: 560px) and (max-width: 1024px)': {
             _android: {
-              transition: `transform {durations.veryFastDuration} ease-in-out`,
+              transition: `transform {durations.veryFast} ease-in-out`,
               marginLeft: '-3px',
             },
           },

src/components/ColorPicker.tsx

@@ -91,7 +91,8 @@ const ColorSwatch: FC<{
     e.stopPropagation()
     e.preventDefault()
 
-    dispatch(formatSelection('foreColor', color || 'bg'))
+    dispatch(formatSelection('foreColor', color || (backgroundColor && backgroundColor !== 'fg' ? 'black' : 'bg')))
+
     // Apply background color to the selection
     if (backgroundColor && backgroundColor !== 'bg') {
       dispatch(formatSelection('backColor', backgroundColor))

src/components/DropChild.tsx

@@ -45,7 +45,7 @@ const DropChild = ({ depth, path, simplePath, isLastVisible }: DropChildProps) =
           dropEnd(),
           css({
             zIndex: 'dropEmpty',
-            backgroundColor: testFlags.simulateDrop ? 'purpleEggplant' : undefined,
+            backgroundColor: testFlags.simulateDrop ? 'dropChildTarget' : undefined,
             // shift the drop target to the right
             marginLeft: isTouch ? '33%' : 'calc(2.9em - 2px)',
             opacity: 0.9,

src/components/DropDownMenu.tsx

@@ -44,7 +44,7 @@ const DropDownMenu = React.forwardRef<HTMLDivElement, DropDownMenuProps>(
               cursor: 'pointer',
               padding: '2px 0px',
               borderTop: '1px solid {colors.modalExportUnused}',
-              transition: 'opacity {durations.fastDuration} ease-in',
+              transition: 'opacity {durations.fast} ease-in',
             })}
             // composite key is unique
             key={`${option.type}-${option.label}`}

src/components/DropHover.tsx

@@ -51,7 +51,7 @@ const DropHover = ({ simplePath }: { simplePath: SimplePath }) => {
           },
           display: 'inline',
           width: isTableCol1 ? '50vw' : undefined,
-          animation: animateHover ? `pulseLight {durations.mediumPulseDuration} linear infinite alternate` : undefined,
+          animation: animateHover ? `pulseLight {durations.mediumPulse} linear infinite alternate` : undefined,
         }),
       )}
       style={{ backgroundColor: animateHover ? token('colors.highlight2') : dropHoverColor }}

src/components/EmptyThoughtspace.tsx

@@ -33,7 +33,7 @@ const EmptyThoughtspace = ({ isTutorial }: { isTutorial?: boolean }) => {
   return (
     <div
       aria-label='empty-thoughtspace'
-      className={css({ animation: '{durations.mediumDuration} ease-out 0s normal forwards fadein' })}
+      className={css({ animation: '{durations.medium} ease-out 0s normal forwards fadein' })}
     >
       {
         // show nothing during the preconnecting phase (See: useOfflineStatus)

src/components/ErrorBoundaryContainer.tsx

@@ -26,7 +26,7 @@ const Toggle = ({ children, title }: { children?: any; expand?: boolean; title?:
               className={css({
                 transform: expanded ? 'rotate(90deg) translateX(10px)' : '',
                 transformOrigin: 'center center',
-                transition: `transform {durations.veryFastDuration} ease-out`,
+                transition: `transform {durations.veryFast} ease-out`,
               })}
             />
           </g>

src/components/FadeTransition.tsx

@@ -23,7 +23,7 @@ const FadeTransition = ({
 } & RemoveFields<TransitionProps<HTMLElement>>) => {
   const fadeClasses = fadeTransition({ duration })
   return (
-    <CSSTransition key={id} classNames={fadeClasses} timeout={durations.get(`${duration}Duration`)} {...props}>
+    <CSSTransition key={id} classNames={fadeClasses} timeout={durations.get(duration)} {...props}>
       {children}
     </CSSTransition>
   )

src/components/Favorites.tsx

@@ -128,7 +128,7 @@ const FavoritesOptions = ({
             className={css({
               display: 'inline-block',
               transform: showOptions ? `rotate(90deg)` : `rotate(0deg)`,
-              transition: `transform {durations.veryFastDuration} ease-out`,
+              transition: `transform {durations.veryFast} ease-out`,
               // avoid position:absolute to trivially achieve correct vertical alignment with text
               marginLeft: '-1em',
             })}
@@ -140,7 +140,7 @@ const FavoritesOptions = ({
       </div>
 
       <div className={css({ overflow: 'hidden' })}>
-        <SlideTransition duration='veryFastDuration' in={showOptions} nodeRef={formRef} from='down' unmountOnExit>
+        <SlideTransition duration='veryFast' in={showOptions} nodeRef={formRef} from='down' unmountOnExit>
           <form
             ref={formRef}
             className={css({ fontSize: 'sm', backgroundColor: 'checkboxForm', borderRadius: '0.5em', padding: '1em' })}

src/components/HoverArrow.tsx

@@ -16,7 +16,7 @@ const HoverArrow = ({
     hoverArrowVisibility && (
       <div
         className={css({
-          animation: `bobble {durations.verySlowPulseDuration} infinite`,
+          animation: `bobble {durations.verySlowPulse} infinite`,
           borderBottom: '20px solid {colors.highlight2}',
           borderLeft: '10px solid {colors.transparent}',
           borderRight: '10px solid {colors.transparent}',

src/components/LayoutTree.tsx

@@ -441,7 +441,7 @@ const TreeNode = ({
       // It should not be based on editable values such as Path, value, rank, etc, otherwise moving the thought would make it appear to be a completely new thought to React.
       className={css({
         position: 'absolute',
-        transition: `left {durations.layoutNodeAnimationDuration} ease-out,top {durations.layoutNodeAnimationDuration} ease-out`,
+        transition: `left {durations.layoutNodeAnimation} ease-out,top {durations.layoutNodeAnimation} ease-out`,
       })}
       style={{
         // Cannot use transform because it creates a new stacking context, which causes later siblings' DropChild to be covered by previous siblings'.
@@ -507,7 +507,7 @@ const TreeNode = ({
                 className={css({
                   position: 'relative',
                   top: '-0.2em',
-                  transition: `left {durations.fastDuration} ease-out`,
+                  transition: `left {durations.fast} ease-out`,
                   zIndex: 'subthoughtsDropEnd',
                 })}
                 style={{
@@ -895,7 +895,7 @@ const LayoutTree = () => {
         hoverArrowVisibility={hoverArrowVisibility}
       />
       <div
-        className={css({ transition: `transform {durations.layoutSlowShiftDuration} ease-out` })}
+        className={css({ transition: `transform {durations.layoutSlowShift} ease-out` })}
         style={{
           // Set a container height that fits all thoughts.
           // Otherwise scrolling down quickly will bottom out as virtualized thoughts are re-rendered and the document height is built back up.

src/components/Loader.tsx

@@ -37,7 +37,7 @@ const Loader = ({ size = 32, style, cssRaw }: LoaderProps) => {
           transformOrigin: '0 0',
         })}
       >
-        <div className={css(rippleLoaderChild, { borderColor: 'pinkRed', animationDelay: '0s' })}></div>
+        <div className={css(rippleLoaderChild, { borderColor: 'pinkAgainstFg', animationDelay: '0s' })}></div>
         <div className={css(rippleLoaderChild, { borderColor: 'brightBlue', animationDelay: '-0.5s' })}></div>
       </div>
     </div>

src/components/NewThought.tsx

@@ -74,7 +74,7 @@ const NewThought = ({ path, showContexts, label, value = '', type = 'bullet' }:
   }, [dispatch, distance, path, value])
 
   return show ? (
-    <ul className={css({ transition: `all {durations.slowDuration} ease-out`, marginTop: 0 })}>
+    <ul className={css({ transition: `all {durations.slow} ease-out`, marginTop: 0 })}>
       <li className={child()}>
         {type === 'bullet' ? <span className={bullet()} /> : null}
         <div className={thought()}>

src/components/QuickAddButton.tsx

@@ -17,7 +17,7 @@ const QuickAddButton: React.FC = () => {
     <div
       className={css({
         display: 'inline-flex',
-        transition: 'transform {durations.fastDuration} ease-in-out',
+        transition: 'transform {durations.fast} ease-in-out',
         rotate: isAbsolute(rootContext) ? 'rotate(135deg)' : undefined,
       })}
       {...fastClick(() => dispatch(toggleAbsoluteContext()))}

src/components/QuickDropPanel.tsx

@@ -14,7 +14,7 @@ const QuickDropPanel = () => {
   const quickDropPanelRef = useRef<HTMLDivElement>(null)
 
   return (
-    <SlideTransition duration='fastDuration' nodeRef={quickDropPanelRef} in={isDragging} from='right' unmountOnExit>
+    <SlideTransition duration='fast' nodeRef={quickDropPanelRef} in={isDragging} from='right' unmountOnExit>
       <div
         ref={quickDropPanelRef}
         className={css({ position: 'fixed', right: 0, top: '20vh', zIndex: 'popup' })}

src/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import { dragHoldActionCreator as dragHold } from '../actions/dragHold'
 import { dragInProgressActionCreator as dragInProgress } from '../actions/dragInProgress'
 import { toggleSidebarActionCreator } from '../actions/toggleSidebar'
 import { isTouch } from '../browser'
+import durations from '../util/durations'
 import fastClick from '../util/fastClick'
 import FadeTransition from './FadeTransition'
 import Favorites from './Favorites'
@@ -35,6 +36,7 @@ const SidebarLink = ({
   return (
     <a
       {...fastClick(() => setSection(section))}
+      data-testid={`sidebar-${section}`}
       className={css({
         color: active ? 'fg' : 'gray50',
         display: 'inline-block',
@@ -86,6 +88,7 @@ const Sidebar = () => {
       }}
       disableSwipeToOpen={!isTouch}
       ref={containerRef}
+      transitionDuration={durations.get('fast')}
       SwipeAreaProps={{
         style: {
           // Set width here since setting style with SwipeAreaProps will override the swipeAreaWidth prop.

src/components/Subthought.tsx

@@ -126,8 +126,8 @@ const Subthought = ({
           // opacity creates a new stacking context, so it must only be applied to Thought, not to the outer VirtualThought which contains DropChild. Otherwise subsequent DropChild will be obscured.
           opacity: thought.value === '' ? opacity : '0',
           transition: autofocusChanged
-            ? `opacity {durations.layoutSlowShiftDuration} ease-out`
-            : `opacity {durations.layoutNodeAnimationDuration} ease-in`,
+            ? `opacity {durations.layoutSlowShift} ease-out`
+            : `opacity {durations.layoutNodeAnimation} ease-in`,
           pointerEvents: !isVisible ? 'none' : undefined,
           // Safari has a known issue with subpixel calculations, especially during animations and with SVGs.
           // This caused the thought to jerk slightly to the left at the end of the horizontal shift animation.

src/components/Thought.tsx

@@ -276,7 +276,7 @@ const ThoughtContainer = ({
     ...(isChildHovering
       ? {
           WebkitTextStrokeWidth: '0.05em',
-          animation: `pulseLight {durations.slowPulseDuration} linear infinite alternate`,
+          animation: `pulseLight {durations.slowPulse} linear infinite alternate`,
           color: 'highlight',
         }
       : null),
@@ -366,7 +366,7 @@ const ThoughtContainer = ({
       data-editing={isEditing}
       onClick={isTouch ? undefined : handleMultiselect}
       style={{
-        transition: `transform ${token('durations.layoutSlowShiftDuration')} ease-out, opacity ${token('durations.layoutSlowShiftDuration')} ease-out`,
+        transition: `transform ${token('durations.layoutSlowShift')} ease-out, opacity ${token('durations.layoutSlowShift')} ease-out`,
         ...style,
         ...styleContainer,
         // extend the click area to the left (except if table column 2)

src/components/Tips/Tip.tsx

@@ -19,7 +19,7 @@ const Tip: FC<
         // disable pointer revents when hidden, otherwise it will block clicks on the NavBar
         pointerEvents: display ? 'auto' : 'none',
         transform: display ? 'translateY(0)' : 'translateY(100%)',
-        transition: `transform {durations.fastDuration} ease-in-out, opacity {durations.fastDuration} ease-in-out`,
+        transition: `transform {durations.fast} ease-in-out, opacity {durations.fast} ease-in-out`,
         opacity: display ? '1' : '0',
         zIndex: 'popup',
       })}

src/components/ToolbarButton.tsx

@@ -200,7 +200,7 @@ const ToolbarButton: FC<ToolbarButtonProps> = ({
           position: 'relative',
           cursor: isButtonExecutable ? 'pointer' : 'default',
           transition:
-            'transform {durations.veryFastDuration} ease-out, max-width {durations.veryFastDuration} ease-out, margin-left {durations.veryFastDuration} ease-out',
+            'transform {durations.veryFast} ease-out, max-width {durations.veryFast} ease-out, margin-left {durations.veryFast} ease-out',
           // extend drop area down, otherwise the drop hover is blocked by the user's finger
           // must match toolbar marginBottom
           paddingBottom: isDraggingAny ? '7em' : 0,
@@ -255,7 +255,7 @@ const ToolbarButton: FC<ToolbarButtonProps> = ({
           position: 'relative' as const,
           cursor: isButtonExecutable ? 'pointer' : 'default',
           opacity: dropToRemove ? 0 : 1,
-          transition: 'opacity {durations.fastDuration} ease-out',
+          transition: 'opacity {durations.fast} ease-out',
         })}
         style={style}
         animated={isAnimated}

src/components/TraceGesture.tsx

@@ -110,9 +110,7 @@ const TraceGesture = ({ eventNodeRef }: TraceGestureProps) => {
         // Fade in quickly. A custom easing function is used to simulate a slight delay at the beginning. This effectively hides very quickly entered gestures like forward/backward.
         // Fade out slowly.
         transition:
-          show && !cancelled
-            ? 'opacity {durations.fastDuration} {easings.easeInSlow}'
-            : 'opacity {durations.mediumDuration} ease-out',
+          show && !cancelled ? 'opacity {durations.fast} {easings.easeInSlow}' : 'opacity {durations.medium} ease-out',
         pointerEvents: eventNodeRef ? 'none' : undefined,
       })}
       style={{ height: innerHeight }}

src/components/Tutorial/TutorialNavigation.tsx

@@ -58,7 +58,7 @@ const TutorialNavigation = ({
                   fontSize: '32px',
                   marginLeft: '1px',
                   marginRight: '1px',
-                  transition: `all {durations.tutorialStepNavigationDuration} ease-in-out`,
+                  transition: `all {durations.medium} ease-in-out`,
                   opacity: step === Math.floor(tutorialStep) ? 1 : 0.25,
                 })}
                 key={step}

src/components/Tutorial/TutorialScrollUpButton.tsx

@@ -34,7 +34,7 @@ const TutorialScrollUpButton: FC<{ show: boolean }> = ({ show }) => {
           width: '100%',
           // for some reason without the additional height the button gets cropped
           paddingBottom: `${BUTTON_HEIGHT}em`,
-          transition: `opacity {durations.fastDuration} ease-in-out, transform {durations.fastDuration} ease-in-out`,
+          transition: `opacity {durations.fast} ease-in-out, transform {durations.fast} ease-in-out`,
           display: 'flex',
           justifyContent: 'center',
         })}

src/components/Tutorial/index.tsx

@@ -42,7 +42,7 @@ const WithCSSTransition = ({ component, transitionKey }: { component: FC; transi
 
   const Component = component
   return (
-    <SlideTransition duration='fastDuration' nodeRef={nodeRef} in={true} id={transitionKey} from='screenRight'>
+    <SlideTransition duration='fast' nodeRef={nodeRef} in={true} id={transitionKey} from='screenRight'>
       <div ref={nodeRef}>
         <Component />
       </div>

src/components/modals/Export.tsx

@@ -656,7 +656,7 @@ const ModalExport: FC<{ simplePaths: SimplePath[] }> = ({ simplePaths }) => {
                 userSelect: 'none',
                 display: 'flex',
                 position: 'relative',
-                transition: `opacity {durations.veryFastDuration} ease-in-out`,
+                transition: `opacity {durations.veryFast} ease-in-out`,
                 color: 'fg',
                 opacity: advancedSettings ? 1 : 0.5,
               }),