Format

styles/src/element/index.ts

@@ -1,3 +1,3 @@
-import { interactive } from "./interactive";
+import { interactive } from "./interactive"
 
 export { interactive }

styles/src/element/interactive.test.ts

@@ -1,59 +1,56 @@
-import { NOT_ENOUGH_STATES_ERROR, NO_DEFAULT_OR_BASE_ERROR, interactive } from './interactive'
+import {
-import { describe, it, expect } from 'vitest'
+    NOT_ENOUGH_STATES_ERROR,
-
+    NO_DEFAULT_OR_BASE_ERROR,
-describe('interactive', () => {
+    interactive,
-
+} from "./interactive"
-    it('creates an Interactive<Element> with base properties and states', () => {
+import { describe, it, expect } from "vitest"
 
+describe("interactive", () => {
+    it("creates an Interactive<Element> with base properties and states", () => {
         const result = interactive({
-            base: { fontSize: 10, color: '#FFFFFF' },
+            base: { fontSize: 10, color: "#FFFFFF" },
             state: {
-                hovered: { color: '#EEEEEE' },
+                hovered: { color: "#EEEEEE" },
-                clicked: { color: '#CCCCCC' },
+                clicked: { color: "#CCCCCC" },
-            }
+            },
         })
 
         expect(result).toEqual({
-            default: { color: '#FFFFFF', fontSize: 10 },
+            default: { color: "#FFFFFF", fontSize: 10 },
-            hovered: { color: '#EEEEEE', fontSize: 10 },
+            hovered: { color: "#EEEEEE", fontSize: 10 },
-            clicked: { color: '#CCCCCC', fontSize: 10 },
+            clicked: { color: "#CCCCCC", fontSize: 10 },
         })
     })
 
-    it('creates an Interactive<Element> with no base properties', () => {
+    it("creates an Interactive<Element> with no base properties", () => {
-
         const result = interactive({
             state: {
-                default: { color: '#FFFFFF', fontSize: 10 },
+                default: { color: "#FFFFFF", fontSize: 10 },
-                hovered: { color: '#EEEEEE' },
+                hovered: { color: "#EEEEEE" },
-                clicked: { color: '#CCCCCC' },
+                clicked: { color: "#CCCCCC" },
-            }
+            },
         })
 
         expect(result).toEqual({
-            default: { color: '#FFFFFF', fontSize: 10 },
+            default: { color: "#FFFFFF", fontSize: 10 },
-            hovered: { color: '#EEEEEE', fontSize: 10 },
+            hovered: { color: "#EEEEEE", fontSize: 10 },
-            clicked: { color: '#CCCCCC', fontSize: 10 },
+            clicked: { color: "#CCCCCC", fontSize: 10 },
         })
     })
 
-    it('throws error when both default and base are missing', () => {
+    it("throws error when both default and base are missing", () => {
         const state = {
-            hovered: { color: 'blue' },
+            hovered: { color: "blue" },
         }
 
-        expect(() => interactive({ state })).toThrow(
+        expect(() => interactive({ state })).toThrow(NO_DEFAULT_OR_BASE_ERROR)
-            NO_DEFAULT_OR_BASE_ERROR
-        )
     })
 
-    it('throws error when no other state besides default is present', () => {
+    it("throws error when no other state besides default is present", () => {
         const state = {
             default: { fontSize: 10 },
         }
 
-        expect(() => interactive({ state })).toThrow(
+        expect(() => interactive({ state })).toThrow(NOT_ENOUGH_STATES_ERROR)
-            NOT_ENOUGH_STATES_ERROR
-        )
     })
 })

styles/src/element/interactive.ts

@@ -1,20 +1,27 @@
 import merge from "ts-deepmerge"
 
-type InteractiveState = "default" | "hovered" | "clicked" | "selected" | "disabled";
+type InteractiveState =
+    | "default"
+    | "hovered"
+    | "clicked"
+    | "selected"
+    | "disabled"
 
 type Interactive<T> = {
-    default: T,
+    default: T
-    hovered?: T,
+    hovered?: T
-    clicked?: T,
+    clicked?: T
-    selected?: T,
+    selected?: T
-    disabled?: T,
+    disabled?: T
-};
+}
 
-export const NO_DEFAULT_OR_BASE_ERROR = "An interactive object must have a default state, or a base property."
+export const NO_DEFAULT_OR_BASE_ERROR =
-export const NOT_ENOUGH_STATES_ERROR = "An interactive object must have a default and at least one other state."
+    "An interactive object must have a default state, or a base property."
+export const NOT_ENOUGH_STATES_ERROR =
+    "An interactive object must have a default and at least one other state."
 
 interface InteractiveProps<T> {
-    base?: T,
+    base?: T
     state: Partial<Record<InteractiveState, T>>
 }
 
@@ -29,46 +36,61 @@ interface InteractiveProps<T> {
  * @param state Object containing optional modified fields to be included in the resulting object for each state.
  * @returns Interactive<T> object with fields from `base` and `state`.
  */
-export function interactive<T extends Object>({ base, state }: InteractiveProps<T>): Interactive<T> {
+export function interactive<T extends Object>({
-    if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR);
+    base,
+    state,
+}: InteractiveProps<T>): Interactive<T> {
+    if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR)
 
-    let defaultState: T;
+    let defaultState: T
 
     if (state.default && base) {
-        defaultState = merge(base, state.default) as T;
+        defaultState = merge(base, state.default) as T
     } else {
-        defaultState = base ? base : state.default as T;
+        defaultState = base ? base : (state.default as T)
     }
 
     let interactiveObj: Interactive<T> = {
         default: defaultState,
-    };
+    }
 
-    let stateCount = 0;
+    let stateCount = 0
 
     if (state.hovered !== undefined) {
-        interactiveObj.hovered = merge(interactiveObj.default, state.hovered) as T;
+        interactiveObj.hovered = merge(
-        stateCount++;
+            interactiveObj.default,
+            state.hovered
+        ) as T
+        stateCount++
     }
 
     if (state.clicked !== undefined) {
-        interactiveObj.clicked = merge(interactiveObj.default, state.clicked) as T;
+        interactiveObj.clicked = merge(
-        stateCount++;
+            interactiveObj.default,
+            state.clicked
+        ) as T
+        stateCount++
     }
 
     if (state.selected !== undefined) {
-        interactiveObj.selected = merge(interactiveObj.default, state.selected) as T;
+        interactiveObj.selected = merge(
-        stateCount++;
+            interactiveObj.default,
+            state.selected
+        ) as T
+        stateCount++
     }
 
     if (state.disabled !== undefined) {
-        interactiveObj.disabled = merge(interactiveObj.default, state.disabled) as T;
+        interactiveObj.disabled = merge(
-        stateCount++;
+            interactiveObj.default,
+            state.disabled
+        ) as T
+        stateCount++
     }
 
     if (stateCount < 1) {
-        throw new Error(NOT_ENOUGH_STATES_ERROR);
+        throw new Error(NOT_ENOUGH_STATES_ERROR)
     }
 
-    return interactiveObj;
+    return interactiveObj
 }

styles/src/styleTree/app.ts

@@ -1,4 +1,3 @@
-import { text } from "./components"
 import contactFinder from "./contactFinder"
 import contactsPopover from "./contactsPopover"
 import commandPalette from "./commandPalette"

styles/src/styleTree/assistant.ts

@@ -16,17 +16,27 @@ export default function assistant(colorScheme: ColorScheme) {
             background: editor(colorScheme).background,
         },
         userSender: {
-            default:
+            default: {
-                { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
+                ...text(layer, "sans", "default", {
+                    size: "sm",
+                    weight: "bold",
+                }),
+            },
         },
         assistantSender: {
             default: {
-                ...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
+                ...text(layer, "sans", "accent", {
+                    size: "sm",
+                    weight: "bold",
+                }),
             },
         },
         systemSender: {
             default: {
-                ...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
+                ...text(layer, "sans", "variant", {
+                    size: "sm",
+                    weight: "bold",
+                }),
             },
         },
         sentAt: {
@@ -43,11 +53,12 @@ export default function assistant(colorScheme: ColorScheme) {
                 padding: 4,
                 cornerRadius: 4,
                 ...text(layer, "sans", "default", { size: "xs" }),
-            }, state: {
+            },
+            state: {
                 hovered: {
                     background: background(layer, "on", "hovered"),
-                }
+                },
-            }
+            },
         }),
         remainingTokens: {
             background: background(layer, "on"),

styles/src/styleTree/commandPalette.ts

@@ -8,10 +8,12 @@ export default function commandPalette(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
     return {
         keystrokeSpacing: 8,
-        key:
+        key: toggleable(
-            toggleable(interactive({
+            interactive({
                 base: {
-                    text: text(layer, "mono", "variant", "default", { size: "xs" }),
+                    text: text(layer, "mono", "variant", "default", {
+                        size: "xs",
+                    }),
                     cornerRadius: 2,
                     background: background(layer, "on"),
                     padding: {
@@ -25,15 +27,15 @@ export default function commandPalette(colorScheme: ColorScheme) {
                         bottom: 1,
                         left: 2,
                     },
-                }, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
+                },
-            }), {
+                state: { hovered: { cornerRadius: 4, padding: { top: 17 } } },
+            }),
+            {
                 default: {
                     text: text(layer, "mono", "on", "default", { size: "xs" }),
                     background: withOpacity(background(layer, "on"), 0.2),
+                },
             }
-
+        ),
-            })
-        ,
-
     }
 }

styles/src/styleTree/contactList.ts

@@ -72,7 +72,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         },
         rowHeight: 28,
         sectionIconSize: 8,
-        headerRow: toggleable(interactive({
+        headerRow: toggleable(
+            interactive({
                 base: {
                     ...text(layer, "mono", { size: "sm" }),
                     margin: { top: 14 },
@@ -80,16 +81,19 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                         left: sidePadding,
                         right: sidePadding,
                     },
-                background: background(layer, "default"),// posiewic: breaking change
+                    background: background(layer, "default"), // posiewic: breaking change
-            }
+                },
-            , state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
+                state: {
+                    hovered: { background: background(layer, "default") },
+                }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
             }),
             {
                 default: {
                     ...text(layer, "mono", "active", { size: "sm" }),
                     background: background(layer, "active"),
                 },
-            }),
+            }
+        ),
         leaveCall: interactive({
             base: {
                 background: background(layer),
@@ -105,24 +109,22 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                     right: 7,
                 },
                 ...text(layer, "sans", "variant", { size: "xs" }),
-            }
+            },
-            ,
             state: {
                 hovered: {
                     ...text(layer, "sans", "hovered", { size: "xs" }),
                     background: background(layer, "hovered"),
                     border: border(layer, "hovered"),
-                }
+                },
-            }
+            },
-        }
+        }),
-        ),
         contactRow: {
             inactive: {
                 default: {
                     padding: {
                         left: sidePadding,
                         right: sidePadding,
-                    }
+                    },
                 },
             },
             active: {
@@ -131,8 +133,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                     padding: {
                         left: sidePadding,
                         right: sidePadding,
-                    }
+                    },
-                }
+                },
             },
         },
 
