Lottie icons 2408 (Milestone 3)

src/@types/AnimatedIconType.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react'
 import IconType from './IconType'
+import LottieData from './lottie/LottieData'
 
 interface AnimatedIconType extends IconType {
-  animationData?: object
+  animationData?: LottieData | null
   children?: ReactNode
 }
 

src/@types/lottie/AnimationKeyframe.ts

@@ -0,0 +1,13 @@
+/**
+ * AnimationKeyframe Interface.
+ *
+ * Defines the structure for keyframes in animations, including optional tangents.
+ */
+interface AnimationKeyframe {
+  i?: { x: number[]; y: number[] } // In tangents
+  o?: { x: number[]; y: number[] } // Out tangents
+  t: number // Time
+  s: number[] // Values
+}
+
+export default AnimationKeyframe

src/@types/lottie/ColorProperty.ts

@@ -0,0 +1,15 @@
+import AnimationKeyframe from './AnimationKeyframe'
+import RGBA from './RGBA'
+
+/**
+ * ColorProperty Interface.
+ *
+ * Defines color properties for shape items, allowing static colors,
+ * animated colors, and keyframe animations.
+ */
+interface ColorProperty {
+  a: number
+  k: RGBA | RGBA[] | number[] | AnimationKeyframe[]
+}
+
+export default ColorProperty

src/@types/lottie/KeyframeShape.ts

@@ -0,0 +1,16 @@
+/**
+ * KeyframeShape Interface.
+ *
+ * Defines keyframe data for shapes, including in/out tangents and values.
+ */
+interface KeyframeShape {
+  a: number
+  k: {
+    i: number[][]
+    o: number[][]
+    v: number[][]
+    c: boolean
+  }
+}
+
+export default KeyframeShape

src/@types/lottie/LottieData.ts

@@ -0,0 +1,12 @@
+import ShapeLayer from './ShapeLayer'
+
+/**
+ * LottieData Interface.
+ *
+ * The main interface for Lottie data, comprising multiple layers.
+ */
+interface LottieData {
+  layers: ShapeLayer[] // Main layers array, which may contain various types
+}
+
+export default LottieData

src/@types/lottie/NestedShape.ts

@@ -0,0 +1,17 @@
+import KeyframeShape from './KeyframeShape'
+
+/**
+ * NestedShape Interface.
+ *
+ * Represents a nested shape within a shape group, allowing for hierarchical structures.
+ */
+interface NestedShape {
+  ind?: number
+  ty: string
+  ix?: number
+  ks?: KeyframeShape
+  nm?: string
+  [key: string]: unknown // Permit additional properties
+}
+
+export default NestedShape

src/@types/lottie/RGBA.ts

@@ -0,0 +1,7 @@
+/**
+ * RGBA Color Representation.
+ *
+ * Represents a color using Red, Green, Blue, and Alpha (transparency) channels.
+ */
+type RGBA = [number, number, number, number]
+export default RGBA

src/@types/lottie/ShapeItem.ts

@@ -0,0 +1,20 @@
+import ColorProperty from './ColorProperty'
+import KeyframeShape from './KeyframeShape'
+import NestedShape from './NestedShape'
+
+/**
+ * ShapeItem Interface.
+ *
+ * Represents a single shape item in a Lottie animation, which can have colors, nested shapes,
+ * keyframe animations, and additional properties.
+ */
+interface ShapeItem {
+  ty: string
+  c?: ColorProperty
+  it?: ShapeItem[] | NestedShape[] // Allow additional shape structures
+  ks?: KeyframeShape // Optional keyframe data
+  nm?: string
+  [key: string]: unknown // Permit extra properties
+}
+
+export default ShapeItem

src/@types/lottie/ShapeLayer.ts

@@ -0,0 +1,15 @@
+import NestedShape from './NestedShape'
+import ShapeItem from './ShapeItem'
+
+/**
+ * ShapeLayer Interface.
+ *
+ * Represents a layer that can contain multiple shapes and other properties for Lottie animations.
+ */
+interface ShapeLayer {
+  ty: number
+  shapes?: (ShapeItem | NestedShape)[] // Combine both types for flexibility
+  [key: string]: unknown // Allow for any additional properties
+}
+
+export default ShapeLayer

src/components/Alert.tsx

