workspace.ts

  1import Theme from "../themes/theme";
  2import { backgroundColor, border, iconColor, text } from "./components";
  3
  4export default function workspace(theme: Theme) {
  5  const signInPrompt = {
  6    ...text(theme, "sans", "secondary", { size: "xs" }),
  7    border: border(theme, "primary"),
  8    cornerRadius: 6,
  9    margin: {
 10      top: 1,
 11      right: 6,
 12    },
 13    padding: {
 14      left: 6,
 15      right: 6,
 16    },
 17  };
 18
 19  const tab = {
 20    height: 32,
 21    background: backgroundColor(theme, 300),
 22    iconClose: iconColor(theme, "muted"),
 23    iconCloseActive: iconColor(theme, "active"),
 24    iconConflict: iconColor(theme, "warning"),
 25    iconDirty: iconColor(theme, "info"),
 26    iconWidth: 8,
 27    spacing: 8,
 28    text: text(theme, "sans", "secondary", { size: "sm" }),
 29    border: border(theme, "primary", {
 30      left: true,
 31      bottom: true,
 32      overlay: true,
 33    }),
 34    padding: {
 35      left: 8,
 36      right: 8,
 37    },
 38  };
 39
 40  const activeTab = {
 41    ...tab,
 42    background: backgroundColor(theme, 500),
 43    text: text(theme, "sans", "active", { size: "sm" }),
 44    border: {
 45      ...tab.border,
 46      bottom: false,
 47    },
 48  };
 49
 50  const sidebarItem = {
 51    height: 32,
 52    iconColor: iconColor(theme, "secondary"),
 53    iconSize: 18,
 54  };
 55  const shareIcon = {
 56    margin: { top: 3, bottom: 2 },
 57    cornerRadius: 6,
 58  };
 59
 60  return {
 61    background: backgroundColor(theme, 300),
 62    leaderBorderOpacity: 0.7,
 63    leaderBorderWidth: 2.0,
 64    tab,
 65    activeTab,
 66    modal: {
 67      margin: {
 68        bottom: 52,
 69        top: 52,
 70      },
 71      cursor: "Arrow"
 72    },
 73    sidebarResizeHandle: {
 74      background: border(theme, "primary").color,
 75      padding: {
 76        left: 1,
 77      },
 78    },
 79    paneDivider: {
 80      color: border(theme, "secondary").color,
 81      width: 1,
 82    },
 83    statusBar: {
 84      height: 24,
 85      itemSpacing: 8,
 86      padding: {
 87        left: 6,
 88        right: 6,
 89      },
 90      border: border(theme, "primary", { top: true, overlay: true }),
 91      cursorPosition: text(theme, "sans", "muted"),
 92      diagnosticMessage: text(theme, "sans", "muted"),
 93      lspMessage: text(theme, "sans", "muted"),
 94      autoUpdateProgressMessage: text(theme, "sans", "muted"),
 95      autoUpdateDoneMessage: text(theme, "sans", "muted"),
 96      sidebarItem: {
 97        ...sidebarItem
 98      },
 99      sidebarItemHover: {
100        ...sidebarItem
101      },
102      sidebarItemActive: {
103        ...sidebarItem,
104        iconColor: iconColor(theme, "active"),
105      },
106    },
107    titlebar: {
108      avatarWidth: 18,
109      height: 32,
110      background: backgroundColor(theme, 100),
111      padding: {
112        left: 80,
113      },
114      title: text(theme, "sans", "primary"),
115      avatar: {
116        cornerRadius: 10,
117        border: {
118          color: "#00000088",
119          width: 1,
120        },
121      },
122      avatarRibbon: {
123        height: 3,
124        width: 12,
125        // TODO: The background for this ideally should be 
126        // set with a token, not hardcoded in rust
127      },
128      border: border(theme, "primary", { bottom: true }),
129      signInPrompt,
130      hoveredSignInPrompt: {
131        ...signInPrompt,
132        ...text(theme, "sans", "active", { size: "xs" }),
133      },
134      offlineIcon: {
135        color: iconColor(theme, "secondary"),
136        width: 16,
137        padding: {
138          right: 4,
139        },
140      },
141      shareIcon: {
142        ...shareIcon,
143        color: iconColor(theme, "secondary")
144      },
145      hoveredShareIcon: {
146        ...shareIcon,
147        background: backgroundColor(theme, 100, "hovered"),
148        color: iconColor(theme, "secondary"),
149      },
150      hoveredActiveShareIcon: {
151        ...shareIcon,
152        background: backgroundColor(theme, 100, "hovered"),
153        color: iconColor(theme, "active"),
154      },
155      activeShareIcon: {
156        ...shareIcon,
157        background: backgroundColor(theme, 100, "active"),
158        color: iconColor(theme, "active"),
159      },
160      outdatedWarning: {
161        ...text(theme, "sans", "warning"),
162        size: 13,
163        margin: { right: 6 }
164      },
165    },
166    toolbar: {
167      height: 34,
168      background: backgroundColor(theme, 500),
169      border: border(theme, "secondary", { bottom: true }),
170      itemSpacing: 8,
171      padding: { left: 16, right: 8, top: 4, bottom: 4 },
172    },
173    breadcrumbs: {
174      ...text(theme, "mono", "secondary"),
175      padding: { left: 6 },
176    },
177    disconnectedOverlay: {
178      ...text(theme, "sans", "active"),
179      background: "#000000aa",
180    },
181  };
182}