@@ -165,7 +167,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                 hovered: {
                     background: background(layer, "hovered"),
                 },
-            }
+            },
         }),
         disabledButton: {
             ...contactButton,
@@ -175,7 +177,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         callingIndicator: {
             ...text(layer, "mono", "variant", { size: "xs" }),
         },
-        treeBranch: toggleable(interactive({
+        treeBranch: toggleable(
+            interactive({
                 base: {
                     color: borderColor(layer),
                     width: 1,
@@ -184,7 +187,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                     hovered: {
                         color: borderColor(layer),
                     },
-            }
+                },
             }),
             {
                 default: {
@@ -192,7 +195,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                 },
             }
         ),
-        projectRow: toggleable(interactive({
+        projectRow: toggleable(
+            interactive({
                 base: {
                     ...projectRow,
                     background: background(layer),
@@ -205,14 +209,16 @@ export default function contactsPanel(colorScheme: ColorScheme) {
                         ...projectRow.name,
                         ...text(layer, "mono", { size: "sm" }),
                     },
-            }, state: {
+                },
+                state: {
                     hovered: {
                         background: background(layer, "hovered"),
                     },
-            }
+                },
             }),
             {
-                default: { background: background(layer, "active") }
+                default: { background: background(layer, "active") },
-            })
+            }
+        ),
     }
 }

styles/src/styleTree/contactNotification.ts

@@ -21,21 +21,20 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
             ...text(layer, "sans", { size: "xs" }),
             margin: { left: avatarSize + headerPadding, top: 6, bottom: 6 },
         },