@@ -27,6 +27,8 @@ const Alert: FC = () => {
   const value = strip(alertStoreValue ?? alert?.value ?? '')
   const undoEnabled = useSelector(isUndoEnabled)
   const redoEnabled = useSelector(state => state.redoPatches.length > 0)
+  const fontSize = useSelector(state => state.fontSize)
+  const iconSize = 0.78 * fontSize
 
   /** Dismiss the alert on close. */
   const onClose = useCallback(() => {
@@ -45,7 +47,7 @@ const Alert: FC = () => {
         })}
       >
         <UndoIcon
-          size={14}
+          size={iconSize}
           fill={token('colors.bg')}
           cssRaw={css.raw({ position: 'relative', top: '0.25em', right: '0.25em' })}
         />
@@ -59,7 +61,7 @@ const Alert: FC = () => {
       >
         Redo
         <RedoIcon
-          size={14}
+          size={iconSize}
           fill={token('colors.bg')}
           cssRaw={css.raw({ position: 'relative', top: '0.25em', left: '0.25em' })}
         />

src/components/SearchIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './icons/AnimatedIcon'
 import animationData from './icons/animations/12-search.json'
 
 /** Search Icon with Conditional Lottie Animation. */
-const SearchIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const SearchIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/Toolbar.tsx

@@ -38,7 +38,7 @@ const arrow = cva({
   base: {
     position: 'absolute',
     fontSize: '80%',
-    paddingTop: '16px',
+    paddingTop: '15px',
     verticalAlign: 'middle',
     color: 'gray66',
     backgroundColor: 'bg',
@@ -77,6 +77,9 @@ const arrow = cva({
   ],
 })
 
+/** Calculates the top padding for vertically centering toolbar arrows. */
+const calculatePaddingTop = (fontSize: number) => Math.floor(0.3 * fontSize + 11.6)
+
 /** Toolbar component. */
 const Toolbar: FC<ToolbarProps> = ({ customize, onSelect, selected }) => {
   const dispatch = useDispatch()
@@ -230,6 +233,7 @@ const Toolbar: FC<ToolbarProps> = ({ customize, onSelect, selected }) => {
         <div>
           <span
             id='left-arrow'
+            style={{ paddingTop: `${calculatePaddingTop(fontSize)}px` }}
             className={arrow({ direction: 'left', isHidden: !leftArrowIsShown, fixed: !customize })}
           >
             <TriangleLeft width={arrowWidth} height={fontSize} fill={token('colors.gray50')} />
@@ -275,6 +279,7 @@ const Toolbar: FC<ToolbarProps> = ({ customize, onSelect, selected }) => {
 
           <span
             id='right-arrow'
+            style={{ paddingTop: `${calculatePaddingTop(fontSize)}px` }}
             className={arrow({ direction: 'right', isHidden: !rightArrowIsShown, fixed: !customize })}
           >
             <TriangleRight width={arrowWidth} height={fontSize} fill={token('colors.gray50')} />

src/components/ToolbarButton.tsx

@@ -177,7 +177,7 @@ const ToolbarButton: FC<ToolbarButtonProps> = ({
         toolbarPointerEvents({ override: true }),
         css({
           display: 'inline-block',
-          padding: '15px 8px 5px 8px',
+          padding: '14px 8px 5px 8px',
           borderRadius: '3px',
           zIndex: 'stack',
           // animate maxWidth to avoid having to know the exact width of the toolbar icon

src/components/TriangleLeft.tsx

@@ -1,9 +1,9 @@
 import { css } from '../../styled-system/css'
 import { token } from '../../styled-system/tokens'
-import Icon from '../@types/IconType'
+import IconType from '../@types/IconType'
 
 /** A left-facing svg triangle. */
-const TriangleLeft = ({ fill = token('colors.bg'), size = 20, width, height, style, cssRaw }: Icon) => (
+const TriangleLeft = ({ fill = token('colors.bg'), size = 20, width, height, style, cssRaw }: IconType) => (
   <svg
     xmlns=''
     version='1.1'

src/components/TriangleRight.tsx

@@ -1,9 +1,9 @@
 import { css } from '../../styled-system/css'
 import { token } from '../../styled-system/tokens'
-import Icon from '../@types/IconType'
+import IconType from '../@types/IconType'
 
 /** A right-facing triangle component. */
-const TriangleRight = ({ fill = token('colors.bg'), size = 20, width, height, style, cssRaw }: Icon) => (
+const TriangleRight = ({ fill = token('colors.bg'), size = 20, width, height, style, cssRaw }: IconType) => (
   <svg
     xmlns=''
     version='1.1'

src/components/icons/AnimatedIcon.tsx

@@ -1,8 +1,12 @@
+import { rgbToHex } from '@mui/material'
+import { useRef } from 'react'
+import { useSelector } from 'react-redux'
 import { css, cx } from '../../../styled-system/css'
 import { icon } from '../../../styled-system/recipes'
 import { token } from '../../../styled-system/tokens'
 import AnimatedIconType from '../../@types/AnimatedIconType'
 import { ICON_SCALING_FACTOR } from '../../constants'
+import theme from '../../selectors/theme'
 import LottieAnimation from './LottieAnimation'
 
 /** Animated Icon with Conditional Lottie Animation. */
@@ -16,11 +20,21 @@ const AnimatedIcon = ({
   children,
   animationComplete,
 }: AnimatedIconType) => {
+  const isLightTheme = useSelector(state => theme(state) === 'Light')
+  const lottieColor = isLightTheme ? '#000000' : '#FFFFFF'
   const newSize = size * ICON_SCALING_FACTOR
   const color = style.fill || fill || token('colors.fg')
 
+  // Create a ref to the parent div
+  const divRef = useRef<HTMLDivElement | null>(null)
+
+  // Calculate dynamic color directly
+  const computedStyle = divRef.current ? window.getComputedStyle(divRef.current) : null
+  const dynamicColor = computedStyle?.color ? rgbToHex(computedStyle.color) : lottieColor
+
   return (
     <div
+      ref={divRef}
       className={cx(icon(), css(cssRaw))}
       style={{
         ...style,
@@ -30,7 +44,11 @@ const AnimatedIcon = ({
         display: 'inline-flex',
       }}
     >
-      {animated ? <LottieAnimation animationData={animationData} onComplete={animationComplete} /> : children}
+      {animated ? (
+        <LottieAnimation animationData={animationData || null} onComplete={animationComplete} color={dynamicColor} />
+      ) : (
+        children
+      )}
     </div>
   )
 }

src/components/icons/ArchiveIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/22-trash_3.json'
 
 /** Archive Icon with Conditional Lottie Animation. */
-const ArchiveIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ArchiveIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/BackIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/06-back.json'
 
 /** Back Icon with Conditional Lottie Animation. */
-const BackIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const BackIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/BoldTextIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/13-bold_4.json'
 
 /** Bold Text Icon with Conditional Lottie Animation. */
-const BoldTextIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const BoldTextIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/BumpThoughtDownIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/14-bump-thought-down_2.json'
 
 /** Bump Thought Down Icon with Conditional Lottie Animation. */
-const BumpThoughtDownIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const BumpThoughtDownIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/Check.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/12-mark-as-done_3.json'
 
 /** Check Icon Component used for toggleDone with Conditional Lottie Animation. */
-const CheckIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const CheckIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ClearThoughtIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/25-clear-thought.json'
 
 /** Clear Thought Icon with Conditional Lottie Animation. */
-const ClearThoughtIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ClearThoughtIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/CollapseIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/26-collaps_2.json'
 
 /** Collapse Icon with Conditional Lottie Animation. */
-const CollapseIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const CollapseIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/CommandPaletteIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/27-command-palette.json'
 
 /** CommandPalette Icon with Conditional Lottie Animation. */
-const CommandPaletteIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const CommandPaletteIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ContextViewIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/18-context-view_3.json'
 
 /** Context View Icon with Conditional Lottie Animation. */
-const ContextViewIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ContextViewIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/ConvertToNoteIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/24-convert-to-note.json'
 
 /** Convert To Note Icon with Conditional Lottie Animation. */
-const ConvertToNoteIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const ConvertToNoteIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/DeleteIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/31-parmanently-delete_2.json'
 
 /** Delete Icon with Conditional Lottie Animation. */
-const DeleteIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const DeleteIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg

src/components/icons/DeviceIcon.tsx

@@ -3,7 +3,7 @@ import AnimatedIcon from './AnimatedIcon'
 import animationData from './animations/26-device-management_2.json'
 
 /** Device Icon with Conditional Lottie Animation. */
-const DeviceIcon = ({ fill, size, style = {}, cssRaw, animated, animationComplete }: IconType) => {
+const DeviceIcon = ({ fill, size = 18, style = {}, cssRaw, animated, animationComplete }: IconType) => {
   return (
     <AnimatedIcon {...{ fill, size, style, cssRaw, animated, animationData, animationComplete }}>
       <svg