From b1b4b563c2b1adc377cf52cc4477f287f93ececd Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Tue, 20 Jun 2023 15:58:59 -0700 Subject: [PATCH] Add zed typescript settings Remove 2 space indent --- styles/.zed/settings.json | 11 + styles/src/styleTree/commandPalette.ts | 64 +- styles/src/styleTree/contactList.ts | 420 +++++------ styles/src/styleTree/contextMenu.ts | 108 +-- styles/src/styleTree/editor.ts | 562 +++++++-------- styles/src/styleTree/picker.ts | 174 ++--- styles/src/styleTree/projectPanel.ts | 218 +++--- styles/src/styleTree/search.ts | 226 +++--- styles/src/styleTree/statusBar.ts | 268 +++---- styles/src/styleTree/tabBar.ts | 206 +++--- styles/src/styleTree/toolbarDropdownMenu.ts | 110 +-- styles/src/styleTree/workspace.ts | 742 ++++++++++---------- 12 files changed, 1560 insertions(+), 1549 deletions(-) create mode 100644 styles/.zed/settings.json diff --git a/styles/.zed/settings.json b/styles/.zed/settings.json new file mode 100644 index 0000000000000000000000000000000000000000..0a3c761b8e57ee5c3808c0ac3aa0a1db336ff273 --- /dev/null +++ b/styles/.zed/settings.json @@ -0,0 +1,11 @@ +// Folder-specific settings +// +// For a full list of overridable settings, and general information on folder-specific settings, +// see the documentation: https://docs.zed.dev/configuration/configuring-zed#folder-specific-settings +{ + "languages": { + "TypeScript": { + "tab_size": 4 + } + } +} diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index 947e730f55b3e54d4b391cf0ffcbe24c67f0c754..5389a775ed0ae564335cdc1d1b3ebad6f2c31e0b 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -4,39 +4,39 @@ import { text, background } from "./components" import { toggleable } from "../element" export default function commandPalette(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - const key = toggleable({ - base: { - text: text(layer, "mono", "variant", "default", { size: "xs" }), - cornerRadius: 2, - background: background(layer, "on"), - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - margin: { - top: 1, - bottom: 1, - left: 2, - }, - }, - state: { - active: { - text: text(layer, "mono", "on", "default", { size: "xs" }), - background: withOpacity(background(layer, "on"), 0.2), - } - } - }) + const key = toggleable({ + base: { + text: text(layer, "mono", "variant", "default", { size: "xs" }), + cornerRadius: 2, + background: background(layer, "on"), + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, + }, + margin: { + top: 1, + bottom: 1, + left: 2, + }, + }, + state: { + active: { + text: text(layer, "mono", "on", "default", { size: "xs" }), + background: withOpacity(background(layer, "on"), 0.2), + } + } + }) - return { - keystrokeSpacing: 8, - // TODO: This should be a Toggle on the rust side so we don't have to do this - key: { - inactive: { ...key.inactive }, - active: key.active, + return { + keystrokeSpacing: 8, + // TODO: This should be a Toggle on the rust side so we don't have to do this + key: { + inactive: { ...key.inactive }, + active: key.active, + } } - } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index d5ecb1c22400b1036503b50acb602cc65020d828..57034109f1553e8f093dfb22b946ad4485d4573f 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -2,232 +2,232 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function contactsPanel(colorScheme: ColorScheme) { - const nameMargin = 8 - const sidePadding = 12 + const nameMargin = 8 + const sidePadding = 12 - let layer = colorScheme.middle + let layer = colorScheme.middle - const contactButton = { - background: background(layer, "on"), - color: foreground(layer, "on"), - iconWidth: 8, - buttonWidth: 16, - cornerRadius: 8, - } - const projectRow = { - guestAvatarSpacing: 4, - height: 24, - guestAvatar: { - cornerRadius: 8, - width: 14, - }, - name: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - right: 6, - }, - }, - guests: { - margin: { - left: nameMargin, - right: nameMargin, - }, - }, - padding: { - left: sidePadding, - right: sidePadding, - }, - } - - return { - background: background(layer), - padding: { top: 12 }, - userQueryEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - margin: { - left: 6, - }, - }, - userQueryEditorHeight: 33, - addContactButton: { - margin: { left: 6, right: 12 }, - color: foreground(layer, "on"), - buttonWidth: 28, - iconWidth: 16, - }, - rowHeight: 28, - sectionIconSize: 8, - headerRow: toggleable({ - base: interactive({ - base: { - ...text(layer, "mono", { size: "sm" }), - margin: { top: 14 }, - padding: { - left: sidePadding, - right: sidePadding, - }, - 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: { - active: { - default: { - ...text(layer, "mono", "active", { size: "sm" }), - background: background(layer, "active"), - }, - } - } - }), - leaveCall: interactive({ - base: { - background: background(layer), - border: border(layer), - cornerRadius: 6, - margin: { - top: 1, - }, - padding: { - top: 1, - bottom: 1, - left: 7, - right: 7, + const contactButton = { + background: background(layer, "on"), + color: foreground(layer, "on"), + iconWidth: 8, + buttonWidth: 16, + cornerRadius: 8, + } + const projectRow = { + guestAvatarSpacing: 4, + height: 24, + guestAvatar: { + cornerRadius: 8, + width: 14, }, - ...text(layer, "sans", "variant", { size: "xs" }), - }, - state: { - hovered: { - ...text(layer, "sans", "hovered", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "hovered"), + name: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, + right: 6, + }, }, - }, - }), - contactRow: { - inactive: { - default: { - padding: { - left: sidePadding, - right: sidePadding, - }, + guests: { + margin: { + left: nameMargin, + right: nameMargin, + }, }, - }, - active: { - default: { - background: background(layer, "active"), - padding: { + padding: { left: sidePadding, right: sidePadding, - }, }, - }, - }, + } - contactAvatar: { - cornerRadius: 10, - width: 18, - }, - contactStatusFree: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "positive"), - }, - contactStatusBusy: { - cornerRadius: 4, - padding: 4, - margin: { top: 12, left: 12 }, - background: foreground(layer, "negative"), - }, - contactUsername: { - ...text(layer, "mono", { size: "sm" }), - margin: { - left: nameMargin, - }, - }, - contactButtonSpacing: nameMargin, - contactButton: interactive({ - base: { ...contactButton }, - state: { - hovered: { - background: background(layer, "hovered"), + return { + background: background(layer), + padding: { top: 12 }, + userQueryEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + margin: { + left: 6, + }, + }, + userQueryEditorHeight: 33, + addContactButton: { + margin: { left: 6, right: 12 }, + color: foreground(layer, "on"), + buttonWidth: 28, + iconWidth: 16, }, - }, - }), - disabledButton: { - ...contactButton, - background: background(layer, "on"), - color: foreground(layer, "on"), - }, - callingIndicator: { - ...text(layer, "mono", "variant", { size: "xs" }), - }, - treeBranch: toggleable({ - base: - interactive({ - base: { - color: borderColor(layer), - width: 1, - }, - state: { - hovered: { - color: borderColor(layer), + rowHeight: 28, + sectionIconSize: 8, + headerRow: toggleable({ + base: interactive({ + base: { + ...text(layer, "mono", { size: "sm" }), + margin: { top: 14 }, + padding: { + left: sidePadding, + right: sidePadding, + }, + 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: { + active: { + default: { + ...text(layer, "mono", "active", { size: "sm" }), + background: background(layer, "active"), + }, + } + } + }), + leaveCall: interactive({ + base: { + background: background(layer), + border: border(layer), + cornerRadius: 6, + margin: { + top: 1, + }, + padding: { + top: 1, + bottom: 1, + left: 7, + right: 7, + }, + ...text(layer, "sans", "variant", { size: "xs" }), + }, + state: { + hovered: { + ...text(layer, "sans", "hovered", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "hovered"), + }, }, - }, }), - 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, + contactRow: { + inactive: { + default: { + padding: { + left: sidePadding, + right: sidePadding, + }, + }, }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), + active: { + default: { + background: background(layer, "active"), + padding: { + left: sidePadding, + right: sidePadding, + }, + }, + }, + }, + + contactAvatar: { + cornerRadius: 10, + width: 18, + }, + contactStatusFree: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "positive"), + }, + contactStatusBusy: { + cornerRadius: 4, + padding: 4, + margin: { top: 12, left: 12 }, + background: foreground(layer, "negative"), + }, + contactUsername: { + ...text(layer, "mono", { size: "sm" }), + margin: { + left: nameMargin, }, - }, - state: { - hovered: { - background: background(layer, "hovered"), + }, + contactButtonSpacing: nameMargin, + contactButton: interactive({ + base: { ...contactButton }, + state: { + hovered: { + background: background(layer, "hovered"), + }, }, - }, }), - state: { - active: { - default: { background: background(layer, "active") }, + disabledButton: { + ...contactButton, + background: background(layer, "on"), + color: foreground(layer, "on"), + }, + callingIndicator: { + ...text(layer, "mono", "variant", { size: "xs" }), + }, + treeBranch: toggleable({ + base: + interactive({ + base: { + 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" }), + }, + }, + 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 661742f8004ca7a0be6073b64cb4f5b33f41cef5..7b2b9be6c2aaec640aa5df934a0e4401ff131afe 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -3,61 +3,61 @@ import { background, border, borderColor, text } from "./components" import { interactive, toggleable } from "../element" export default function contextMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle - return { - background: background(layer), - cornerRadius: 10, - padding: 4, - shadow: colorScheme.popoverShadow, - 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" }), - 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", "hovered", { - size: "sm", - weight: "bold", + let layer = colorScheme.middle + return { + background: background(layer), + cornerRadius: 10, + padding: 4, + shadow: colorScheme.popoverShadow, + 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" }), + 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", "hovered", { + size: "sm", + weight: "bold", + }), + padding: { left: 3, right: 3 }, + }, + }, + }, }), - padding: { left: 3, right: 3 }, - }, - }, - }, - }), - state: { - active: { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, + state: { + active: { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + } + } } - } - } - ), + ), - separator: { - background: borderColor(layer), - margin: { top: 2, bottom: 2 }, - }, - } + separator: { + background: borderColor(layer), + margin: { top: 2, bottom: 2 }, + }, + } } diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 2437257875c9c07c623e2b819942b6f84b72d9e9..b02366192a9e1e77cec84d256e9fb68d4370f02c 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -7,303 +7,303 @@ import { buildSyntax } from "../theme/syntax" import { interactive, toggleable } from "../element" export default function editor(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.highest + let layer = colorScheme.highest - const autocompleteItem = { - cornerRadius: 6, - padding: { - bottom: 2, - left: 6, - right: 6, - top: 2, - }, - } - - function diagnostic(layer: Layer, styleSet: StyleSets) { - return { - textScaleFactor: 0.857, - header: { - border: border(layer, { - top: true, - }), - }, - message: { - text: text(layer, "sans", styleSet, "default", { size: "sm" }), - highlightText: text(layer, "sans", styleSet, "default", { - size: "sm", - weight: "bold", - }), - }, + const autocompleteItem = { + cornerRadius: 6, + padding: { + bottom: 2, + left: 6, + right: 6, + top: 2, + }, } - } - const syntax = buildSyntax(colorScheme) - - return { - textColor: syntax.primary.color, - background: background(layer), - activeLineBackground: withOpacity(background(layer, "on"), 0.75), - highlightedLineBackground: background(layer, "on"), - // Inline autocomplete suggestions, Co-pilot suggestions, etc. - suggestion: syntax.predictive, - codeActions: { - indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - }, - state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, + function diagnostic(layer: Layer, styleSet: StyleSets) { + return { + textScaleFactor: 0.857, + header: { + border: border(layer, { + top: true, + }), }, - }), - state: { - active: { - default: { - color: foreground(layer, "on"), + message: { + text: text(layer, "sans", styleSet, "default", { size: "sm" }), + highlightText: text(layer, "sans", styleSet, "default", { + size: "sm", + weight: "bold", + }), }, - } } - } - ), + } - verticalScale: 0.55, - }, - folds: { - iconMarginScale: 2.5, - foldedIcon: "icons/chevron_right_8.svg", - foldableIcon: "icons/chevron_down_8.svg", - indicator: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - }, - state: { - clicked: { - color: foreground(layer, "base"), - }, - hovered: { - color: foreground(layer, "on"), - }, - }, - }), - state: { - active: { - 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(), - }, + const syntax = buildSyntax(colorScheme) - hovered: { - color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), - }, + return { + textColor: syntax.primary.color, + background: background(layer), + activeLineBackground: withOpacity(background(layer, "on"), 0.75), + highlightedLineBackground: background(layer, "on"), + // Inline autocomplete suggestions, Co-pilot suggestions, etc. + suggestion: syntax.predictive, + codeActions: { + indicator: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + }, + }), + state: { + active: { + default: { + color: foreground(layer, "on"), + }, + } + } + } + ), - clicked: { - color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), - }, + verticalScale: 0.55, }, - }, - foldBackground: foreground(layer, "variant"), - }, - diff: { - deleted: isLight - ? colorScheme.ramps.red(0.5).hex() - : colorScheme.ramps.red(0.4).hex(), - modified: isLight - ? colorScheme.ramps.yellow(0.5).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), - removedWidthEm: 0.275, - widthEm: 0.15, - cornerRadius: 0.05, - }, - /** Highlights matching occurrences of what is under the cursor - * as well as matched brackets - */ - documentHighlightReadBackground: withOpacity( - foreground(layer, "accent"), - 0.1 - ), - documentHighlightWriteBackground: colorScheme.ramps - .neutral(0.5) - .alpha(0.4) - .hex(), // TODO: This was blend * 2 - errorColor: background(layer, "negative"), - gutterBackground: background(layer), - gutterPaddingFactor: 3.5, - lineNumber: withOpacity(foreground(layer), 0.35), - lineNumberActive: foreground(layer), - renameFade: 0.6, - unnecessaryCodeFade: 0.5, - selection: colorScheme.players[0], - whitespace: colorScheme.ramps.neutral(0.5).hex(), - guestSelections: [ - colorScheme.players[1], - colorScheme.players[2], - colorScheme.players[3], - colorScheme.players[4], - colorScheme.players[5], - colorScheme.players[6], - colorScheme.players[7], - ], - autocomplete: { - background: background(colorScheme.middle), - cornerRadius: 8, - padding: 4, - margin: { - left: -14, - }, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - matchHighlight: foreground(colorScheme.middle, "accent"), - item: autocompleteItem, - hoveredItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "hovered" - ), - background: background(colorScheme.middle, "hovered"), - }, - selectedItem: { - ...autocompleteItem, - matchHighlight: foreground( - colorScheme.middle, - "accent", - "active" + folds: { + iconMarginScale: 2.5, + foldedIcon: "icons/chevron_right_8.svg", + foldableIcon: "icons/chevron_down_8.svg", + indicator: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + }, + state: { + clicked: { + color: foreground(layer, "base"), + }, + hovered: { + color: foreground(layer, "on"), + }, + }, + }), + state: { + active: { + 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(), + }, + + hovered: { + color: colorScheme.ramps.neutral(0.5).alpha(0.5).hex(), + }, + + clicked: { + color: colorScheme.ramps.neutral(0.5).alpha(0.7).hex(), + }, + }, + }, + foldBackground: foreground(layer, "variant"), + }, + diff: { + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.5).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + removedWidthEm: 0.275, + widthEm: 0.15, + cornerRadius: 0.05, + }, + /** Highlights matching occurrences of what is under the cursor + * as well as matched brackets + */ + documentHighlightReadBackground: withOpacity( + foreground(layer, "accent"), + 0.1 ), - background: background(colorScheme.middle, "active"), - }, - }, - diagnosticHeader: { - background: background(colorScheme.middle), - iconWidthFactor: 1.5, - textScaleFactor: 0.857, - border: border(colorScheme.middle, { - bottom: true, - top: true, - }), - code: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 10, + documentHighlightWriteBackground: colorScheme.ramps + .neutral(0.5) + .alpha(0.4) + .hex(), // TODO: This was blend * 2 + errorColor: background(layer, "negative"), + gutterBackground: background(layer), + gutterPaddingFactor: 3.5, + lineNumber: withOpacity(foreground(layer), 0.35), + lineNumberActive: foreground(layer), + renameFade: 0.6, + unnecessaryCodeFade: 0.5, + selection: colorScheme.players[0], + whitespace: colorScheme.ramps.neutral(0.5).hex(), + guestSelections: [ + colorScheme.players[1], + colorScheme.players[2], + colorScheme.players[3], + colorScheme.players[4], + colorScheme.players[5], + colorScheme.players[6], + colorScheme.players[7], + ], + autocomplete: { + background: background(colorScheme.middle), + cornerRadius: 8, + padding: 4, + margin: { + left: -14, + }, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, + matchHighlight: foreground(colorScheme.middle, "accent"), + item: autocompleteItem, + hoveredItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "hovered" + ), + background: background(colorScheme.middle, "hovered"), + }, + selectedItem: { + ...autocompleteItem, + matchHighlight: foreground( + colorScheme.middle, + "accent", + "active" + ), + background: background(colorScheme.middle, "active"), + }, }, - }, - source: { - text: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - }, - message: { - highlightText: text(colorScheme.middle, "sans", { - size: "sm", - weight: "bold", - }), - text: text(colorScheme.middle, "sans", { size: "sm" }), - }, - }, - diagnosticPathHeader: { - background: background(colorScheme.middle), - textScaleFactor: 0.857, - filename: text(colorScheme.middle, "mono", { size: "sm" }), - path: { - ...text(colorScheme.middle, "mono", { size: "sm" }), - margin: { - left: 12, + diagnosticHeader: { + background: background(colorScheme.middle), + iconWidthFactor: 1.5, + textScaleFactor: 0.857, + border: border(colorScheme.middle, { + bottom: true, + top: true, + }), + code: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 10, + }, + }, + source: { + text: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + }, + message: { + highlightText: text(colorScheme.middle, "sans", { + size: "sm", + weight: "bold", + }), + text: text(colorScheme.middle, "sans", { size: "sm" }), + }, }, - }, - }, - errorDiagnostic: diagnostic(colorScheme.middle, "negative"), - warningDiagnostic: diagnostic(colorScheme.middle, "warning"), - informationDiagnostic: diagnostic(colorScheme.middle, "accent"), - hintDiagnostic: diagnostic(colorScheme.middle, "warning"), - invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), - invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), - hoverPopover: hoverPopover(colorScheme), - linkDefinition: { - color: syntax.linkUri.color, - underline: syntax.linkUri.underline, - }, - jumpIcon: interactive({ - base: { - color: foreground(layer, "on"), - iconWidth: 20, - buttonWidth: 20, - cornerRadius: 6, - padding: { - top: 6, - bottom: 6, - left: 6, - right: 6, + diagnosticPathHeader: { + background: background(colorScheme.middle), + textScaleFactor: 0.857, + filename: text(colorScheme.middle, "mono", { size: "sm" }), + path: { + ...text(colorScheme.middle, "mono", { size: "sm" }), + margin: { + left: 12, + }, + }, }, - }, - state: { - hovered: { - background: background(layer, "on", "hovered"), + errorDiagnostic: diagnostic(colorScheme.middle, "negative"), + warningDiagnostic: diagnostic(colorScheme.middle, "warning"), + informationDiagnostic: diagnostic(colorScheme.middle, "accent"), + hintDiagnostic: diagnostic(colorScheme.middle, "warning"), + invalidErrorDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidHintDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidInformationDiagnostic: diagnostic(colorScheme.middle, "base"), + invalidWarningDiagnostic: diagnostic(colorScheme.middle, "base"), + hoverPopover: hoverPopover(colorScheme), + linkDefinition: { + color: syntax.linkUri.color, + underline: syntax.linkUri.underline, }, - }, - }), + jumpIcon: interactive({ + base: { + color: foreground(layer, "on"), + iconWidth: 20, + buttonWidth: 20, + cornerRadius: 6, + padding: { + top: 6, + bottom: 6, + left: 6, + right: 6, + }, + }, + state: { + hovered: { + background: background(layer, "on", "hovered"), + }, + }, + }), - scrollbar: { - width: 12, - minHeightFactor: 1.0, - track: { - border: border(layer, "variant", { left: true }), - }, - thumb: { - background: withOpacity(background(layer, "inverted"), 0.3), - border: { - width: 1, - color: borderColor(layer, "variant"), - top: false, - right: true, - left: true, - bottom: false, + scrollbar: { + width: 12, + minHeightFactor: 1.0, + track: { + border: border(layer, "variant", { left: true }), + }, + thumb: { + background: withOpacity(background(layer, "inverted"), 0.3), + border: { + width: 1, + color: borderColor(layer, "variant"), + top: false, + right: true, + left: true, + bottom: false, + }, + }, + git: { + deleted: isLight + ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), + modified: isLight + ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), + inserted: isLight + ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), + }, }, - }, - git: { - deleted: isLight - ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), - modified: isLight - ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), - inserted: isLight - ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) - : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), - }, - }, - compositionMark: { - underline: { - thickness: 1.0, - color: borderColor(layer), - }, - }, - syntax, - } + compositionMark: { + underline: { + thickness: 1.0, + color: borderColor(layer), + }, + }, + syntax, + } } diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index f7cec1bd4145b9ad54715baa172c23fea6ff03ed..809cd1743ff9f21684407132c7ce734757a01869 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -4,95 +4,95 @@ import { background, border, text } from "./components" import { interactive, toggleable } from "../element" export default function picker(colorScheme: ColorScheme): any { - let layer = colorScheme.lowest - const container = { - background: background(layer), - border: border(layer), - shadow: colorScheme.modalShadow, - cornerRadius: 12, - padding: { - bottom: 4, - }, - } - const inputEditor = { - placeholderText: text(layer, "sans", "on", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "on"), - border: border(layer, { bottom: true }), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - margin: { - bottom: 4, - }, - } - const emptyInputEditor: any = { ...inputEditor } - delete emptyInputEditor.border - delete emptyInputEditor.margin + let layer = colorScheme.lowest + const container = { + background: background(layer), + border: border(layer), + shadow: colorScheme.modalShadow, + cornerRadius: 12, + padding: { + bottom: 4, + }, + } + const inputEditor = { + placeholderText: text(layer, "sans", "on", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "on"), + border: border(layer, { bottom: true }), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, + }, + margin: { + bottom: 4, + }, + } + const emptyInputEditor: any = { ...inputEditor } + delete emptyInputEditor.border + delete emptyInputEditor.margin - return { - ...container, - emptyContainer: { - ...container, - padding: {}, - }, - item: toggleable({ - base: - interactive({ - base: { - padding: { - bottom: 4, - left: 12, - right: 12, - top: 4, - }, - margin: { - top: 1, - left: 4, - right: 4, - }, - cornerRadius: 8, + return { + ...container, + emptyContainer: { + ...container, + 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", + }), + }, + state: { + hovered: { + background: withOpacity( + background(layer, "hovered"), + 0.5 + ), + }, + }, + }), + state: { + active: { + default: { + background: withOpacity( + background(layer, "base", "active"), + 0.5 + ), + //text: text(layer, "sans", "base", "active"), + }, + } + } + } + ), + + inputEditor, + emptyInputEditor, + noMatches: { text: text(layer, "sans", "variant"), - highlightText: text(layer, "sans", "accent", { - weight: "bold", - }), - }, - state: { - hovered: { - background: withOpacity( - background(layer, "hovered"), - 0.5 - ), + padding: { + bottom: 8, + left: 16, + right: 16, + top: 8, }, - }, - }), - state: { - active: { - default: { - background: withOpacity( - background(layer, "base", "active"), - 0.5 - ), - //text: text(layer, "sans", "base", "active"), - }, - } - } + }, } - ), - - inputEditor, - emptyInputEditor, - noMatches: { - text: text(layer, "sans", "variant"), - padding: { - bottom: 8, - left: 16, - right: 16, - top: 8, - }, - }, - } } diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index babd1431fb9400fedea468509315b47af5e3616f..7c37ce6bd3ebbc2f0199171d65ba2121769347e0 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -3,125 +3,125 @@ import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function projectPanel(colorScheme: ColorScheme) { - const { isLight } = colorScheme + const { isLight } = colorScheme - let layer = colorScheme.middle + let layer = colorScheme.middle - let baseEntry = { - height: 22, - iconColor: foreground(layer, "variant"), - iconSize: 7, - iconSpacing: 5, - } - - let status = { - git: { - modified: isLight - ? colorScheme.ramps.yellow(0.6).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.45).hex() - : colorScheme.ramps.green(0.5).hex(), - conflict: isLight - ? colorScheme.ramps.red(0.6).hex() - : colorScheme.ramps.red(0.5).hex(), - }, - } + let baseEntry = { + height: 22, + iconColor: foreground(layer, "variant"), + iconSize: 7, + iconSpacing: 5, + } - let entry = toggleable({ - base: - interactive({ - base: { - ...baseEntry, - text: text(layer, "mono", "variant", { size: "sm" }), - status, + let status = { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.45).hex() + : colorScheme.ramps.green(0.5).hex(), + conflict: isLight + ? colorScheme.ramps.red(0.6).hex() + : colorScheme.ramps.red(0.5).hex(), }, + } + + let entry = toggleable({ + base: + interactive({ + base: { + ...baseEntry, + text: text(layer, "mono", "variant", { size: "sm" }), + status, + }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + }, + }, + }), state: { - hovered: { - background: background(layer, "variant", "hovered"), - }, - }, - }), - state: { - active: { - default: { - /*background: colorScheme.isLight - ? withOpacity(background(layer, "active"), 0.5) - : background(layer, "active") ,*/ // todo posiewic - text: text(layer, "mono", "active", { size: "sm" }), - }, - hovered: { - //background: background(layer, "active"), - text: text(layer, "mono", "active", { size: "sm" }), - }, - } + active: { + default: { + /*background: colorScheme.isLight + ? withOpacity(background(layer, "active"), 0.5) + : background(layer, "active") ,*/ // todo posiewic + text: text(layer, "mono", "active", { size: "sm" }), + }, + hovered: { + //background: background(layer, "active"), + text: text(layer, "mono", "active", { size: "sm" }), + }, + } + } } - } - ) + ) - return { - openProjectButton: interactive({ - base: { + return { + openProjectButton: interactive({ + base: { + background: background(layer), + border: border(layer, "active"), + cornerRadius: 4, + margin: { + top: 16, + left: 16, + right: 16, + }, + padding: { + top: 3, + bottom: 3, + left: 7, + right: 7, + }, + ...text(layer, "sans", "default", { size: "sm" }), + }, + state: { + hovered: { + ...text(layer, "sans", "default", { size: "sm" }), + background: background(layer, "hovered"), + border: border(layer, "active"), + }, + }, + }), background: background(layer), - border: border(layer, "active"), - cornerRadius: 4, - margin: { - top: 16, - left: 16, - right: 16, + padding: { left: 6, right: 6, top: 0, bottom: 6 }, + indentWidth: 12, + entry, + draggedEntry: { + ...baseEntry, + text: text(layer, "mono", "on", { size: "sm" }), + background: withOpacity(background(layer, "on"), 0.9), + border: border(layer), + status, }, - padding: { - top: 3, - bottom: 3, - left: 7, - right: 7, + ignoredEntry: { + ...entry, + iconColor: foreground(layer, "disabled"), + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + iconColor: foreground(layer, "variant"), + }, }, - ...text(layer, "sans", "default", { size: "sm" }), - }, - state: { - hovered: { - ...text(layer, "sans", "default", { size: "sm" }), - background: background(layer, "hovered"), - border: border(layer, "active"), + cutEntry: { + ...entry, + text: text(layer, "mono", "disabled"), + active: { + ...entry.active, + default: { + ...entry.active.default, + background: background(layer, "active"), + text: text(layer, "mono", "disabled", { size: "sm" }), + }, + }, }, - }, - }), - background: background(layer), - padding: { left: 6, right: 6, top: 0, bottom: 6 }, - indentWidth: 12, - entry, - draggedEntry: { - ...baseEntry, - text: text(layer, "mono", "on", { size: "sm" }), - background: withOpacity(background(layer, "on"), 0.9), - border: border(layer), - status, - }, - ignoredEntry: { - ...entry, - iconColor: foreground(layer, "disabled"), - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - iconColor: foreground(layer, "variant"), - }, - }, - cutEntry: { - ...entry, - text: text(layer, "mono", "disabled"), - active: { - ...entry.active, - default: { - ...entry.active.default, - background: background(layer, "active"), - text: text(layer, "mono", "disabled", { size: "sm" }), + filenameEditor: { + background: background(layer, "on"), + text: text(layer, "mono", "on", { size: "sm" }), + selection: colorScheme.players[0], }, - }, - }, - filenameEditor: { - background: background(layer, "on"), - text: text(layer, "mono", "on", { size: "sm" }), - selection: colorScheme.players[0], - }, - } + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index aa015d5cde4509439ca2c1c959d20eb23f87da7e..0123ddee22b40536a823f36e3f437c20bb353b27 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -4,127 +4,127 @@ import { background, border, foreground, text } from "./components" import { interactive, toggleable } from "../element" export default function search(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - // Search input - const editor = { - background: background(layer), - cornerRadius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), - margin: { - right: 12, - }, - padding: { - top: 3, - bottom: 3, - left: 12, - right: 8, - }, - } + // Search input + const editor = { + background: background(layer), + cornerRadius: 8, + minWidth: 200, + maxWidth: 500, + placeholderText: text(layer, "mono", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "default"), + border: border(layer), + margin: { + right: 12, + }, + padding: { + top: 3, + bottom: 3, + left: 12, + right: 8, + }, + } - const includeExcludeEditor = { - ...editor, - minWidth: 100, - maxWidth: 250, - } + const includeExcludeEditor = { + ...editor, + minWidth: 100, + maxWidth: 250, + } - return { - // 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, + return { + // 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, + }, + }, + state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), + }, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), + }, + }, + }), + state: { + active: { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), + }, + } + } + } + ), + editor, + invalidEditor: { + ...editor, + border: border(layer, "negative"), + }, + includeExcludeEditor, + invalidIncludeExcludeEditor: { + ...includeExcludeEditor, + border: border(layer, "negative"), + }, + matchIndex: { + ...text(layer, "mono", "variant"), + padding: { + left: 6, }, + }, + optionButtonGroup: { padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, + left: 12, + right: 12, }, - }, - state: { - clicked: { - ...text(layer, "mono", "on", "pressed"), - background: background(layer, "on", "pressed"), - border: border(layer, "on", "pressed"), + }, + includeExcludeInputs: { + ...text(layer, "mono", "variant"), + padding: { + right: 6, + }, + }, + resultsStatus: { + ...text(layer, "mono", "on"), + size: 18, + }, + dismissButton: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, + }, }, - hovered: { - ...text(layer, "mono", "on", "hovered"), - background: background(layer, "on", "hovered"), - border: border(layer, "on", "hovered"), + state: { + hovered: { + color: foreground(layer, "hovered"), + }, }, - }, }), - state: { - active: { - default: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, - } - } } - ), - editor, - invalidEditor: { - ...editor, - border: border(layer, "negative"), - }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), - }, - matchIndex: { - ...text(layer, "mono", "variant"), - padding: { - left: 6, - }, - }, - optionButtonGroup: { - padding: { - left: 12, - right: 12, - }, - }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), - padding: { - right: 6, - }, - }, - resultsStatus: { - ...text(layer, "mono", "on"), - size: 18, - }, - dismissButton: interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 14, - padding: { - left: 10, - right: 10, - }, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, - }, - }), - } } diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 4c566a5c3a5f099c49d428ffb4b8648526e468eb..e4a48e8215dd2ebed127ed237f2b4faa977cacd5 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -2,147 +2,147 @@ 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 + let layer = colorScheme.lowest - const statusContainer = { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 6, right: 6 }, - } + const statusContainer = { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + } - const diagnosticStatusContainer = { - cornerRadius: 6, - padding: { top: 1, bottom: 1, left: 6, right: 6 }, - } + const diagnosticStatusContainer = { + cornerRadius: 6, + padding: { top: 1, bottom: 1, left: 6, right: 6 }, + } - return { - height: 30, - itemSpacing: 8, - padding: { - top: 1, - bottom: 1, - left: 6, - right: 6, - }, - border: border(layer, { top: true, overlay: true }), - cursorPosition: text(layer, "sans", "variant"), - activeLanguage: interactive({ - base: { - padding: { left: 6, right: 6 }, - ...text(layer, "sans", "variant"), - }, - state: { - hovered: { - ...text(layer, "sans", "on"), + return { + height: 30, + itemSpacing: 8, + padding: { + top: 1, + bottom: 1, + left: 6, + right: 6, }, - }, - }), - autoUpdateProgressMessage: text(layer, "sans", "variant"), - autoUpdateDoneMessage: text(layer, "sans", "variant"), - lspStatus: interactive({ - base: { - ...diagnosticStatusContainer, - iconSpacing: 4, - iconWidth: 14, - height: 18, - message: text(layer, "sans"), - iconColor: foreground(layer), - }, - state: { - hovered: { - message: text(layer, "sans"), - iconColor: foreground(layer), - background: background(layer, "hovered"), - }, - }, - }), - diagnosticMessage: interactive({ - base: { - ...text(layer, "sans"), - }, - state: { hovered: text(layer, "sans", "hovered") }, - }), - diagnosticSummary: interactive({ - base: { - height: 20, - iconWidth: 16, - iconSpacing: 2, - summarySpacing: 6, - text: text(layer, "sans", { size: "sm" }), - iconColorOk: foreground(layer, "variant"), - iconColorWarning: foreground(layer, "warning"), - iconColorError: foreground(layer, "negative"), - containerOk: { - cornerRadius: 6, - padding: { top: 3, bottom: 3, left: 7, right: 7 }, - }, - containerWarning: { - ...diagnosticStatusContainer, - background: background(layer, "warning"), - border: border(layer, "warning"), - }, - containerError: { - ...diagnosticStatusContainer, - background: background(layer, "negative"), - border: border(layer, "negative"), - }, - }, - state: { - hovered: { - iconColorOk: foreground(layer, "on"), - containerOk: { - background: background(layer, "on", "hovered"), - }, - containerWarning: { - background: background(layer, "warning", "hovered"), - border: border(layer, "warning", "hovered"), - }, - containerError: { - background: background(layer, "negative", "hovered"), - border: border(layer, "negative", "hovered"), - }, - }, - }, - }), - panelButtons: { - groupLeft: {}, - groupBottom: {}, - groupRight: {}, - button: toggleable({ - base: - interactive({ + border: border(layer, { top: true, overlay: true }), + cursorPosition: text(layer, "sans", "variant"), + activeLanguage: interactive({ + base: { + padding: { left: 6, right: 6 }, + ...text(layer, "sans", "variant"), + }, + state: { + hovered: { + ...text(layer, "sans", "on"), + }, + }, + }), + autoUpdateProgressMessage: text(layer, "sans", "variant"), + autoUpdateDoneMessage: text(layer, "sans", "variant"), + lspStatus: interactive({ + base: { + ...diagnosticStatusContainer, + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(layer, "sans"), + iconColor: foreground(layer), + }, + state: { + hovered: { + message: text(layer, "sans"), + iconColor: foreground(layer), + background: background(layer, "hovered"), + }, + }, + }), + diagnosticMessage: interactive({ + base: { + ...text(layer, "sans"), + }, + state: { hovered: text(layer, "sans", "hovered") }, + }), + diagnosticSummary: interactive({ base: { - ...statusContainer, - iconSize: 16, - iconColor: foreground(layer, "variant"), - label: { - margin: { left: 6 }, - ...text(layer, "sans", { size: "sm" }), - }, + height: 20, + iconWidth: 16, + iconSpacing: 2, + summarySpacing: 6, + text: text(layer, "sans", { size: "sm" }), + iconColorOk: foreground(layer, "variant"), + iconColorWarning: foreground(layer, "warning"), + iconColorError: foreground(layer, "negative"), + containerOk: { + cornerRadius: 6, + padding: { top: 3, bottom: 3, left: 7, right: 7 }, + }, + containerWarning: { + ...diagnosticStatusContainer, + background: background(layer, "warning"), + border: border(layer, "warning"), + }, + containerError: { + ...diagnosticStatusContainer, + background: background(layer, "negative"), + border: border(layer, "negative"), + }, }, state: { - hovered: { - iconColor: foreground(layer, "hovered"), - background: background(layer, "variant"), - }, + hovered: { + iconColorOk: foreground(layer, "on"), + containerOk: { + background: background(layer, "on", "hovered"), + }, + containerWarning: { + background: background(layer, "warning", "hovered"), + border: border(layer, "warning", "hovered"), + }, + containerError: { + background: background(layer, "negative", "hovered"), + border: border(layer, "negative", "hovered"), + }, + }, }, - }), state: - { - active: { - default: { - iconColor: foreground(layer, "active"), - background: background(layer, "active"), + }), + panelButtons: { + groupLeft: {}, + groupBottom: {}, + groupRight: {}, + button: toggleable({ + 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: + { + active: { + default: { + iconColor: foreground(layer, "active"), + background: background(layer, "active"), + }, + } + } + } + ), + badge: { + cornerRadius: 3, + padding: 2, + margin: { bottom: -1, right: -1 }, + border: border(layer), + background: background(layer, "accent"), }, - } - } - } - ), - badge: { - cornerRadius: 3, - padding: 2, - margin: { bottom: -1, right: -1 }, - border: border(layer), - background: background(layer, "accent"), - }, - }, - } + }, + } } diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index d7b3b58055ae22bca9ed4a6b8cb4ccd2056234dd..f2c99ea736d18d717c865ab1b8d0ff48efcff3bd 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -4,120 +4,120 @@ import { text, border, background, foreground } from "./components" import { interactive, toggleable } from "../element" export default function tabBar(colorScheme: ColorScheme) { - const height = 32 + const height = 32 - let activeLayer = colorScheme.highest - let layer = colorScheme.middle + let activeLayer = colorScheme.highest + let layer = colorScheme.middle - const tab = { - height, - text: text(layer, "sans", "variant", { size: "sm" }), - background: background(layer), - border: border(layer, { - right: true, - bottom: true, - overlay: true, - }), - padding: { - left: 8, - right: 12, - }, - spacing: 8, + const tab = { + height, + text: text(layer, "sans", "variant", { size: "sm" }), + background: background(layer), + border: border(layer, { + right: true, + bottom: true, + overlay: true, + }), + padding: { + left: 8, + right: 12, + }, + spacing: 8, - // Tab type icons (e.g. Project Search) - typeIconWidth: 14, + // Tab type icons (e.g. Project Search) + typeIconWidth: 14, - // Close icons - closeIconWidth: 8, - iconClose: foreground(layer, "variant"), - iconCloseActive: foreground(layer, "hovered"), + // Close icons + closeIconWidth: 8, + iconClose: foreground(layer, "variant"), + iconCloseActive: foreground(layer, "hovered"), - // Indicators - iconConflict: foreground(layer, "warning"), - iconDirty: foreground(layer, "accent"), + // Indicators + iconConflict: foreground(layer, "warning"), + iconDirty: foreground(layer, "accent"), - // When two tabs of the same name are open, a label appears next to them - description: { - margin: { left: 8 }, - ...text(layer, "sans", "disabled", { size: "2xs" }), - }, - } + // When two tabs of the same name are open, a label appears next to them + description: { + margin: { left: 8 }, + ...text(layer, "sans", "disabled", { size: "2xs" }), + }, + } - const activePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(activeLayer, "sans", "active", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const activePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(activeLayer, "sans", "active", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const inactivePaneInactiveTab = { - ...tab, - background: background(layer), - text: text(layer, "sans", "variant", { size: "sm" }), - } + const inactivePaneInactiveTab = { + ...tab, + background: background(layer), + text: text(layer, "sans", "variant", { size: "sm" }), + } - const inactivePaneActiveTab = { - ...tab, - background: background(activeLayer), - text: text(layer, "sans", "variant", { size: "sm" }), - border: { - ...tab.border, - bottom: false, - }, - } + const inactivePaneActiveTab = { + ...tab, + background: background(activeLayer), + text: text(layer, "sans", "variant", { size: "sm" }), + border: { + ...tab.border, + bottom: false, + }, + } - const draggedTab = { - ...activePaneActiveTab, - background: withOpacity(tab.background, 0.9), - border: undefined as any, - shadow: colorScheme.popoverShadow, - } + const draggedTab = { + ...activePaneActiveTab, + background: withOpacity(tab.background, 0.9), + border: undefined as any, + shadow: colorScheme.popoverShadow, + } - return { - height, - background: background(layer), - activePane: { - activeTab: activePaneActiveTab, - inactiveTab: tab, - }, - inactivePane: { - activeTab: inactivePaneActiveTab, - inactiveTab: inactivePaneInactiveTab, - }, - draggedTab, - paneButton: toggleable({ - base: - interactive({ - base: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - }, - state: { - hovered: { - color: foreground(layer, "hovered"), - }, - }, - }), - state: - { - active: { - default: { - color: foreground(layer, "accent"), - }, + return { + height, + background: background(layer), + activePane: { + activeTab: activePaneActiveTab, + inactiveTab: tab, + }, + inactivePane: { + activeTab: inactivePaneActiveTab, + inactiveTab: inactivePaneInactiveTab, + }, + draggedTab, + paneButton: toggleable({ + base: + interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + }, + state: { + hovered: { + color: foreground(layer, "hovered"), + }, + }, + }), + state: + { + active: { + default: { + color: foreground(layer, "accent"), + }, + } + } } - } + ), + paneButtonContainer: { + background: tab.background, + border: { + ...tab.border, + right: false, + }, + }, } - ), - paneButtonContainer: { - background: tab.background, - border: { - ...tab.border, - right: false, - }, - }, - } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 3a870b008fde58e794d7e861a720de2235e71451..b1b28d789e11dd34cb856785648c5f371abccb77 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -2,64 +2,64 @@ 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 + let layer = colorScheme.middle - return { - rowHeight: 30, - background: background(layer), - border: border(layer), - shadow: colorScheme.popoverShadow, - header: interactive({ - base: { - ...text(layer, "sans", { size: "sm" }), - 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 }), - }, - 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({ - 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" }), + return { + rowHeight: 30, + background: background(layer), + border: border(layer), + shadow: colorScheme.popoverShadow, + header: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + 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 }), + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + }, }, - }, }), - state: { - active: { - default: { - background: background(layer, "active"), - }, - hovered: { - background: background(layer, "active"), - }, + sectionHeader: { + ...text(layer, "sans", { size: "sm" }), + 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" }), + }, + }, + }), + state: { + active: { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + } + } } - } + ), } - ), - } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 96f4b8bdbdd355d1a7e4ec0d2c7e483dcee72e22..fdc7657481df832bc189e20c00f2873b036c9361 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -2,406 +2,406 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { toggleable } from "../element" import { - background, - border, - borderColor, - foreground, - svg, - text, + background, + border, + borderColor, + foreground, + svg, + text, } from "./components" import statusBar from "./statusBar" import tabBar from "./tabBar" import { interactive } from "../element" 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({ - 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), - }, - 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", + const layer = colorScheme.lowest + 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), + }, + 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"), + }, + }, }), - background: background(layer, "variant", "pressed"), - border: border(layer, "variant", "pressed"), - }, - }, - }), - state: { - active: { - default: { - ...text(layer, "sans", "variant", "active", { size: "xs" }), - background: background(layer, "variant", "active"), - border: border(layer, "variant", "active"), - }, - } + state: { + active: { + 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 - const followerAvatarOuterWidth = followerAvatarWidth + 4 + ) + const avatarWidth = 18 + const avatarOuterWidth = avatarWidth + 4 + const followerAvatarWidth = 14 + const followerAvatarOuterWidth = followerAvatarWidth + 4 - return { - background: background(colorScheme.lowest), - blankPane: { - logoContainer: { - width: 256, - height: 256, - }, - logo: svg( - withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), - "icons/logo_96.svg", - 256, - 256 - ), + return { + background: background(colorScheme.lowest), + blankPane: { + logoContainer: { + width: 256, + height: 256, + }, + logo: svg( + withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), + "icons/logo_96.svg", + 256, + 256 + ), - logoShadow: svg( - withOpacity( - colorScheme.isLight - ? "#FFFFFF" - : colorScheme.lowest.base.default.background, - colorScheme.isLight ? 1 : 0.6 - ), - "icons/logo_96.svg", - 256, - 256 - ), - keyboardHints: { - margin: { - top: 96, + logoShadow: svg( + withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), + "icons/logo_96.svg", + 256, + 256 + ), + keyboardHints: { + margin: { + top: 96, + }, + cornerRadius: 4, + }, + keyboardHint: interactive({ + base: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8, + }, + state: { + hovered: { + ...text(layer, "sans", "active", { size: "sm" }), + }, + }, + }), + + keyboardHintWidth: 320, }, - cornerRadius: 4, - }, - keyboardHint: interactive({ - base: { - ...text(layer, "sans", "variant", { size: "sm" }), - padding: { - top: 3, - left: 8, - right: 8, - bottom: 3, - }, - cornerRadius: 8, + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, }, - state: { - hovered: { - ...text(layer, "sans", "active", { size: "sm" }), - }, + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), }, - }), - - keyboardHintWidth: 320, - }, - joiningProjectAvatar: { - cornerRadius: 40, - width: 80, - }, - joiningProjectMessage: { - padding: 12, - ...text(layer, "sans", { size: "lg" }), - }, - externalLocationMessage: { - background: background(colorScheme.middle, "accent"), - border: border(colorScheme.middle, "accent"), - cornerRadius: 6, - padding: 12, - margin: { bottom: 8, right: 8 }, - ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), - }, - leaderBorderOpacity: 0.7, - leaderBorderWidth: 2.0, - tabBar: tabBar(colorScheme), - modal: { - margin: { - bottom: 52, - top: 52, - }, - cursor: "Arrow", - }, - zoomedBackground: { - cursor: "Arrow", - background: isLight - ? withOpacity(background(colorScheme.lowest), 0.8) - : withOpacity(background(colorScheme.highest), 0.6), - }, - zoomedPaneForeground: { - margin: 16, - shadow: colorScheme.modalShadow, - border: border(colorScheme.lowest, { overlay: true }), - }, - zoomedPanelForeground: { - margin: 16, - border: border(colorScheme.lowest, { overlay: true }), - }, - dock: { - left: { - border: border(layer, { right: true }), - }, - bottom: { - border: border(layer, { top: true }), - }, - right: { - border: border(layer, { left: true }), - }, - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. - background: background(layer), - border: border(layer, { bottom: true }), - padding: { - left: 80, - right: itemSpacing, - }, - - // Project - title: text(layer, "sans", "variant"), - highlight_color: text(layer, "sans", "active").color, - - // Collaborators - leaderAvatar: { - width: avatarWidth, - outerWidth: avatarOuterWidth, - cornerRadius: avatarWidth / 2, - outerCornerRadius: avatarOuterWidth / 2, - }, - followerAvatar: { - width: followerAvatarWidth, - outerWidth: followerAvatarOuterWidth, - cornerRadius: followerAvatarWidth / 2, - outerCornerRadius: followerAvatarOuterWidth / 2, - }, - inactiveAvatarGrayscale: true, - followerAvatarOverlap: 8, - leaderSelection: { - margin: { - top: 4, - bottom: 4, - }, - padding: { - left: 2, - right: 2, - top: 2, - bottom: 2, + externalLocationMessage: { + background: background(colorScheme.middle, "accent"), + border: border(colorScheme.middle, "accent"), + cornerRadius: 6, + padding: 12, + margin: { bottom: 8, right: 8 }, + ...text(colorScheme.middle, "sans", "accent", { size: "xs" }), }, - cornerRadius: 6, - }, - avatarRibbon: { - height: 3, - width: 12, - // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. - }, - - // Sign in buttom - // FlatButton, Variant - signInPrompt: merge(titlebarButton, { - inactive: { - default: { + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { margin: { - left: itemSpacing, + bottom: 52, + top: 52, }, - }, - }, - }), - - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, + cursor: "Arrow", }, - padding: { - right: 4, + zoomedBackground: { + cursor: "Arrow", + background: isLight + ? withOpacity(background(colorScheme.lowest), 0.8) + : withOpacity(background(colorScheme.highest), 0.6), }, - }, - - // Notice that the collaboration server is out of date - outdatedWarning: { - ...text(layer, "sans", "warning", { size: "xs" }), - background: withOpacity(background(layer, "warning"), 0.3), - border: border(layer, "warning"), - margin: { - left: itemSpacing, - }, - padding: { - left: 8, - right: 8, + zoomedPaneForeground: { + margin: 16, + shadow: colorScheme.modalShadow, + border: border(colorScheme.lowest, { overlay: true }), }, - cornerRadius: 6, - }, - callControl: interactive({ - base: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - }, - state: { - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, + zoomedPanelForeground: { + margin: 16, + border: border(colorScheme.lowest, { overlay: true }), }, - }), - toggleContactsButton: toggleable({ - base: - interactive({ - base: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, + dock: { + left: { + border: border(layer, { right: true }), }, - state: { - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), - }, - hovered: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), - }, + bottom: { + border: border(layer, { top: true }), }, - }), state: - { - active: { - default: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), + right: { + border: border(layer, { left: true }), }, - } - } - } - ), - userMenuButton: merge(titlebarButton, { - inactive: { - default: { - buttonWidth: 20, - iconWidth: 12, - }, }, - active: { - // posiewic: these properties are not currently set on main - default: { - iconWidth: 12, - button_width: 20, - }, + paneDivider: { + color: borderColor(layer), + width: 1, }, - }), + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px border. It's important the content area of the titlebar is evenly sized to vertically center avatar images. + background: background(layer), + border: border(layer, { bottom: true }), + padding: { + left: 80, + right: itemSpacing, + }, - toggleContactsBadge: { - cornerRadius: 3, - padding: 2, - margin: { top: 3, left: 3 }, - border: border(layer), - background: foreground(layer, "accent"), - }, - shareButton: { - ...titlebarButton, - }, - }, + // Project + title: text(layer, "sans", "variant"), + highlight_color: text(layer, "sans", "active").color, - toolbar: { - height: 34, - background: background(colorScheme.highest), - border: border(colorScheme.highest, { bottom: true }), - itemSpacing: 8, - navButton: interactive({ - base: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - }, - state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), - }, - disabled: { - color: foreground( - colorScheme.highest, - "on", - "disabled" + // Collaborators + leaderAvatar: { + width: avatarWidth, + outerWidth: avatarOuterWidth, + cornerRadius: avatarWidth / 2, + outerCornerRadius: avatarOuterWidth / 2, + }, + followerAvatar: { + width: followerAvatarWidth, + outerWidth: followerAvatarOuterWidth, + cornerRadius: followerAvatarWidth / 2, + outerCornerRadius: followerAvatarOuterWidth / 2, + }, + inactiveAvatarGrayscale: true, + followerAvatarOverlap: 8, + leaderSelection: { + margin: { + top: 4, + bottom: 4, + }, + padding: { + left: 2, + right: 2, + top: 2, + bottom: 2, + }, + cornerRadius: 6, + }, + avatarRibbon: { + height: 3, + width: 12, + // TODO: Chore: Make avatarRibbon colors driven by the theme rather than being hard coded. + }, + + // Sign in buttom + // FlatButton, Variant + signInPrompt: merge(titlebarButton, { + inactive: { + default: { + margin: { + left: itemSpacing, + }, + }, + }, + }), + + // Offline Indicator + offlineIcon: { + color: foreground(layer, "variant"), + width: 16, + margin: { + left: itemSpacing, + }, + padding: { + right: 4, + }, + }, + + // Notice that the collaboration server is out of date + outdatedWarning: { + ...text(layer, "sans", "warning", { size: "xs" }), + background: withOpacity(background(layer, "warning"), 0.3), + border: border(layer, "warning"), + margin: { + left: itemSpacing, + }, + padding: { + left: 8, + right: 8, + }, + cornerRadius: 6, + }, + callControl: interactive({ + base: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + }, + state: { + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), + toggleContactsButton: toggleable({ + base: + interactive({ + base: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + }, + state: { + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hovered: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + }), state: + { + active: { + default: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active"), + }, + } + } + } ), - }, + userMenuButton: merge(titlebarButton, { + inactive: { + default: { + buttonWidth: 20, + iconWidth: 12, + }, + }, + active: { + // posiewic: these properties are not currently set on main + default: { + iconWidth: 12, + button_width: 20, + }, + }, + }), + + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, + }, + + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: interactive({ + base: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + }, + state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + disabled: { + color: foreground( + colorScheme.highest, + "on", + "disabled" + ), + }, + }, + }), + padding: { left: 8, right: 8, top: 4, bottom: 4 }, }, - }), - padding: { left: 8, right: 8, top: 4, bottom: 4 }, - }, - breadcrumbHeight: 24, - breadcrumbs: interactive({ - base: { - ...text(colorScheme.highest, "sans", "variant"), - cornerRadius: 6, - padding: { - left: 6, - right: 6, + breadcrumbHeight: 24, + breadcrumbs: interactive({ + base: { + ...text(colorScheme.highest, "sans", "variant"), + cornerRadius: 6, + padding: { + left: 6, + right: 6, + }, + }, + state: { + hovered: { + color: foreground(colorScheme.highest, "on", "hovered"), + background: background( + colorScheme.highest, + "on", + "hovered" + ), + }, + }, + }), + disconnectedOverlay: { + ...text(layer, "sans"), + background: withOpacity(background(layer), 0.8), + }, + notification: { + margin: { top: 10 }, + background: background(colorScheme.middle), + cornerRadius: 6, + padding: 12, + border: border(colorScheme.middle), + shadow: colorScheme.popoverShadow, }, - }, - state: { - hovered: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), + notifications: { + width: 400, + margin: { right: 10, bottom: 10 }, }, - }, - }), - disconnectedOverlay: { - ...text(layer, "sans"), - background: withOpacity(background(layer), 0.8), - }, - notification: { - margin: { top: 10 }, - background: background(colorScheme.middle), - cornerRadius: 6, - padding: 12, - border: border(colorScheme.middle), - shadow: colorScheme.popoverShadow, - }, - notifications: { - width: 400, - margin: { right: 10, bottom: 10 }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), - } + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } }