Resolve TS errors and warnings

TODO: Use StyleTree types to remove `any`s from styleTrees.

styles/src/styleTree/app.ts

@@ -25,7 +25,7 @@ import copilot from "./copilot"
 import assistant from "./assistant"
 import { titlebar } from "./titlebar"
 
-export default function app(colorScheme: ColorScheme): Object {
+export default function app(colorScheme: ColorScheme): any {
     return {
         meta: {
             name: colorScheme.name,

styles/src/styleTree/assistant.ts

@@ -3,7 +3,7 @@ import { text, border, background, foreground } from "./components"
 import editor from "./editor"
 import { interactive } from "../element"
 
-export default function assistant(colorScheme: ColorScheme) {
+export default function assistant(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
     return {
         container: {

styles/src/styleTree/commandPalette.ts

@@ -3,8 +3,8 @@ import { withOpacity } from "../theme/color"
 import { text, background } from "./components"
 import { toggleable } from "../element"
 
-export default function commandPalette(colorScheme: ColorScheme) {
-    let layer = colorScheme.highest
+export default function commandPalette(colorScheme: ColorScheme): any {
+    const layer = colorScheme.highest
 
     const key = toggleable({
         base: {

styles/src/styleTree/components.ts

@@ -211,7 +211,7 @@ export function text(
     styleOrProperties?: Styles | TextProperties,
     properties?: TextProperties
 ) {
-    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+    const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
 
     if (typeof styleSetStyleOrProperties === "object") {
         properties = styleSetStyleOrProperties
@@ -220,8 +220,8 @@ export function text(
         properties = styleOrProperties
     }
 
-    let size = fontSizes[properties?.size || "sm"]
-    let color = properties?.color || style.foreground
+    const size = fontSizes[properties?.size || "sm"]
+    const color = properties?.color || style.foreground
 
     return {
         family: fontFamilies[fontFamily],
@@ -273,7 +273,7 @@ export function border(
     styleOrProperties?: Styles | BorderProperties,
     properties?: BorderProperties
 ): Border {
-    let style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
+    const style = getStyle(layer, styleSetStyleOrProperties, styleOrProperties)
 
     if (typeof styleSetStyleOrProperties === "object") {
         properties = styleSetStyleOrProperties
@@ -291,9 +291,9 @@ export function border(
 
 export function svg(
     color: string,
-    asset: String,
-    width: Number,
-    height: Number
+    asset: string,
+    width: number,
+    height: number
 ) {
     return {
         color,

styles/src/styleTree/contactFinder.ts

@@ -3,7 +3,7 @@ import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
 export default function contactFinder(colorScheme: ColorScheme): any {
-    let layer = colorScheme.middle
+    const layer = colorScheme.middle
 
     const sideMargin = 6
     const contactButton = {

styles/src/styleTree/contactList.ts

@@ -1,11 +1,11 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function contactsPanel(colorScheme: ColorScheme) {
+export default function contactsPanel(colorScheme: ColorScheme): any {
     const nameMargin = 8
     const sidePadding = 12
 
-    let layer = colorScheme.middle
+    const layer = colorScheme.middle
 
     const contactButton = {
         background: background(layer, "on"),

styles/src/styleTree/contactNotification.ts

@@ -4,8 +4,8 @@ import { interactive } from "../element"
 const avatarSize = 12
 const headerPadding = 8
 
-export default function contactNotification(colorScheme: ColorScheme): Object {
-    let layer = colorScheme.lowest
+export default function contactNotification(colorScheme: ColorScheme): any {
+    const layer = colorScheme.lowest
     return {
         headerAvatar: {
             height: avatarSize,

styles/src/styleTree/contactsPopover.ts

@@ -1,9 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
-import { background, border, text } from "./components"
+import { background, border } from "./components"
 
-export default function contactsPopover(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
-    const sidePadding = 12
+export default function contactsPopover(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
     return {
         background: background(layer),
         cornerRadius: 6,

styles/src/styleTree/contextMenu.ts

@@ -2,8 +2,8 @@ import { ColorScheme } from "../theme/colorScheme"
 import { background, border, borderColor, text } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function contextMenu(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+export default function contextMenu(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
     return {
         background: background(layer),
         cornerRadius: 10,

styles/src/styleTree/copilot.ts

@@ -1,12 +1,12 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, svg, text } from "./components"
 import { interactive } from "../element"
-export default function copilot(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+export default function copilot(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
 
-    let content_width = 264
+    const content_width = 264
 
-    let ctaButton =
+    const ctaButton =
         // Copied from welcome screen. FIXME: Move this into a ZDS component
         interactive({
             base: {

styles/src/styleTree/editor.ts

@@ -6,10 +6,10 @@ import hoverPopover from "./hoverPopover"
 import { buildSyntax } from "../theme/syntax"
 import { interactive, toggleable } from "../element"
 
-export default function editor(colorScheme: ColorScheme) {
+export default function editor(colorScheme: ColorScheme): any {
     const { isLight } = colorScheme
 
-    let layer = colorScheme.highest
+    const layer = colorScheme.highest
 
     const autocompleteItem = {
         cornerRadius: 6,

styles/src/styleTree/feedback.ts

@@ -2,8 +2,8 @@ import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 import { interactive } from "../element"
 
-export default function feedback(colorScheme: ColorScheme) {
-    let layer = colorScheme.highest
+export default function feedback(colorScheme: ColorScheme): any {
+    const layer = colorScheme.highest
 
     return {
         submit_button: interactive({

styles/src/styleTree/hoverPopover.ts

@@ -1,9 +1,9 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 
-export default function HoverPopover(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
-    let baseContainer = {
+export default function HoverPopover(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
+    const baseContainer = {
         background: background(layer),
         cornerRadius: 8,
         padding: {

styles/src/styleTree/incomingCallNotification.ts

@@ -3,8 +3,8 @@ import { background, border, text } from "./components"
 
 export default function incomingCallNotification(
     colorScheme: ColorScheme
-): Object {
-    let layer = colorScheme.middle
+): unknown {
+    const layer = colorScheme.middle
     const avatarSize = 48
     return {
         windowHeight: 74,

styles/src/styleTree/picker.ts

@@ -4,7 +4,7 @@ import { background, border, text } from "./components"
 import { interactive, toggleable } from "../element"
 
 export default function picker(colorScheme: ColorScheme): any {
-    let layer = colorScheme.lowest
+    const layer = colorScheme.lowest
     const container = {
         background: background(layer),
         border: border(layer),

styles/src/styleTree/projectDiagnostics.ts

@@ -1,8 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, text } from "./components"
 
-export default function projectDiagnostics(colorScheme: ColorScheme) {
-    let layer = colorScheme.highest
+export default function projectDiagnostics(colorScheme: ColorScheme): any {
+    const layer = colorScheme.highest
     return {
         background: background(layer),
         tabIconSpacing: 4,

styles/src/styleTree/projectPanel.ts

@@ -10,10 +10,10 @@ import {
 } from "./components"
 import { interactive, toggleable } from "../element"
 import merge from "ts-deepmerge"
-export default function projectPanel(colorScheme: ColorScheme) {
+export default function projectPanel(colorScheme: ColorScheme): any {
     const { isLight } = colorScheme
 
-    let layer = colorScheme.middle
+    const layer = colorScheme.middle
 
     type EntryStateProps = {
         background?: string

styles/src/styleTree/projectSharedNotification.ts

@@ -3,8 +3,8 @@ import { background, border, text } from "./components"
 
 export default function projectSharedNotification(
     colorScheme: ColorScheme
-): Object {
-    let layer = colorScheme.middle
+): unknown {
+    const layer = colorScheme.middle
 
     const avatarSize = 48
     return {

styles/src/styleTree/search.ts

@@ -3,7 +3,7 @@ import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function search(colorScheme: ColorScheme): unknown {
+export default function search(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
 
     // Search input

styles/src/styleTree/sharedScreen.ts

@@ -2,8 +2,10 @@ import { ColorScheme } from "../theme/colorScheme"
 import { StyleTree } from "../types"
 import { background } from "./components"
 
-export default function sharedScreen(colorScheme: ColorScheme): StyleTree.SharedScreen {
-    let layer = colorScheme.highest
+export default function sharedScreen(
+    colorScheme: ColorScheme
+): StyleTree.SharedScreen {
+    const layer = colorScheme.highest
     return {
         background: background(layer),
     }

styles/src/styleTree/simpleMessageNotification.ts

@@ -6,8 +6,8 @@ const headerPadding = 8
 
 export default function simpleMessageNotification(
     colorScheme: ColorScheme
-): Object {
-    let layer = colorScheme.middle
+): unknown {
+    const layer = colorScheme.middle
     return {
         message: {
             ...text(layer, "sans", { size: "xs" }),

styles/src/styleTree/statusBar.ts

@@ -1,8 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function statusBar(colorScheme: ColorScheme) {
-    let layer = colorScheme.lowest
+export default function statusBar(colorScheme: ColorScheme): any {
+    const layer = colorScheme.lowest
 
     const statusContainer = {
         cornerRadius: 6,

styles/src/styleTree/tabBar.ts

@@ -3,11 +3,11 @@ import { withOpacity } from "../theme/color"
 import { text, border, background, foreground } from "./components"
 import { interactive, toggleable } from "../element"
 
-export default function tabBar(colorScheme: ColorScheme) {
+export default function tabBar(colorScheme: ColorScheme): any {
     const height = 32
 
-    let activeLayer = colorScheme.highest
-    let layer = colorScheme.middle
+    const activeLayer = colorScheme.highest
+    const layer = colorScheme.middle
 
     const tab = {
         height,

styles/src/styleTree/titlebar.ts

@@ -155,7 +155,7 @@ function user_menu(theme: ColorScheme) {
     }
 }
 
-export function titlebar(theme: ColorScheme) {
+export function titlebar(theme: ColorScheme): any {
     const avatarWidth = 15
     const avatarOuterWidth = avatarWidth + 4
     const followerAvatarWidth = 14

styles/src/styleTree/toggle.ts

@@ -1,47 +0,0 @@
-import merge from "ts-deepmerge"
-
-type ToggleState = "inactive" | "active"
-
-type Toggleable<T> = Record<ToggleState, T>
-
-const NO_INACTIVE_OR_BASE_ERROR =
-    "A toggleable object must have an inactive state, or a base property."
-const NO_ACTIVE_ERROR = "A toggleable object must have an active state."
-
-interface ToggleableProps<T> {
-    base?: T
-    state: Partial<Record<ToggleState, T>>
-}
-
-/**
- * Helper function for creating Toggleable objects.
- * @template T The type of the object being toggled.
- * @param props Object containing the base (inactive) state and state modifications to create the active state.
- * @returns A Toggleable object containing both the inactive and active states.
- * @example
- * ```
- * toggleable({
- *   base: { background: "#000000", text: "#CCCCCC" },
- *   state: { active: { text: "#CCCCCC" } },
- * })
- * ```
- */
-export function toggleable<T extends object>(
-    props: ToggleableProps<T>
-): Toggleable<T> {
-    const { base, state } = props
-
-    if (!base && !state.inactive) throw new Error(NO_INACTIVE_OR_BASE_ERROR)
-    if (!state.active) throw new Error(NO_ACTIVE_ERROR)
-
-    const inactiveState = base
-        ? ((state.inactive ? merge(base, state.inactive) : base) as T)
-        : (state.inactive as T)
-
-    const toggleObj: Toggleable<T> = {
-        inactive: inactiveState,
-        active: merge(base ?? {}, state.active) as T,
-    }
-
-    return toggleObj
-}

styles/src/styleTree/toolbarDropdownMenu.ts

@@ -1,8 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 import { interactive, toggleable } from "../element"
-export default function dropdownMenu(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+export default function dropdownMenu(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
 
     return {
         rowHeight: 30,

styles/src/styleTree/tooltip.ts

@@ -1,8 +1,8 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
 
-export default function tooltip(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+export default function tooltip(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
     return {
         background: background(layer),
         border: border(layer),

styles/src/styleTree/updateNotification.ts

@@ -4,8 +4,8 @@ import { interactive } from "../element"
 
 const headerPadding = 8
 
-export default function updateNotification(colorScheme: ColorScheme): Object {
-    let layer = colorScheme.middle
+export default function updateNotification(colorScheme: ColorScheme): any {
+    const layer = colorScheme.middle
     return {
         message: {
             ...text(layer, "sans", { size: "xs" }),

styles/src/styleTree/welcome.ts

@@ -10,7 +10,7 @@ import {
 } from "./components"
 import { interactive } from "../element"
 
-export default function welcome(colorScheme: ColorScheme) {
+export default function welcome(colorScheme: ColorScheme): any {
     const layer = colorScheme.highest
 
     const checkboxBase = {

styles/src/styleTree/workspace.ts

@@ -13,7 +13,7 @@ import tabBar from "./tabBar"
 import { interactive } from "../element"
 
 import { titlebar } from "./titlebar"
-export default function workspace(colorScheme: ColorScheme) {
+export default function workspace(colorScheme: ColorScheme): any {
     const layer = colorScheme.lowest
     const isLight = colorScheme.isLight