From 9d9bbfdabfb04389beb7989babed076369ce3cb5 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 21 Jun 2023 13:58:54 -0400 Subject: [PATCH] Format --- styles/src/buildTokens.ts | 86 +++++++------- styles/src/element/interactive.ts | 118 ++++++++++---------- styles/src/element/toggle.ts | 30 ++--- styles/src/styleTree/commandPalette.ts | 6 +- styles/src/styleTree/contactList.ts | 78 ++++++------- styles/src/styleTree/contextMenu.ts | 56 +++++----- styles/src/styleTree/editor.ts | 60 +++++----- styles/src/styleTree/picker.ts | 72 ++++++------ styles/src/styleTree/projectPanel.ts | 11 +- styles/src/styleTree/search.ts | 62 +++++----- styles/src/styleTree/statusBar.ts | 41 ++++--- styles/src/styleTree/tabBar.ts | 37 +++--- styles/src/styleTree/toolbarDropdownMenu.ts | 36 +++--- styles/src/styleTree/workspace.ts | 106 +++++++++--------- 14 files changed, 387 insertions(+), 412 deletions(-) diff --git a/styles/src/buildTokens.ts b/styles/src/buildTokens.ts index 0cf1ea037e779818d88d05383b1b8fffd6337ade..6c6acd2f2278aef4aa08ab54068f94dc5fc15223 100644 --- a/styles/src/buildTokens.ts +++ b/styles/src/buildTokens.ts @@ -1,13 +1,13 @@ -import * as fs from "fs"; -import * as path from "path"; -import { ColorScheme, createColorScheme } from "./common"; -import { themes } from "./themes"; -import { slugify } from "./utils/slugify"; -import { colorSchemeTokens } from "./theme/tokens/colorScheme"; +import * as fs from "fs" +import * as path from "path" +import { ColorScheme, createColorScheme } from "./common" +import { themes } from "./themes" +import { slugify } from "./utils/slugify" +import { colorSchemeTokens } from "./theme/tokens/colorScheme" -const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens"); -const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json"); -const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json"); +const TOKENS_DIRECTORY = path.join(__dirname, "..", "target", "tokens") +const TOKENS_FILE = path.join(TOKENS_DIRECTORY, "$themes.json") +const METADATA_FILE = path.join(TOKENS_DIRECTORY, "$metadata.json") function clearTokens(tokensDirectory: string) { if (!fs.existsSync(tokensDirectory)) { @@ -22,64 +22,66 @@ function clearTokens(tokensDirectory: string) { } type TokenSet = { - id: string; - name: string; - selectedTokenSets: { [key: string]: "enabled" }; -}; + id: string + name: string + selectedTokenSets: { [key: string]: "enabled" } +} -function buildTokenSetOrder(colorSchemes: ColorScheme[]): { tokenSetOrder: string[] } { - const tokenSetOrder: string[] = colorSchemes.map( - (scheme) => scheme.name.toLowerCase().replace(/\s+/g, "_") - ); - return { tokenSetOrder }; +function buildTokenSetOrder(colorSchemes: ColorScheme[]): { + tokenSetOrder: string[] +} { + const tokenSetOrder: string[] = colorSchemes.map((scheme) => + scheme.name.toLowerCase().replace(/\s+/g, "_") + ) + return { tokenSetOrder } } function buildThemesIndex(colorSchemes: ColorScheme[]): TokenSet[] { const themesIndex: TokenSet[] = colorSchemes.map((scheme, index) => { const id = `${scheme.isLight ? "light" : "dark"}_${scheme.name .toLowerCase() - .replace(/\s+/g, "_")}_${index}`; - const selectedTokenSets: { [key: string]: "enabled" } = {}; - const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_"); - selectedTokenSets[tokenSet] = "enabled"; + .replace(/\s+/g, "_")}_${index}` + const selectedTokenSets: { [key: string]: "enabled" } = {} + const tokenSet = scheme.name.toLowerCase().replace(/\s+/g, "_") + selectedTokenSets[tokenSet] = "enabled" return { id, name: `${scheme.name} - ${scheme.isLight ? "Light" : "Dark"}`, selectedTokenSets, - }; - }); + } + }) - return themesIndex; + return themesIndex } function writeTokens(colorSchemes: ColorScheme[], tokensDirectory: string) { - clearTokens(tokensDirectory); + clearTokens(tokensDirectory) for (const colorScheme of colorSchemes) { - const fileName = slugify(colorScheme.name) + ".json"; - const tokens = colorSchemeTokens(colorScheme); - const tokensJSON = JSON.stringify(tokens, null, 2); - const outPath = path.join(tokensDirectory, fileName); - fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 }); - console.log(`- ${outPath} created`); + const fileName = slugify(colorScheme.name) + ".json" + const tokens = colorSchemeTokens(colorScheme) + const tokensJSON = JSON.stringify(tokens, null, 2) + const outPath = path.join(tokensDirectory, fileName) + fs.writeFileSync(outPath, tokensJSON, { mode: 0o644 }) + console.log(`- ${outPath} created`) } - const themeIndexData = buildThemesIndex(colorSchemes); + const themeIndexData = buildThemesIndex(colorSchemes) - const themesJSON = JSON.stringify(themeIndexData, null, 2); - fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 }); - console.log(`- ${TOKENS_FILE} created`); + const themesJSON = JSON.stringify(themeIndexData, null, 2) + fs.writeFileSync(TOKENS_FILE, themesJSON, { mode: 0o644 }) + console.log(`- ${TOKENS_FILE} created`) - const tokenSetOrderData = buildTokenSetOrder(colorSchemes); + const tokenSetOrderData = buildTokenSetOrder(colorSchemes) - const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2); - fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 }); - console.log(`- ${METADATA_FILE} created`); + const metadataJSON = JSON.stringify(tokenSetOrderData, null, 2) + fs.writeFileSync(METADATA_FILE, metadataJSON, { mode: 0o644 }) + console.log(`- ${METADATA_FILE} created`) } const colorSchemes: ColorScheme[] = themes.map((theme) => createColorScheme(theme) -); +) -writeTokens(colorSchemes, TOKENS_DIRECTORY); +writeTokens(colorSchemes, TOKENS_DIRECTORY) diff --git a/styles/src/element/interactive.ts b/styles/src/element/interactive.ts index bd90e28aadb2b515cca4c5b626dd7e0b005fa373..1c0f393cff5041e27fb4e295b4ead5f1a2c43c75 100644 --- a/styles/src/element/interactive.ts +++ b/styles/src/element/interactive.ts @@ -2,28 +2,28 @@ import merge from "ts-deepmerge" import { DeepPartial } from "utility-types" type InteractiveState = - | "default" - | "hovered" - | "clicked" - | "selected" - | "disabled" + | "default" + | "hovered" + | "clicked" + | "selected" + | "disabled" type Interactive = { - default: T - hovered?: T - clicked?: T - selected?: T - disabled?: T + default: T + hovered?: T + clicked?: T + selected?: T + disabled?: T } export const NO_DEFAULT_OR_BASE_ERROR = - "An interactive object must have a default state, or a base property." + "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." + "An interactive object must have a default and at least one other state." interface InteractiveProps { - base?: T - state: Partial>> + base?: T + state: Partial>> } /** @@ -38,60 +38,60 @@ interface InteractiveProps { * @returns Interactive object with fields from `base` and `state`. */ export function interactive({ - base, - state, + base, + state, }: InteractiveProps): Interactive { - if (!base && !state.default) throw new Error(NO_DEFAULT_OR_BASE_ERROR) + 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 - } else { - defaultState = base ? base : (state.default as T) - } + if (state.default && base) { + defaultState = merge(base, state.default) as T + } else { + defaultState = base ? base : (state.default as T) + } - let interactiveObj: Interactive = { - default: defaultState, - } + let interactiveObj: Interactive = { + default: defaultState, + } - let stateCount = 0 + let stateCount = 0 - if (state.hovered !== undefined) { - interactiveObj.hovered = merge( - interactiveObj.default, - state.hovered - ) as T - stateCount++ - } + if (state.hovered !== undefined) { + interactiveObj.hovered = merge( + interactiveObj.default, + state.hovered + ) as T + stateCount++ + } - if (state.clicked !== undefined) { - interactiveObj.clicked = merge( - interactiveObj.default, - state.clicked - ) as T - stateCount++ - } + if (state.clicked !== undefined) { + interactiveObj.clicked = merge( + interactiveObj.default, + state.clicked + ) as T + stateCount++ + } - if (state.selected !== undefined) { - interactiveObj.selected = merge( - interactiveObj.default, - state.selected - ) as T - stateCount++ - } + if (state.selected !== undefined) { + interactiveObj.selected = merge( + interactiveObj.default, + state.selected + ) as T + stateCount++ + } - if (state.disabled !== undefined) { - interactiveObj.disabled = merge( - interactiveObj.default, - state.disabled - ) as T - stateCount++ - } + if (state.disabled !== undefined) { + interactiveObj.disabled = merge( + interactiveObj.default, + state.disabled + ) as T + stateCount++ + } - if (stateCount < 1) { - throw new Error(NOT_ENOUGH_STATES_ERROR) - } + if (stateCount < 1) { + throw new Error(NOT_ENOUGH_STATES_ERROR) + } - return interactiveObj + return interactiveObj } diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts index cbf28b71e7050f2e72e831618f3bf5bbac6c376f..ead8f1e8248d16241706d2098067a913d8737917 100644 --- a/styles/src/element/toggle.ts +++ b/styles/src/element/toggle.ts @@ -6,12 +6,12 @@ type ToggleState = "inactive" | "active" type Toggleable = Record export const NO_INACTIVE_OR_BASE_ERROR = - "A toggleable object must have an inactive state, or a base property." + "A toggleable object must have an inactive state, or a base property." export const NO_ACTIVE_ERROR = "A toggleable object must have an active state." interface ToggleableProps { - base?: T - state: Partial>> + base?: T + state: Partial>> } /** @@ -28,20 +28,20 @@ interface ToggleableProps { * ``` */ export function toggleable( - props: ToggleableProps + props: ToggleableProps ): Toggleable { - const { base, state } = props + 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) + 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 inactiveState = base + ? ((state.inactive ? merge(base, state.inactive) : base) as T) + : (state.inactive as T) - const toggleObj: Toggleable = { - inactive: inactiveState, - active: merge(base ?? {}, state.active) as T, - } - return toggleObj + const toggleObj: Toggleable = { + inactive: inactiveState, + active: merge(base ?? {}, state.active) as T, + } + return toggleObj } diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 5389a775ed0ae564335cdc1d1b3ebad6f2c31e0b..5d4b7373c36169de47219f357a27046acf59d8b1 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -27,8 +27,8 @@ export default function commandPalette(colorScheme: ColorScheme) { active: { text: text(layer, "mono", "on", "default", { size: "xs" }), background: withOpacity(background(layer, "on"), 0.2), - } - } + }, + }, }) return { @@ -37,6 +37,6 @@ export default function commandPalette(colorScheme: ColorScheme) { key: { inactive: { ...key.inactive }, active: key.active, - } + }, } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index cee17219c82925629a06fd1fda4c6e31bec1a42a..88ae04277eea5e0b8417da48f38495d513a8a03e 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -88,7 +88,7 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "pressed"), - } + }, }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place. }), state: { @@ -102,9 +102,9 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "pressed"), - } - } - } + }, + }, + }, }), leaveCall: interactive({ base: { @@ -190,55 +190,51 @@ export default function contactsPanel(colorScheme: ColorScheme) { ...text(layer, "mono", "variant", { size: "xs" }), }, treeBranch: toggleable({ - base: - interactive({ - base: { + base: interactive({ + base: { + color: borderColor(layer), + width: 1, + }, + state: { + hovered: { color: borderColor(layer), - width: 1, }, - state: { - hovered: { - color: borderColor(layer), - }, - }, - }), + }, + }), state: { active: { default: { color: borderColor(layer), }, - } - } - } - ), + }, + }, + }), projectRow: toggleable({ - base: - interactive({ - base: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, - }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), - }, + base: interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, }, - state: { - hovered: { - background: background(layer, "hovered"), - }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), }, - }), + }, + state: { + hovered: { + background: background(layer, "hovered"), + }, + }, + }), state: { active: { default: { background: background(layer, "active") }, - } - } - } - ), + }, + }, + }), } } diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index a217018c977f75e8483921387acf602c549c2482..a59284c43a4a096e0cd7a739dc5b76ab0158ded5 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -12,39 +12,38 @@ export default function contextMenu(colorScheme: ColorScheme) { border: border(layer), keystrokeMargin: 30, item: toggleable({ - base: - interactive({ - base: { - iconSpacing: 8, - iconWidth: 14, - padding: { left: 6, right: 6, top: 2, bottom: 2 }, - cornerRadius: 6, - label: text(layer, "sans", { size: "sm" }), + base: interactive({ + base: { + iconSpacing: 8, + iconWidth: 14, + padding: { left: 6, right: 6, top: 2, bottom: 2 }, + cornerRadius: 6, + label: text(layer, "sans", { size: "sm" }), + keystroke: { + ...text(layer, "sans", "variant", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + label: text(layer, "sans", "hovered", { size: "sm" }), keystroke: { - ...text(layer, "sans", "variant", { + ...text(layer, "sans", "hovered", { size: "sm", weight: "bold", }), padding: { left: 3, right: 3 }, }, }, - state: { - hovered: { - background: background(layer, "hovered"), - label: text(layer, "sans", "hovered", { size: "sm" }), - keystroke: { - ...text(layer, "sans", "hovered", { - size: "sm", - weight: "bold", - }), - padding: { left: 3, right: 3 }, - }, - }, - clicked: { - background: background(layer, "pressed"), - }, + clicked: { + background: background(layer, "pressed"), }, - }), + }, + }), state: { active: { default: { @@ -56,10 +55,9 @@ export default function contextMenu(colorScheme: ColorScheme) { clicked: { background: background(layer, "pressed"), }, - } - } - } - ), + }, + }, + }), separator: { background: borderColor(layer), diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 62792f6febaade285aa9809de59748548c6e7e97..c53f3ba2ff54d7ec2c48547f4bd77236cad85b77 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -50,20 +50,19 @@ export default function editor(colorScheme: ColorScheme) { suggestion: syntax.predictive, codeActions: { indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), + base: interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + hovered: { + color: foreground(layer, "variant", "hovered"), }, - state: { - hovered: { - color: foreground(layer, "variant", "hovered"), - }, - clicked: { - color: foreground(layer, "variant", "pressed"), - }, + clicked: { + color: foreground(layer, "variant", "pressed"), }, - }), + }, + }), state: { active: { default: { @@ -75,10 +74,9 @@ export default function editor(colorScheme: ColorScheme) { clicked: { color: foreground(layer, "accent", "pressed"), }, - } - } - } - ), + }, + }, + }), verticalScale: 0.55, }, @@ -87,20 +85,19 @@ export default function editor(colorScheme: ColorScheme) { foldedIcon: "icons/chevron_right_8.svg", foldableIcon: "icons/chevron_down_8.svg", indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), + base: interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + hovered: { + color: foreground(layer, "on"), }, - state: { - hovered: { - color: foreground(layer, "on"), - }, - clicked: { - color: foreground(layer, "base"), - }, + clicked: { + color: foreground(layer, "base"), }, - }), + }, + }), state: { active: { default: { @@ -109,10 +106,9 @@ export default function editor(colorScheme: ColorScheme) { hovered: { color: foreground(layer, "variant"), }, - } - } - } - ), + }, + }, + }), ellipses: { textColor: colorScheme.ramps.neutral(0.71).hex(), cornerRadiusFactor: 0.15, diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 57ee71efb40f1d96f44f45bb6bd00ac75f6e5ea0..5501bd4df2f5cd0cd21bcf53f5aa5d307e6ed0e6 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -40,41 +40,40 @@ export default function picker(colorScheme: ColorScheme): any { padding: {}, }, item: toggleable({ - base: - interactive({ - base: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, - text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { - weight: "bold", - }), + base: interactive({ + base: { + padding: { + bottom: 4, + left: 12, + right: 12, + top: 4, }, - state: { - hovered: { - background: withOpacity( - background(layer, "hovered"), - 0.5 - ), - }, - clicked: { - background: withOpacity( - background(layer, "pressed"), - 0.5 - ), - }, + margin: { + top: 1, + left: 4, + right: 4, }, - }), + cornerRadius: 8, + text: text(layer, "sans", "variant"), + highlightText: text(layer, "sans", "accent", { + weight: "bold", + }), + }, + state: { + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + clicked: { + background: withOpacity( + background(layer, "pressed"), + 0.5 + ), + }, + }, + }), state: { active: { default: { @@ -95,10 +94,9 @@ export default function picker(colorScheme: ColorScheme): any { 0.5 ), }, - } - } - } - ), + }, + }, + }), inputEditor, emptyInputEditor, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 2c94a51dbaded161bfffa755f1052b08a16c1f7e..6bec9512883976e60d110d80d3feba294260ae04 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -43,7 +43,7 @@ export default function projectPanel(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "variant", "pressed"), - } + }, }, }) @@ -52,7 +52,7 @@ export default function projectPanel(colorScheme: ColorScheme) { state: { active: interactive({ base: { - ...default_entry + ...default_entry, }, state: { default: { @@ -66,9 +66,8 @@ export default function projectPanel(colorScheme: ColorScheme) { }, }, }), - } - } - ) + }, + }) return { openProjectButton: interactive({ @@ -99,7 +98,7 @@ export default function projectPanel(colorScheme: ColorScheme) { ...text(layer, "sans", "default", { size: "sm" }), background: background(layer, "pressed"), border: border(layer, "active"), - } + }, }, }), background: background(layer), diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index 40816e673c774e153ca30175d306c7ff025b1987..b471e6cbdab31249acd93bd13fda824f4343fa13 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -37,36 +37,35 @@ export default function search(colorScheme: ColorScheme) { // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive matchBackground: withOpacity(foreground(layer, "accent"), 0.4), optionButton: toggleable({ - base: - interactive({ - base: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, + base: interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, }, - state: { - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), - }, - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), - }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, }, - }), + }, + state: { + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + }, + }), state: { active: { default: { @@ -78,10 +77,9 @@ export default function search(colorScheme: ColorScheme) { clicked: { ...text(layer, "mono", "accent", "pressed"), }, - } - } - } - ), + }, + }, + }), editor, invalidEditor: { ...editor, diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 636da15badf7c6c1569a5818c56f73706287108c..339e2e40cf25535ac5e682b059bbe8e504e61bbf 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -108,25 +108,24 @@ export default function statusBar(colorScheme: ColorScheme) { groupBottom: {}, groupRight: {}, button: toggleable({ - base: - interactive({ - base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, + base: interactive({ + base: { + ...statusContainer, + iconSize: 16, + iconColor: foreground(layer, "variant"), + label: { + margin: { left: 6 }, + ...text(layer, "sans", { size: "sm" }), }, - state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - }, + }, + state: { + hovered: { + iconColor: foreground(layer, "hovered"), + background: background(layer, "variant"), }, - }), state: - { + }, + }), + state: { active: { default: { iconColor: foreground(layer, "active"), @@ -140,11 +139,9 @@ export default function statusBar(colorScheme: ColorScheme) { iconColor: foreground(layer, "pressed"), background: background(layer, "pressed"), }, - - } - } - } - ), + }, + }, + }), badge: { cornerRadius: 3, padding: 2, diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index 85291c9edb52e8d4b89722014244b61a2a591da8..af35a8fef4c379471f172950f96520626045a14c 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -89,24 +89,22 @@ export default function tabBar(colorScheme: ColorScheme) { }, draggedTab, paneButton: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, + base: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, - clicked: { - color: foreground(layer, "pressed"), - }, + clicked: { + color: foreground(layer, "pressed"), }, - }), - state: - { + }, + }), + state: { active: { default: { color: foreground(layer, "accent"), @@ -117,10 +115,9 @@ export default function tabBar(colorScheme: ColorScheme) { clicked: { color: foreground(layer, "pressed"), }, - } - } - } - ), + }, + }, + }), paneButtonContainer: { background: tab.background, border: { diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 3837f5e1a4f2a96dd5701c61922785e2f6da6404..d82e5f1cde6ed4543dc3bbf4b9f3d224952da33e 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -19,7 +19,7 @@ export default function dropdownMenu(colorScheme: ColorScheme) { secondaryTextSpacing: 10, padding: { left: 8, right: 8, top: 2, bottom: 2 }, cornerRadius: 6, - background: background(layer, "on") + background: background(layer, "on"), }, state: { hovered: { @@ -35,21 +35,20 @@ export default function dropdownMenu(colorScheme: ColorScheme) { padding: { left: 8, right: 8, top: 8, bottom: 8 }, }, item: toggleable({ - base: - interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 }, - }, - state: { - hovered: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, + base: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 }, + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), }, - }), + }, + }), state: { active: { default: { @@ -58,9 +57,8 @@ export default function dropdownMenu(colorScheme: ColorScheme) { hovered: { background: background(layer, "hovered"), }, - } - } - } - ), + }, + }, + }), } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index d835dfe3a138085d69943f595e3dc597171381fe..bd14a3af727beb28252c6b30c928d98d963fe92a 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -18,37 +18,36 @@ export default function workspace(colorScheme: ColorScheme) { const isLight = colorScheme.isLight const itemSpacing = 8 const titlebarButton = toggleable({ - base: - interactive({ - base: { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), + base: interactive({ + base: { + cornerRadius: 6, + padding: { + top: 1, + bottom: 1, + left: 8, + right: 8, }, - state: { - hovered: { - ...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", - }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), + }, + state: { + hovered: { + ...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", + }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), + }, + }, + }), state: { active: { default: { @@ -56,10 +55,9 @@ export default function workspace(colorScheme: ColorScheme) { background: background(layer, "variant", "active"), border: border(layer, "variant", "active"), }, - } - } - } - ) + }, + }, + }) const avatarWidth = 18 const avatarOuterWidth = avatarWidth + 4 const followerAvatarWidth = 14 @@ -275,25 +273,24 @@ export default function workspace(colorScheme: ColorScheme) { }, }), toggleContactsButton: toggleable({ - base: - interactive({ - base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, + base: interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), }, - state: { - clicked: { - background: background(layer, "variant", "pressed"), - }, - hovered: { - background: background(layer, "variant", "hovered"), - }, + hovered: { + background: background(layer, "variant", "hovered"), }, - }), state: - { + }, + }), + state: { active: { default: { background: background(layer, "on", "default"), @@ -303,11 +300,10 @@ export default function workspace(colorScheme: ColorScheme) { }, clicked: { background: background(layer, "on", "pressed"), - } - } - } - } - ), + }, + }, + }, + }), userMenuButton: merge(titlebarButton, { inactive: { default: {