-        button:
+        button: interactive({
-            interactive({
             base: {
                 ...text(layer, "sans", "on", { size: "xs" }),
                 background: background(layer, "on"),
                 padding: 4,
                 cornerRadius: 6,
-                    margin: { left: 6 }
+                margin: { left: 6 },
             },
 
             state: {
                 hovered: {
                     background: background(layer, "on", "hovered"),
-                    }
+                },
-                }
+            },
         }),
 
         dismissButton: {
@@ -48,7 +47,7 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
                 hover: {
                     color: foreground(layer, "hovered"),
                 },
-            }
+            },
         },
     }
 }

styles/src/styleTree/contextMenu.ts

@@ -12,7 +12,8 @@ export default function contextMenu(colorScheme: ColorScheme) {
         shadow: colorScheme.popoverShadow,
         border: border(layer),
         keystrokeMargin: 30,
-        item: toggleable(interactive({
+        item: toggleable(
+            interactive({
                 base: {
                     iconSpacing: 8,
                     iconWidth: 14,
@@ -25,8 +26,9 @@ export default function contextMenu(colorScheme: ColorScheme) {
                             weight: "bold",
                         }),
                         padding: { left: 3, right: 3 },
-                }
+                    },
-            }, state: {
+                },
+                state: {
                     hovered: {
                         background: background(layer, "hovered"),
                         label: text(layer, "sans", "hovered", { size: "sm" }),
@@ -37,16 +39,18 @@ export default function contextMenu(colorScheme: ColorScheme) {
                             }),
                             padding: { left: 3, right: 3 },
                         },
-                }
+                    },
-            }
+                },
-        }), {
+            }),
+            {
                 default: {
                     background: background(layer, "active"),
                 },
                 hovered: {
                     background: background(layer, "active"),
                 },
-        }),
+            }
+        ),
 
         separator: {
             background: borderColor(layer),

styles/src/styleTree/copilot.ts

@@ -25,7 +25,7 @@ export default function copilot(colorScheme: ColorScheme) {
                     left: 7,
                     right: 7,
                 },
-                ...text(layer, "sans", "default", { size: "sm" })
+                ...text(layer, "sans", "default", { size: "sm" }),
             },
             state: {
                 hovered: {
@@ -33,12 +33,11 @@ export default function copilot(colorScheme: ColorScheme) {
                     background: background(layer, "hovered"),
                     border: border(layer, "active"),
                 },
-            }
+            },
-        });
+        })
 
     return {
-        outLinkIcon:
+        outLinkIcon: interactive({
-            interactive({
             base: {
                 icon: svg(
                     foreground(layer, "variant"),
@@ -54,18 +53,17 @@ export default function copilot(colorScheme: ColorScheme) {
             state: {
                 hovered: {
                     icon: {
-                            color:
+                        color: foreground(layer, "hovered"),
-                                foreground(layer, "hovered")
+                    },
-                        }
+                },
             },
-                }
         }),
 
         modal: {
             titleText: {
                 default: {
-                    ...text(layer, "sans", { size: "xs", weight: "bold" })
+                    ...text(layer, "sans", { size: "xs", weight: "bold" }),
-                }
+                },
             },
             titlebar: {
                 background: background(colorScheme.lowest),
@@ -87,8 +85,7 @@ export default function copilot(colorScheme: ColorScheme) {
                 },
             },
             closeIcon: interactive({
-                base:
+                base: {
-                {
                     icon: svg(
                         foreground(layer, "variant"),
                         "icons/x_mark_8.svg",
@@ -106,7 +103,7 @@ export default function copilot(colorScheme: ColorScheme) {
                         margin: {
                             right: 0,
                         },
-                    }
+                    },
                 },
                 state: {
                     hovered: {
@@ -125,7 +122,7 @@ export default function copilot(colorScheme: ColorScheme) {
                             8
                         ),
                     },
-                }
+                },
             }),
             dimensions: {
                 width: 280,
@@ -214,8 +211,9 @@ export default function copilot(colorScheme: ColorScheme) {
                                 bottom: 5,
                                 left: 8,
                                 right: 0,
-                            }
+                            },
-                        }, state: {
+                        },
+                        state: {
                             hovered: {
                                 border: border(layer, "active", {
                                     bottom: false,
@@ -224,8 +222,8 @@ export default function copilot(colorScheme: ColorScheme) {
                                     left: true,
                                 }),
                             },
-                        }
+                        },
-                    })
+                    }),
                 },
             },
 

styles/src/styleTree/editor.ts

@@ -50,23 +50,26 @@ export default function editor(colorScheme: ColorScheme) {
         // Inline autocomplete suggestions, Co-pilot suggestions, etc.
         suggestion: syntax.predictive,
         codeActions: {
-            indicator: toggleable(interactive({
+            indicator: toggleable(
+                interactive({
                     base: {
                         color: foreground(layer, "variant"),
-                }, state: {
+                    },
+                    state: {
                         clicked: {
                             color: foreground(layer, "base"),
                         },
                         hovered: {
                             color: foreground(layer, "on"),
                         },
-                }
+                    },
                 }),
                 {
                     default: {
                         color: foreground(layer, "on"),
+                    },
                 }
-                }),
+            ),
 
             verticalScale: 0.55,
         },
@@ -74,29 +77,34 @@ export default function editor(colorScheme: ColorScheme) {
             iconMarginScale: 2.5,
             foldedIcon: "icons/chevron_right_8.svg",
             foldableIcon: "icons/chevron_down_8.svg",
-            indicator: toggleable(interactive({
+            indicator: toggleable(
+                interactive({
                     base: {
                         color: foreground(layer, "variant"),
-                }, state: {
+                    },
+                    state: {
                         clicked: {
                             color: foreground(layer, "base"),
                         },
                         hovered: {
                             color: foreground(layer, "on"),
                         },
-                }
+                    },
                 }),
                 {
                     default: {
                         color: foreground(layer, "on"),
+                    },
                 }
-                }),
+            ),
             ellipses: {
                 textColor: colorScheme.ramps.neutral(0.71).hex(),
                 cornerRadiusFactor: 0.15,
                 background: {
                     // Copied from hover_popover highlight
-                    default: { color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex() },
+                    default: {
+                        color: colorScheme.ramps.neutral(0.5).alpha(0.0).hex(),
+                    },
 
                     hover: {
                         color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(),
@@ -245,12 +253,13 @@ export default function editor(colorScheme: ColorScheme) {
                     bottom: 6,
                     left: 6,
                     right: 6,
-                }
+                },
-            }, state: {
+            },
+            state: {
                 hovered: {
                     background: background(layer, "on", "hovered"),
-                }
+                },
-            }
+            },
         }),
 
         scrollbar: {

styles/src/styleTree/feedback.ts

@@ -20,8 +20,9 @@ export default function feedback(colorScheme: ColorScheme) {
                     left: 10,
                     right: 10,
                     top: 2,
-                }
+                },
-            }, state: {
+            },
+            state: {
                 clicked: {
                     ...text(layer, "mono", "on", "pressed"),
                     background: background(layer, "on", "pressed"),
@@ -32,7 +33,7 @@ export default function feedback(colorScheme: ColorScheme) {
                     background: background(layer, "on", "hovered"),
                     border: border(layer, "on", "hovered"),
                 },
-            }
+            },
         }),
         button_margin: 8,
         info_text_default: text(layer, "sans", "default", { size: "xs" }),

styles/src/styleTree/picker.ts

@@ -40,7 +40,8 @@ export default function picker(colorScheme: ColorScheme): any {
             ...container,
             padding: {},
         },
-        item: toggleable(interactive({
+        item: toggleable(
+            interactive({
                 base: {
                     padding: {
                         bottom: 4,
@@ -55,13 +56,18 @@ export default function picker(colorScheme: ColorScheme): any {
                     },
                     cornerRadius: 8,
                     text: text(layer, "sans", "variant"),
-                highlightText: text(layer, "sans", "accent", { weight: "bold" }),
+                    highlightText: text(layer, "sans", "accent", {
-            }
+                        weight: "bold",
-            , state: {
+                    }),
+                },
+                state: {
                     hovered: {
-                    background: withOpacity(background(layer, "hovered"), 0.5),
+                        background: withOpacity(
-                }
+                            background(layer, "hovered"),
-            }
+                            0.5
+                        ),
+                    },
+                },
             }),
             {
                 default: {
@@ -70,9 +76,9 @@ export default function picker(colorScheme: ColorScheme): any {
                         0.5
                     ),
                     //text: text(layer, "sans", "base", "active"),
+                },
             }
-            }),
+        ),
-
 
         inputEditor,
         emptyInputEditor,

styles/src/styleTree/projectPanel.ts

@@ -29,17 +29,18 @@ export default function projectPanel(colorScheme: ColorScheme) {
         },
     }
 
-    let entry = toggleable(interactive({
+    let entry = toggleable(
+        interactive({
             base: {
                 ...baseEntry,
                 text: text(layer, "mono", "variant", { size: "sm" }),
                 status,
-        }, state:
+            },
-        {
+            state: {
                 hovered: {
                     background: background(layer, "variant", "hovered"),
-            }
+                },
-        }
+            },
         }),
         {
             default: {
@@ -52,8 +53,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
                 //background: background(layer, "active"),
                 text: text(layer, "mono", "active", { size: "sm" }),
             },
-
+        }
-        });
+    )
 
     return {
         openProjectButton: interactive({
@@ -72,14 +73,15 @@ export default function projectPanel(colorScheme: ColorScheme) {
                     left: 7,
                     right: 7,
                 },
-                ...text(layer, "sans", "default", { size: "sm" })
+                ...text(layer, "sans", "default", { size: "sm" }),
-            }, state: {
+            },
+            state: {
                 hovered: {
                     ...text(layer, "sans", "default", { size: "sm" }),
                     background: background(layer, "hovered"),
                     border: border(layer, "active"),
                 },
-            }
+            },
         }),
         background: background(layer),
         padding: { left: 6, right: 6, top: 0, bottom: 6 },
@@ -111,7 +113,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
                     background: background(layer, "active"),
                     text: text(layer, "mono", "disabled", { size: "sm" }),
                 },
-
             },
         },
         filenameEditor: {

styles/src/styleTree/search.ts

@@ -37,7 +37,8 @@ export default function search(colorScheme: ColorScheme) {
     return {
         // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
         matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-        optionButton: toggleable(interactive({
+        optionButton: toggleable(
+            interactive({
                 base: {
                     ...text(layer, "mono", "on"),
                     background: background(layer, "on"),
@@ -52,7 +53,8 @@ export default function search(colorScheme: ColorScheme) {
                         right: 10,
                         top: 2,
                     },
-            }, state: {
+                },
+                state: {
                     clicked: {
                         ...text(layer, "mono", "on", "pressed"),
                         background: background(layer, "on", "pressed"),
@@ -63,15 +65,16 @@ export default function search(colorScheme: ColorScheme) {
                         background: background(layer, "on", "hovered"),
                         border: border(layer, "on", "hovered"),
                     },
-            }
+                },
-        }), {
+            }),
+            {
                 default: {
                     ...text(layer, "mono", "on", "inverted"),
                     background: background(layer, "on", "inverted"),
                     border: border(layer, "on", "inverted"),
                 },
-
+            }
-        }),
+        ),
         editor,
         invalidEditor: {
             ...editor,
@@ -113,11 +116,12 @@ export default function search(colorScheme: ColorScheme) {
                     left: 10,
                     right: 10,
                 },
-            }, state: {
+            },
+            state: {
                 hovered: {
                     color: foreground(layer, "hovered"),
-                }
+                },
-            }
+            },
         }),
     }
 }

styles/src/styleTree/simpleMessageNotification.ts

@@ -26,13 +26,14 @@ export default function simpleMessageNotification(
                 },
 
                 margin: { left: headerPadding, top: 6, bottom: 6 },
-            }, state: {
+            },
+            state: {
                 hovered: {
                     ...text(layer, "sans", "default", { size: "xs" }),
                     background: background(layer, "hovered"),
                     border: border(layer, "active"),
                 },
-            }
+            },
         }),
         dismissButton: interactive({
             base: {
@@ -41,11 +42,12 @@ export default function simpleMessageNotification(
                 iconHeight: 8,
                 buttonWidth: 8,
                 buttonHeight: 8,
-            }, state: {
+            },
+            state: {
                 hovered: {
                     color: foreground(layer, "hovered"),
                 },
-            }
+            },
-        })
+        }),
     }
 }

