From edd925f77b3bc67a17a40b1bbd45e473e13e220a Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 13 Mar 2023 13:49:00 -0400 Subject: [PATCH] Format --- styles/src/styleTree/statusBar.ts | 4 +- styles/src/styleTree/welcome.ts | 49 +-- styles/src/styleTree/workspace.ts | 567 +++++++++++++++--------------- 3 files changed, 314 insertions(+), 306 deletions(-) diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 9fa427d302f19008f169c77e847cf67031e63562..b7e9696488d5712ecc065ecac68bd2c7b1182afa 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -29,8 +29,8 @@ export default function statusBar(colorScheme: ColorScheme) { padding: { left: 6, right: 6 }, ...text(layer, "sans", "variant"), hover: { - ...text(layer, "sans", "on") - } + ...text(layer, "sans", "on"), + }, }, autoUpdateProgressMessage: text(layer, "sans", "variant"), autoUpdateDoneMessage: text(layer, "sans", "variant"), diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts index e1bd5c82bbac65595ed3e0cd60b1f5957158889c..252489ef1bdd1618693b1180e30f2c61591701e9 100644 --- a/styles/src/styleTree/welcome.ts +++ b/styles/src/styleTree/welcome.ts @@ -1,11 +1,15 @@ - -import { ColorScheme } from "../themes/common/colorScheme"; -import { withOpacity } from "../utils/color"; -import { border, background, foreground, text, TextProperties } from "./components"; - +import { ColorScheme } from "../themes/common/colorScheme" +import { withOpacity } from "../utils/color" +import { + border, + background, + foreground, + text, + TextProperties, +} from "./components" export default function welcome(colorScheme: ColorScheme) { - let layer = colorScheme.highest; + let layer = colorScheme.highest let checkboxBase = { cornerRadius: 4, @@ -20,9 +24,9 @@ export default function welcome(colorScheme: ColorScheme) { margin: { right: 8, top: 5, - bottom: 5 + bottom: 5, }, - }; + } let interactive_text_size: TextProperties = { size: "sm" } @@ -34,7 +38,7 @@ export default function welcome(colorScheme: ColorScheme) { dimensions: { width: 64, height: 64, - } + }, }, logoSubheading: { ...text(layer, "sans", "variant", { size: "md" }), @@ -46,13 +50,13 @@ export default function welcome(colorScheme: ColorScheme) { buttonGroup: { margin: { top: 8, - bottom: 16 + bottom: 16, }, }, headingGroup: { margin: { top: 8, - bottom: 12 + bottom: 12, }, }, checkboxGroup: { @@ -62,7 +66,7 @@ export default function welcome(colorScheme: ColorScheme) { padding: { left: 12, top: 2, - bottom: 2 + bottom: 2, }, }, button: { @@ -71,7 +75,7 @@ export default function welcome(colorScheme: ColorScheme) { cornerRadius: 4, margin: { top: 4, - bottom: 4 + bottom: 4, }, padding: { top: 3, @@ -90,8 +94,7 @@ export default function welcome(colorScheme: ColorScheme) { ...text(layer, "sans", "variant", { size: "2xs" }), padding: { top: -4, - - } + }, }, checkboxContainer: { margin: { @@ -99,7 +102,7 @@ export default function welcome(colorScheme: ColorScheme) { }, padding: { bottom: 8, - } + }, }, checkbox: { label: { @@ -112,28 +115,28 @@ export default function welcome(colorScheme: ColorScheme) { dimensions: { width: 12, height: 12, - } + }, }, default: { ...checkboxBase, background: background(layer, "default"), - border: border(layer, "active") + border: border(layer, "active"), }, checked: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "active") + border: border(layer, "active"), }, hovered: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "active") + border: border(layer, "active"), }, hoveredAndChecked: { ...checkboxBase, background: background(layer, "hovered"), - border: border(layer, "active") - } - } + border: border(layer, "active"), + }, + }, } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 785f05f32458016cf615de118581154626326ff4..7752c47b44662cdf1e97269930c5b592a48ee150 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -5,302 +5,307 @@ import statusBar from "./statusBar" import tabBar from "./tabBar" export default function workspace(colorScheme: ColorScheme) { - const layer = colorScheme.lowest - const itemSpacing = 8 - const titlebarButton = { - cornerRadius: 6, - padding: { - top: 1, - bottom: 1, - left: 8, - right: 8, - }, - ...text(layer, "sans", "variant", { size: "xs" }), - background: background(layer, "variant"), - border: border(layer), - hover: { - ...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"), - }, - active: { - ...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 - - return { - background: background(colorScheme.lowest), - blankPane: { - logoContainer: { - width: 256, - height: 256, - }, - logo: { - color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), - icon: "icons/logo_96.svg", - dimensions: { - width: 256, - height: 256, - }, - }, - logoShadow: { - color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6), - icon: "icons/logo_96.svg", - dimensions: { - width: 256, - height: 256, - }, - }, - keyboardHints: { - margin: { - top: 96, - }, - cornerRadius: 4, - }, - keyboardHint: { - ...text(layer, "sans", "variant", { size: "sm" }), + const layer = colorScheme.lowest + const itemSpacing = 8 + const titlebarButton = { + cornerRadius: 6, padding: { - top: 3, - left: 8, - right: 8, - bottom: 3 + top: 1, + bottom: 1, + left: 8, + right: 8, }, - cornerRadius: 8, + ...text(layer, "sans", "variant", { size: "xs" }), + background: background(layer, "variant"), + border: border(layer), hover: { - ...text(layer, "sans", "active", { size: "sm" }), - } - }, - 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", - }, - sidebar: { - initialSize: 240, - border: border(layer, { left: true, right: true }), - }, - paneDivider: { - color: borderColor(layer), - width: 1, - }, - statusBar: statusBar(colorScheme), - titlebar: { - itemSpacing, - facePileSpacing: 2, - height: 33, // 32px + 1px for overlaid border - background: background(layer), - border: border(layer, { bottom: true, overlay: true }), - padding: { - left: 80, - right: itemSpacing, - }, - - // Project - title: text(layer, "sans", "variant"), - - // 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, + ...text(layer, "sans", "variant", "hovered", { size: "xs" }), + background: background(layer, "variant", "hovered"), + border: border(layer, "variant", "hovered"), }, - padding: { - left: 2, - right: 2, - top: 4, - bottom: 4, + clicked: { + ...text(layer, "sans", "variant", "pressed", { size: "xs" }), + background: background(layer, "variant", "pressed"), + border: border(layer, "variant", "pressed"), }, - 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: { - ...titlebarButton, - }, + active: { + ...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 - // Offline Indicator - offlineIcon: { - color: foreground(layer, "variant"), - width: 16, - margin: { - left: itemSpacing, + return { + background: background(colorScheme.lowest), + blankPane: { + logoContainer: { + width: 256, + height: 256, + }, + logo: { + color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), + icon: "icons/logo_96.svg", + dimensions: { + width: 256, + height: 256, + }, + }, + logoShadow: { + color: withOpacity( + colorScheme.isLight + ? "#FFFFFF" + : colorScheme.lowest.base.default.background, + colorScheme.isLight ? 1 : 0.6 + ), + icon: "icons/logo_96.svg", + dimensions: { + width: 256, + height: 256, + }, + }, + keyboardHints: { + margin: { + top: 96, + }, + cornerRadius: 4, + }, + keyboardHint: { + ...text(layer, "sans", "variant", { size: "sm" }), + padding: { + top: 3, + left: 8, + right: 8, + bottom: 3, + }, + cornerRadius: 8, + hover: { + ...text(layer, "sans", "active", { size: "sm" }), + }, + }, + keyboardHintWidth: 320, }, - padding: { - right: 4, + joiningProjectAvatar: { + cornerRadius: 40, + width: 80, }, - }, - - // 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, + joiningProjectMessage: { + padding: 12, + ...text(layer, "sans", { size: "lg" }), }, - padding: { - left: 8, - right: 8, + 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, - }, - callControl: { - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 20, - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), + leaderBorderOpacity: 0.7, + leaderBorderWidth: 2.0, + tabBar: tabBar(colorScheme), + modal: { + margin: { + bottom: 52, + top: 52, + }, + cursor: "Arrow", }, - }, - toggleContactsButton: { - margin: { left: itemSpacing }, - cornerRadius: 6, - color: foreground(layer, "variant"), - iconWidth: 14, - buttonWidth: 20, - active: { - background: background(layer, "variant", "active"), - color: foreground(layer, "variant", "active"), + sidebar: { + initialSize: 240, + border: border(layer, { left: true, right: true }), }, - clicked: { - background: background(layer, "variant", "pressed"), - color: foreground(layer, "variant", "pressed"), + paneDivider: { + color: borderColor(layer), + width: 1, }, - hover: { - background: background(layer, "variant", "hovered"), - color: foreground(layer, "variant", "hovered"), + statusBar: statusBar(colorScheme), + titlebar: { + itemSpacing, + facePileSpacing: 2, + height: 33, // 32px + 1px for overlaid border + background: background(layer), + border: border(layer, { bottom: true, overlay: true }), + padding: { + left: 80, + right: itemSpacing, + }, + + // Project + title: text(layer, "sans", "variant"), + + // 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: 4, + bottom: 4, + }, + 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: { + ...titlebarButton, + }, + + // 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: { + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 20, + hover: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + toggleContactsButton: { + margin: { left: itemSpacing }, + cornerRadius: 6, + color: foreground(layer, "variant"), + iconWidth: 14, + buttonWidth: 20, + active: { + background: background(layer, "variant", "active"), + color: foreground(layer, "variant", "active"), + }, + clicked: { + background: background(layer, "variant", "pressed"), + color: foreground(layer, "variant", "pressed"), + }, + hover: { + background: background(layer, "variant", "hovered"), + color: foreground(layer, "variant", "hovered"), + }, + }, + userMenuButton: { + buttonWidth: 20, + iconWidth: 12, + ...titlebarButton, + }, + toggleContactsBadge: { + cornerRadius: 3, + padding: 2, + margin: { top: 3, left: 3 }, + border: border(layer), + background: foreground(layer, "accent"), + }, + shareButton: { + ...titlebarButton, + }, }, - }, - userMenuButton: { - buttonWidth: 20, - iconWidth: 12, - ...titlebarButton, - }, - 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: { - color: foreground(colorScheme.highest, "on"), - iconWidth: 12, - buttonWidth: 24, - cornerRadius: 6, - hover: { - color: foreground(colorScheme.highest, "on", "hovered"), - background: background( - colorScheme.highest, - "on", - "hovered" - ), + toolbar: { + height: 34, + background: background(colorScheme.highest), + border: border(colorScheme.highest, { bottom: true }), + itemSpacing: 8, + navButton: { + color: foreground(colorScheme.highest, "on"), + iconWidth: 12, + buttonWidth: 24, + cornerRadius: 6, + hover: { + 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 }, + }, + breadcrumbs: { + ...text(layer, "mono", "variant"), + padding: { left: 6 }, + }, + 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 }, }, - disabled: { - color: foreground(colorScheme.highest, "on", "disabled"), + dock: { + initialSizeRight: 640, + initialSizeBottom: 304, + wash_color: withOpacity(background(colorScheme.highest), 0.5), + panel: { + border: border(colorScheme.middle), + }, + maximized: { + margin: 32, + border: border(colorScheme.highest, { overlay: true }), + shadow: colorScheme.modalShadow, + }, }, - }, - padding: { left: 8, right: 8, top: 4, bottom: 4 }, - }, - breadcrumbs: { - ...text(layer, "mono", "variant"), - padding: { left: 6 }, - }, - 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 }, - }, - dock: { - initialSizeRight: 640, - initialSizeBottom: 304, - wash_color: withOpacity(background(colorScheme.highest), 0.5), - panel: { - border: border(colorScheme.middle), - }, - maximized: { - margin: 32, - border: border(colorScheme.highest, { overlay: true }), - shadow: colorScheme.modalShadow, - }, - }, - dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), - } + dropTargetOverlayColor: withOpacity(foreground(layer, "variant"), 0.5), + } }