Format

Nate Butler created 2 years ago

Change summary

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(-)

Detailed changes

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"),

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"),
+            },
+        },
     }
 }

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),
+    }
 }