styles/src/styleTree/statusBar.ts

@@ -29,15 +29,14 @@ export default function statusBar(colorScheme: ColorScheme) {
         activeLanguage: interactive({
             base: {
                 padding: { left: 6, right: 6 },
-                ...text(layer, "sans", "variant")
+                ...text(layer, "sans", "variant"),
             },
             state: {
                 hovered: {
                     ...text(layer, "sans", "on"),
-                }
-            }
                 },
-        ),
+            },
+        }),
         autoUpdateProgressMessage: text(layer, "sans", "variant"),
         autoUpdateDoneMessage: text(layer, "sans", "variant"),
         lspStatus: interactive({
@@ -47,25 +46,23 @@ export default function statusBar(colorScheme: ColorScheme) {
                 iconWidth: 14,
                 height: 18,
                 message: text(layer, "sans"),
-                iconColor: foreground(layer)
+                iconColor: foreground(layer),
             },
             state: {
                 hovered: {
                     message: text(layer, "sans"),
                     iconColor: foreground(layer),
                     background: background(layer, "hovered"),
-                }
+                },
-            }
+            },
         }),
         diagnosticMessage: interactive({
             base: {
-                ...text(layer, "sans")
+                ...text(layer, "sans"),
             },
-            state: { hovered: text(layer, "sans", "hovered") }
+            state: { hovered: text(layer, "sans", "hovered") },
-        },
+        }),
-        ),
+        diagnosticSummary: interactive({
-        diagnosticSummary:
-            interactive({
             base: {
                 height: 20,
                 iconWidth: 16,
@@ -88,8 +85,9 @@ export default function statusBar(colorScheme: ColorScheme) {
                     ...diagnosticStatusContainer,
                     background: background(layer, "negative"),
                     border: border(layer, "negative"),
-                    }
+                },
-                }, state: {
+            },
+            state: {
                 hovered: {
                     iconColorOk: foreground(layer, "on"),
                     containerOk: {
@@ -102,16 +100,16 @@ export default function statusBar(colorScheme: ColorScheme) {
                     containerError: {
                         background: background(layer, "negative", "hovered"),
                         border: border(layer, "negative", "hovered"),
-                        }
+                    },
-                    }
+                },
-                }
+            },
-            }
+        }),
-            ),
         panelButtons: {
             groupLeft: {},
             groupBottom: {},
             groupRight: {},
-            button: toggleable(interactive({
+            button: toggleable(
+                interactive({
                     base: {
                         ...statusContainer,
                         iconSize: 16,
@@ -120,19 +118,21 @@ export default function statusBar(colorScheme: ColorScheme) {
                             margin: { left: 6 },
                             ...text(layer, "sans", { size: "sm" }),
                         },
-                }, state: {
+                    },
+                    state: {
                         hovered: {
                             iconColor: foreground(layer, "hovered"),
                             background: background(layer, "variant"),
-                    }
+                        },
-                }
+                    },
                 }),
                 {
                     default: {
                         iconColor: foreground(layer, "active"),
                         background: background(layer, "active"),
+                    },
                 }
-                }),
+            ),
             badge: {
                 cornerRadius: 3,
                 padding: 2,

styles/src/styleTree/tabBar.ts

@@ -89,7 +89,8 @@ export default function tabBar(colorScheme: ColorScheme) {
             inactiveTab: inactivePaneInactiveTab,
         },
         draggedTab,
-        paneButton: toggleable(interactive({
+        paneButton: toggleable(
+            interactive({
                 base: {
                     color: foreground(layer, "variant"),
                     iconWidth: 12,
@@ -98,14 +99,14 @@ export default function tabBar(colorScheme: ColorScheme) {
                 state: {
                     hovered: {
                         color: foreground(layer, "hovered"),
-                }
+                    },
-            }
+                },
             }),
             {
                 default: {
                     color: foreground(layer, "accent"),
-                }
                 },
+            }
         ),
         paneButtonContainer: {
             background: tab.background,

styles/src/styleTree/toggle.ts

@@ -1,41 +1,47 @@
-import { DeepPartial } from 'utility-types';
+import merge from "ts-deepmerge"
-import merge from 'ts-deepmerge';
 
-interface Toggleable<T> {
+type ToggleState = "inactive" | "active"
-    inactive: T
+
-    active: T,
+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 inactive The initial state of the toggleable object.
+ * @param props Object containing the base (inactive) state and state modifications to create the active state.
- * @param modifications The modifications to be applied to the initial state to create the active state.
  * @returns A Toggleable object containing both the inactive and active states.
  * @example
  * ```
- * toggleable({day: 1, month: "January"}, {day: 3})
+ * toggleable({
- * ```
+ *   base: { background: "#000000", text: "#CCCCCC" },
- * This returns the following object:
+ *   state: { active: { text: "#CCCCCC" } },
- * ```
+ * })
- *  Toggleable<_>{
- *    inactive: { day: 1, month: "January" },
- *    active: { day: 3, month: "January" }
- *  }
- * ```
- * The function also works for nested structures:
- * ```
- *   toggleable({first_level: "foo", second_level: {nested_member: "nested"}}, {second_level: {nested_member: "another nested thing"}})
- * ```
- * Which returns:
- * ```
- *   Toggleable<_> {
- *     inactive: {first_level: "foo", second_level: {nested_member: "nested"}},
- *     active: { first_level: "foo", second_level: {nested_member: "another nested thing"}}
- *   }
  * ```
  */
-export function toggleable<T extends Object>(inactive: T, modifications: DeepPartial<T>): Toggleable<T> {
+export function toggleable<T extends object>(
-    let active: T = merge(inactive, modifications) as T;
+    props: ToggleableProps<T>
-    return { active: active, inactive: inactive };
+): 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

@@ -13,44 +13,50 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
         header: interactive({
             base: {
                 ...text(layer, "sans", { size: "sm" }),
-                secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
+                secondaryText: text(layer, "sans", {
+                    size: "sm",
+                    color: "#aaaaaa",
+                }),
                 secondaryTextSpacing: 10,
                 padding: { left: 8, right: 8, top: 2, bottom: 2 },
                 cornerRadius: 6,
                 background: background(layer, "on"),
-                border: border(layer, "on", { overlay: true })
+                border: border(layer, "on", { overlay: true }),
             },
             state: {
                 hovered: {
                     background: background(layer, "hovered"),
                     ...text(layer, "sans", "hovered", { size: "sm" }),
-                }
+                },
-            }
+            },
-        })
+        }),
-        ,
         sectionHeader: {
             ...text(layer, "sans", { size: "sm" }),
             padding: { left: 8, right: 8, top: 8, bottom: 8 },
         },
-        item: toggleable(interactive({
+        item: toggleable(
+            interactive({
                 base: {
                     ...text(layer, "sans", { size: "sm" }),
                     secondaryTextSpacing: 10,
                     secondaryText: text(layer, "sans", { size: "sm" }),
-                padding: { left: 18, right: 18, top: 2, bottom: 2 }
+                    padding: { left: 18, right: 18, top: 2, bottom: 2 },
-            }, state: {
+                },
+                state: {
                     hovered: {
                         background: background(layer, "hovered"),
                         ...text(layer, "sans", "hovered", { size: "sm" }),
-                }
+                    },
-            }
+                },
-        }), {
+            }),
+            {
                 default: {
                     background: background(layer, "active"),
                 },
                 hovered: {
                     background: background(layer, "active"),
                 },
-        })
+            }
+        ),
     }
 }

styles/src/styleTree/updateNotification.ts

@@ -14,12 +14,13 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
         actionMessage: interactive({
             base: {
                 ...text(layer, "sans", { size: "xs" }),
-                margin: { left: headerPadding, top: 6, bottom: 6 }
+                margin: { left: headerPadding, top: 6, bottom: 6 },
-            }, state: {
+            },
+            state: {
                 hovered: {
                     color: foreground(layer, "hovered"),
-                }
+                },
-            }
+            },
         }),
         dismissButton: interactive({
             base: {
@@ -27,13 +28,13 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
                 iconWidth: 8,
                 iconHeight: 8,
                 buttonWidth: 8,
-                buttonHeight: 8
+                buttonHeight: 8,
-            }, state: {
+            },
+            state: {
                 hovered: {
                     color: foreground(layer, "hovered"),
                 },
             },
-        })
+        }),
-
     }
 }

styles/src/styleTree/welcome.ts

@@ -79,13 +79,14 @@ export default function welcome(colorScheme: ColorScheme) {
                     left: 7,
                     right: 7,
                 },
-                ...text(layer, "sans", "default", interactive_text_size)
+                ...text(layer, "sans", "default", interactive_text_size),
-            }, state: {
+            },
+            state: {
                 hovered: {
                     ...text(layer, "sans", "default", interactive_text_size),
                     background: background(layer, "hovered"),
-                }
+                },
-            }
+            },
         }),
 
         usageNote: {

styles/src/styleTree/workspace.ts

@@ -12,12 +12,13 @@ import {
 import statusBar from "./statusBar"
 import tabBar from "./tabBar"
 import { interactive } from "../element"
-import merge from 'ts-deepmerge';
+import merge from "ts-deepmerge"
 export default function workspace(colorScheme: ColorScheme) {
     const layer = colorScheme.lowest
     const isLight = colorScheme.isLight
     const itemSpacing = 8
-    const titlebarButton = toggleable(interactive({
+    const titlebarButton = toggleable(
+        interactive({
             base: {
                 cornerRadius: 6,
                 padding: {
@@ -29,27 +30,32 @@ export default function workspace(colorScheme: ColorScheme) {
                 ...text(layer, "sans", "variant", { size: "xs" }),
                 background: background(layer, "variant"),
                 border: border(layer),
-        }, state: {
+            },
+            state: {
                 hovered: {
-                ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+                    ...text(layer, "sans", "variant", "hovered", {
+                        size: "xs",
+                    }),
                     background: background(layer, "variant", "hovered"),
                     border: border(layer, "variant", "hovered"),
                 },
                 clicked: {
-                ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
+                    ...text(layer, "sans", "variant", "pressed", {
+                        size: "xs",
+                    }),
                     background: background(layer, "variant", "pressed"),
                     border: border(layer, "variant", "pressed"),
-            }
+                },
-        }
+            },
         }),
         {
             default: {
                 ...text(layer, "sans", "variant", "active", { size: "xs" }),
                 background: background(layer, "variant", "active"),
                 border: border(layer, "variant", "active"),
-            }
             },
-    );
+        }
+    )
     const avatarWidth = 18
     const avatarOuterWidth = avatarWidth + 4
     const followerAvatarWidth = 14
@@ -86,8 +92,7 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
                 cornerRadius: 4,
             },
-            keyboardHint:
+            keyboardHint: interactive({
-                interactive({
                 base: {
                     ...text(layer, "sans", "variant", { size: "sm" }),
                     padding: {
@@ -96,12 +101,13 @@ export default function workspace(colorScheme: ColorScheme) {
                         right: 8,
                         bottom: 3,
                     },
-                        cornerRadius: 8
+                    cornerRadius: 8,
-                    }, state: {
+                },
+                state: {
                     hovered: {
                         ...text(layer, "sans", "active", { size: "sm" }),
-                        }
+                    },
-                    }
+                },
             }),
 
             keyboardHintWidth: 320,
@@ -214,19 +220,16 @@ export default function workspace(colorScheme: ColorScheme) {
 
             // Sign in buttom
             // FlatButton, Variant
-            signInPrompt:
+            signInPrompt: merge(titlebarButton, {
-                merge(titlebarButton,
-                    {
                 inactive: {
                     default: {
                         margin: {
                             left: itemSpacing,
                         },
-                            }
+                    },
-                        }
+                },
             }),
 
-
             // Offline Indicator
             offlineIcon: {
                 color: foreground(layer, "variant"),
@@ -259,14 +262,16 @@ export default function workspace(colorScheme: ColorScheme) {
                     color: foreground(layer, "variant"),
                     iconWidth: 12,
                     buttonWidth: 20,
-                }, state: {
+                },
+                state: {
                     hovered: {
                         background: background(layer, "variant", "hovered"),
                         color: foreground(layer, "variant", "hovered"),
                     },
-                }
+                },
             }),
-            toggleContactsButton: toggleable(interactive({
+            toggleContactsButton: toggleable(
+                interactive({
                     base: {
                         margin: { left: itemSpacing },
                         cornerRadius: 6,
@@ -282,31 +287,32 @@ export default function workspace(colorScheme: ColorScheme) {
                         hovered: {
                             background: background(layer, "variant", "hovered"),
                             color: foreground(layer, "variant", "hovered"),
-                    }
+                        },
-                }
+                    },
                 }),
                 {
                     default: {
                         background: background(layer, "variant", "active"),
-                        color: foreground(layer, "variant", "active")
+                        color: foreground(layer, "variant", "active"),
-                    }
                     },
+                }
             ),
             userMenuButton: merge(titlebarButton, {
                 inactive: {
                     default: {
                         buttonWidth: 20,
-                        iconWidth: 12
+                        iconWidth: 12,
-                    }
+                    },
-                }, active: { // posiewic: these properties are not currently set on main
+                },
+                active: {
+                    // posiewic: these properties are not currently set on main
                     default: {
                         iconWidth: 12,
                         button_width: 20,
-                    }
+                    },
-                }
+                },
             }),
 
-
             toggleContactsBadge: {
                 cornerRadius: 3,
                 padding: 2,
@@ -324,14 +330,14 @@ export default function workspace(colorScheme: ColorScheme) {
             background: background(colorScheme.highest),
             border: border(colorScheme.highest, { bottom: true }),
             itemSpacing: 8,
-            navButton: interactive(
+            navButton: interactive({
-                {
                 base: {
                     color: foreground(colorScheme.highest, "on"),
                     iconWidth: 12,
                     buttonWidth: 24,
                     cornerRadius: 6,
-                    }, state: {
+                },
+                state: {
                     hovered: {
                         color: foreground(colorScheme.highest, "on", "hovered"),
                         background: background(
@@ -341,9 +347,13 @@ export default function workspace(colorScheme: ColorScheme) {
                         ),
                     },
                     disabled: {
-                            color: foreground(colorScheme.highest, "on", "disabled"),
+                        color: foreground(
+                            colorScheme.highest,
+                            "on",
+                            "disabled"
+                        ),
+                    },
                 },
-                    }
             }),
             padding: { left: 8, right: 8, top: 4, bottom: 4 },
         },
@@ -355,13 +365,18 @@ export default function workspace(colorScheme: ColorScheme) {
                 padding: {
                     left: 6,
                     right: 6,
-                }
+                },
-            }, state: {
+            },
+            state: {
                 hovered: {
                     color: foreground(colorScheme.highest, "on", "hovered"),
-                    background: background(colorScheme.highest, "on", "hovered"),
+                    background: background(
+                        colorScheme.highest,
+                        "on",
+                        "hovered"
+                    ),
+                },
             },
-            }
         }),
         disconnectedOverlay: {
             ...text(layer, "sans"),

styles/src/theme/tokens/colorScheme.ts

@@ -1,9 +1,19 @@
-import { SingleBoxShadowToken, SingleColorToken, SingleOtherToken, TokenTypes } from "@tokens-studio/types"
+import {
-import { ColorScheme, Shadow, SyntaxHighlightStyle, ThemeSyntax } from "../colorScheme"
+    SingleBoxShadowToken,
+    SingleColorToken,
+    SingleOtherToken,
+    TokenTypes,
+} from "@tokens-studio/types"
+import {
+    ColorScheme,
+    Shadow,
+    SyntaxHighlightStyle,
+    ThemeSyntax,
+} from "../colorScheme"
 import { LayerToken, layerToken } from "./layer"
 import { PlayersToken, playersToken } from "./players"
 import { colorToken } from "./token"
-import { Syntax } from "../syntax";
+import { Syntax } from "../syntax"
 import editor from "../../styleTree/editor"
 
 interface ColorSchemeTokens {
@@ -18,27 +28,32 @@ interface ColorSchemeTokens {
     syntax?: Partial<ThemeSyntaxColorTokens>
 }
 
-const createShadowToken = (shadow: Shadow, tokenName: string): SingleBoxShadowToken => {
+const createShadowToken = (
+    shadow: Shadow,
+    tokenName: string
+): SingleBoxShadowToken => {
     return {
         name: tokenName,
         type: TokenTypes.BOX_SHADOW,
-        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`
+        value: `${shadow.offset[0]}px ${shadow.offset[1]}px ${shadow.blur}px 0px ${shadow.color}`,
-    };
+    }
-};
+}
 
 const popoverShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
-    const shadow = colorScheme.popoverShadow;
+    const shadow = colorScheme.popoverShadow
-    return createShadowToken(shadow, "popoverShadow");
+    return createShadowToken(shadow, "popoverShadow")
-};
+}
 
 const modalShadowToken = (colorScheme: ColorScheme): SingleBoxShadowToken => {
-    const shadow = colorScheme.modalShadow;
+    const shadow = colorScheme.modalShadow
-    return createShadowToken(shadow, "modalShadow");
+    return createShadowToken(shadow, "modalShadow")
-};
+}
 
 type ThemeSyntaxColorTokens = Record<keyof ThemeSyntax, SingleColorToken>
 
-function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens {
+function syntaxHighlightStyleColorTokens(
+    syntax: Syntax
+): ThemeSyntaxColorTokens {
     const styleKeys = Object.keys(syntax) as (keyof Syntax)[]
 
     return styleKeys.reduce((acc, styleKey) => {
@@ -46,13 +61,16 @@ function syntaxHighlightStyleColorTokens(syntax: Syntax): ThemeSyntaxColorTokens
         // This can happen because we have a "constructor" property on the syntax object
         // and a "constructor" property on the prototype of the syntax object
         // To work around this just assert that the type of the style is not a function
-        if (!syntax[styleKey] || typeof syntax[styleKey] === 'function') return acc;
+        if (!syntax[styleKey] || typeof syntax[styleKey] === "function")
-        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>;
+            return acc
-        return { ...acc, [styleKey]: colorToken(styleKey, color) };
+        const { color } = syntax[styleKey] as Required<SyntaxHighlightStyle>
-    }, {} as ThemeSyntaxColorTokens);
+        return { ...acc, [styleKey]: colorToken(styleKey, color) }
+    }, {} as ThemeSyntaxColorTokens)
 }
 
-const syntaxTokens = (colorScheme: ColorScheme): ColorSchemeTokens['syntax'] => {
+const syntaxTokens = (
+    colorScheme: ColorScheme
+): ColorSchemeTokens["syntax"] => {
     const syntax = editor(colorScheme).syntax
 
     return syntaxHighlightStyleColorTokens(syntax)

styles/src/theme/tokens/layer.ts

@@ -1,11 +1,11 @@
-import { SingleColorToken } from "@tokens-studio/types";
+import { SingleColorToken } from "@tokens-studio/types"
-import { Layer, Style, StyleSet } from "../colorScheme";
+import { Layer, Style, StyleSet } from "../colorScheme"
-import { colorToken } from "./token";
+import { colorToken } from "./token"
 
 interface StyleToken {
-    background: SingleColorToken,
+    background: SingleColorToken
-    border: SingleColorToken,
+    border: SingleColorToken
-    foreground: SingleColorToken,
+    foreground: SingleColorToken
 }
 
 interface StyleSetToken {
@@ -37,24 +37,27 @@ export const styleToken = (style: Style, name: string): StyleToken => {
     return token
 }
 
-export const styleSetToken = (styleSet: StyleSet, name: string): StyleSetToken => {
+export const styleSetToken = (
-    const token: StyleSetToken = {} as StyleSetToken;
+    styleSet: StyleSet,
+    name: string
+): StyleSetToken => {
+    const token: StyleSetToken = {} as StyleSetToken
 
     for (const style in styleSet) {
-        const s = style as keyof StyleSet;
+        const s = style as keyof StyleSet
-        token[s] = styleToken(styleSet[s], `${name}${style}`);
+        token[s] = styleToken(styleSet[s], `${name}${style}`)
     }
 
-    return token;
+    return token
 }
 
 export const layerToken = (layer: Layer, name: string): LayerToken => {
-    const token: LayerToken = {} as LayerToken;
+    const token: LayerToken = {} as LayerToken
 
     for (const styleSet in layer) {
-        const s = styleSet as keyof Layer;
+        const s = styleSet as keyof Layer
-        token[s] = styleSetToken(layer[s], `${name}${styleSet}`);
+        token[s] = styleSetToken(layer[s], `${name}${styleSet}`)
     }
 
-    return token;
+    return token
 }

styles/src/theme/tokens/players.ts

@@ -6,13 +6,21 @@ export type PlayerToken = Record<"selection" | "cursor", SingleColorToken>
 
 export type PlayersToken = Record<keyof Players, PlayerToken>
 
-function buildPlayerToken(colorScheme: ColorScheme, index: number): PlayerToken {
+function buildPlayerToken(
-
+    colorScheme: ColorScheme,
+    index: number
+): PlayerToken {
     const playerNumber = index.toString() as keyof Players
 
     return {
-        selection: colorToken(`player${index}Selection`, colorScheme.players[playerNumber].selection),
+        selection: colorToken(
-        cursor: colorToken(`player${index}Cursor`, colorScheme.players[playerNumber].cursor),
+            `player${index}Selection`,
+            colorScheme.players[playerNumber].selection
+        ),
+        cursor: colorToken(
+            `player${index}Cursor`,
+            colorScheme.players[playerNumber].cursor
+        ),
     }
 }
 
@@ -24,5 +32,5 @@ export const playersToken = (colorScheme: ColorScheme): PlayersToken => ({
     "4": buildPlayerToken(colorScheme, 4),
     "5": buildPlayerToken(colorScheme, 5),
     "6": buildPlayerToken(colorScheme, 6),
-    "7": buildPlayerToken(colorScheme, 7)
+    "7": buildPlayerToken(colorScheme, 7),
 })

styles/src/theme/tokens/token.ts

@@ -1,6 +1,10 @@
 import { SingleColorToken, TokenTypes } from "@tokens-studio/types"
 
-export function colorToken(name: string, value: string, description?: string): SingleColorToken {
+export function colorToken(
+    name: string,
+    value: string,
+    description?: string
+): SingleColorToken {
     const token: SingleColorToken = {
         name,
         type: TokenTypes.COLOR,
@@ -8,7 +12,8 @@ export function colorToken(name: string, value: string, description?: string): S
         description,
     }
 
-    if (!token.value || token.value === '') throw new Error("Color token must have a value")
+    if (!token.value || token.value === "")
+        throw new Error("Color token must have a value")
 
     return token
 }

styles/src/utils/slugify.ts

@@ -1 +1,10 @@
-export function slugify(t: string): string { return t.toString().toLowerCase().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '').replace(/\-\-+/g, '-').replace(/^-+/, '').replace(/-+$/, '') }
+export function slugify(t: string): string {
+    return t
+        .toString()
+        .toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^\w\-]+/g, "")
+        .replace(/\-\-+/g, "-")
+        .replace(/^-+/, "")
+        .replace(/-+$/, "")
+}

styles/tsconfig.json

@@ -23,30 +23,14 @@
         "skipLibCheck": true,
         "baseUrl": ".",
         "paths": {
-            "@/*": [
+            "@/*": ["./*"],
-                "./*"
+            "@element/*": ["./src/element/*"],
-            ],
+            "@component/*": ["./src/component/*"],
-            "@element/*": [
+            "@styleTree/*": ["./src/styleTree/*"],
-                "./src/element/*"
+            "@theme/*": ["./src/theme/*"],
-            ],
+            "@themes/*": ["./src/themes/*"],
-            "@component/*": [
+            "@util/*": ["./src/util/*"]
-                "./src/component/*"
-            ],
-            "@styleTree/*": [
-                "./src/styleTree/*"
-            ],
-            "@theme/*": [
-                "./src/theme/*"
-            ],
-            "@themes/*": [
-                "./src/themes/*"
-            ],
-            "@util/*": [
-                "./src/util/*"
-            ]
         }
     },
-    "exclude": [
+    "exclude": ["node_modules"]
-        "node_modules"
-    ]
 }

styles/vitest.config.ts

@@ -1,8 +1,8 @@
-import { configDefaults, defineConfig } from 'vitest/config'
+import { configDefaults, defineConfig } from "vitest/config"
 
 export default defineConfig({
     test: {
-        exclude: [...configDefaults.exclude, 'target/*'],
+        exclude: [...configDefaults.exclude, "target/*"],
-        include: ['src/**/*.{spec,test}.ts'],
+        include: ["src/**/*.{spec,test}.ts"],
     },
 })